第一个问题-我试图放慢进程栏的速度。我希望它需要1分钟才能完成加载。这是我的代码:JS-
function start(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al + "%";
bar.value = al;
al++;
var sim = setTimeout("start(" + al + ")", 1);
if (al == 100) {
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "Process is complete";
}
Html代码:
<progress id="progressBar" value="0" max="100" style="width:400px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<button onclick="start(0)">Scan</button>
第二个问题-随着加载,我想要一些图像是根据我的进度条缓慢向下滑动。当这个过程完成后,整个图像就会显示在下一页。
事实上,我正试图创建一个小网站来了解更多信息,因为我在这个网站上是这个领域的新手,我正在尝试处理一张图像,处理完新的扫描图像后,将显示到下一页。帮我改正错误。
试试这个(你的代码中有一些语法错误):
function start(al) {
var bar = document.getElementById('progressBar');
var status = document.getElementById('status');
status.innerHTML = al + "%";
bar.value = al;
al++;
//var sim = setTimeout("start(" + al + ")", 10000);
var sim = setTimeout(function() {
start(al);
}, 100); // 100 milliseconds
if (al == 100) {
status.innerHTML = "100%";
bar.value = 100;
clearTimeout(sim);
var finalMessage = document.getElementById('finalMessage');
finalMessage.innerHTML = "Process is complete";
}
}
<progress id="progressBar" value="0" max="100" style="width:400px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"></h1>
<button onclick="start(0)">Scan</button>
尽量避免将数据作为字符串传递给setTimeout()
函数。改为传递匿名函数。它看起来像是在使用eval()
函数。因为评估"实时"代码比直接在脚本中包含代码要慢。
我已经使用jquery动画实现了您的需求。请检查下面的片段,如果您发现任何疑问,请告诉我。
$('#btns').click(function(){
var $wrapper = $('<div />').addClass('wrap');
$('img').wrap($wrapper);
$('img').css('opacity', 1);
$('img').parent().animate({
height: '100px'
},
{
duration: 2500, //you can change it according to your need of speed
step: function(al)
{
$('#status').html(al + "%");
$('#progressBar').val(al);
al++;
if (al == 100)
{
$('#status').html("100%");
$('#progressBar').val(100);
}
},
complete: function()
{
$('#finalMessage').html("Process is complete");
}
});
});
img{
opacity:0;
}
.wrap {
position:relative;
height:0;
overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<progress id="progressBar" value="0" max="100" style="width:400px;"></progress>
<span id="status"></span>
<h1 id="finalMessage"><h1>
<button id="btns">Scan</button> <!-- onclick="start(0)" -->
<img src="http://www.textileexpressfabrics.co.uk/WebRoot/BT4/Shops/BT3246/56F4/0B49/3BC3/A909/78CC/0A0C/0596/9596/tex_ex_1058_Plush_Velour_pink.jpg" />