Tha*_*343 1 html javascript timer countdown
我一直试图让这个javascript倒计时工作,并从3到1倒计时,但我无法弄清楚为什么它不会一直下降到0？
为什么它在1处停止,如何使其完全倒计时？
<body>
<p>Time left: <span id="time">3</span> seconds.</p>
<p><a href="#" onclick="play()">Play</a> <a href="#" onclick="pause()">Pause</a></p>
<script>
var time = 3,
timeElement = document.getElementById('time'),
timer = null;
var updateTimer = function() {
timeElement.innerHTML = time--;
if (time === 0) {
clearInterval(timer);
}
}
function play() {
timer = setInterval(updateTimer, 1000);
return false;
}
function pause() {
clearInterval(timer);
return false;
}
</script>
</body>
您还可以测试我在这里制作的JsFiddle:http://jsfiddle.net/Vg4kQ/ 感谢您的帮助!
使用前缀而不是postfix减量:
timeElement.innerHTML = --time;
这与前缀和后缀增量/减量运算符之间的语义差异有关.它们都按预期增加/减少变量的值,但在用作表达式时它们不会计算到相同的值.
前缀增量/减量都以大多数人预期的方式运行:它们调整变量的值,然后计算到新值.
var x = 5;
console.log(++x); // 6
console.log(x); // 6
后缀运算符不太直观.它们仍然以相同的方式修改值,但是当用作表达式时,它们在修改之前评估变量的值.
var x = 5;
console.log(x++); // 5
console.log(x); // 6
在你的代码中,当time达到0时,后缀表达式仍然产生前一个值1,使得timeElement值仍然显示为1,但仍然结束循环.将表达式转换为使用前缀减量修复了该问题.
或者,您可以随时将其拆分为两个语句.
time--;
timeElement.innerHTML = time;