第一个问题- 我正在尝试减慢我的进程栏的速度。我希望它需要 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()
函数。因为评估“实时”代码比直接在脚本中使用代码要慢。
关于javascript - 我想降低 html 中进程栏的速度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37267984/