Question

我是JavaScript的初学者。我试图在五秒内将进度条的值从100更改为0，我无法使其正常工作。我试过这个tutorial但是没有办法控制时间。我有JSFiddle来展示我拥有的东西。我真的很感激任何帮助。我的Javascript

var correct = "a1";
function onload()
{
var question1 = "Who was the first president?";
var answers = {
  "a1":"George Washington",
  "a2":"John Adams", 
  "a3":"Bill Clinton",
  "a4":"Richard Nixon"}; 
document.getElementById("qstn").innerHTML=question1;
document.getElementById("a1").innerHTML=answers.a1;  
document.getElementById("a2").innerHTML=answers.a2;  
document.getElementById("a3").innerHTML=answers.a3; 
document.getElementById("a4").innerHTML=answers.a4;
var bar = document.getElementById("bar").value;
}

我的HTML

<body onload="onload()">
<p id="qstn"></p>
<button class="btn" onclick="checker()"><span id="a1"></span></button>
<button class="btn" onclick="checker()"><span id="a2"></span></button>
<button class="btn" onclick="checker()"><span id="a3"></span></button>
<button class="btn" onclick="checker()"><span id="a4"></span></button>
<progress value="100" max="100" id="bar"></progress>
</body>

再次，非常感谢任何帮助或评论。

Answer 1

您可以使用这样的间隔：

var max = 100;
setInterval(function(){
document.getElementById("bar").value=max;
        max = max-20;
},1000);

希望这有帮助！它在5秒到0的值上运行。

Answer 2

你可以试试这个： -

setInterval(function(){bar.value--},1000);

1000表示第二个

Answer 3

这是你想要的工作小提琴：

http://jsfiddle.net/zfuTp/8/

添加了代码：

var interval = setInterval(update, 1000);
var i = 100;

function update() {
    document.getElementById("bar").style.width = (i-=20) + "%";      
    if(i<=0) clearInterval(interval);
}

此处，进度条的宽度在每次迭代中减少20％，持续5秒。

javascript在五秒钟内逐渐更改变量

3 个答案: