0

我是 JavaScript 的初学者。我试图在五秒钟内将进度条的值从 100 更改为 0，但我无法让它正常工作。我尝试了本教程，但无法控制时间。我有一个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>

再次，任何帮助或意见将不胜感激。

4

3 回答 3

2

你可以像这样使用间隔：

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

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

于 2013-03-28T16:39:44.980 回答
0

你可以试试这个： -

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

1000表示第二个

于 2013-03-28T16:36:55.320 回答
0

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

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);
}

在这里，进度条的宽度在每次迭代 5 秒时减小 20%。

于 2013-03-28T16:42:01.807 回答