倒数计时器的计数器不起作用
[英]Counter for countdown timer isn't working
问题描述
function timerCountdown() { var timeleft = document.getElementById("text").value; timeleft -= 1; displayTime.innerHTML = timeleft; setInterval(timerCountdown, 1000); }
Set Timer<input type="text" id="text" value=""> <br> <span id="displayTime"></span> <br> <button onclick="timerCountdown()" type="button" id="button" value="submit">GENERATE</button>
I'm trying to create a countdown timer for my project, where users will be able to key in (in seconds) the value they want.
我正在尝试为我的项目创建一个倒数计时器，用户可以在其中键入（以秒为单位）他们想要的值。 However, my codes only stay at a number instead of counting down.但是，我的代码只停留在一个数字上，而不是倒计时。 Any help would be appreciated.任何帮助，将不胜感激。
I tried creating a variable to get the element of the value, setting up an increment counter, and a setInterval, which the variable will minus the increment counter every second, but I don't think the increment counter works?我尝试创建一个变量来获取值的元素，设置一个增量计数器和一个 setInterval，该变量将每秒减去增量计数器，但我认为增量计数器不起作用？
JS File JS文件
function timerCountdown() {
var timeleft = document.getElementById("text").value;
var counter = 0;
counter++;
displayTime.innerHTML = (timeleft - counter);
setInterval(timerCountdown,1000);
}
HTML File HTML 文件
<input type="text" id="text" style="display: none;">
<span id="displayTime"></span>
I expected the timer to be counting down, but instead all it does is subtract the value by 1 and stays there.我预计计时器会倒计时，但它所做的只是将值减去 1 并停留在那里。
4 个解决方案
解决方案1
2 已采纳 2019-11-06 07:37:49
Can you try this?你能试试这个吗？
function startCountDown() { var timeleft = document.getElementById('countdown').value; document.getElementById('display').innerHTML = timeleft; var downloadTimer = setInterval(function(){ timeleft -= 1; document.getElementById('display').innerHTML = timeleft; if(timeleft <= 0){ clearInterval(downloadTimer); document.getElementById('display').innerHTML = 'Finished'; } }, 1000); }
<span id="display"></span> <br/> <input type="number" id="countdown"> <input type="button" value="Start countdown" onclick="startCountDown()">
解决方案2
0 2019-11-06 07:38:00
You need to initialise the counter outside the function.您需要在 function 之外初始化计数器。 You need to pass the function into setInterval rather than call the function.您需要将 function 传递到 setInterval 而不是调用 function。
var counter = 0;
function timerCountdown() {
var timeleft = document.getElementById("text").value;
counter++;
displayTime.innerHTML = (timeleft - counter);
setInterval(timerCountdown ,1000);
}
You still have to worry about stopping the counter.您仍然需要担心停止柜台。
解决方案3
0 2019-11-06 07:54:55
If I were you, I'd calculate the target time that the countdown should reach zero and calculate the difference to that time on each iteration.如果我是你，我会计算倒计时应该达到零的目标时间，并计算每次迭代时与该时间的差异。 The reason for this is that you also have to take into account that timeouts and intervals can be suspended and thereby change speed which will result in an incorrect countdown.这样做的原因是您还必须考虑到超时和间隔可能会被暂停，从而改变速度，这将导致错误的倒计时。 Take a look at Chrome: timeouts/interval suspended in background tabs?看看Chrome：后台选项卡中暂停的超时/间隔？
And have a look at a quick example I hacked together below.看看我在下面一起破解的一个简单示例。 It's a bit quirky, but it shows a good start.这有点古怪，但它显示了一个良好的开端。
<html>
<head>
<script type="text/javascript">
var targetTime;
var interval;
function startCountdown() {
clearInterval(interval);
var seconds = parseInt(document.getElementById("text").value);
targetTime = new Date(new Date().getTime() + (seconds * 1000))
interval = setInterval(countdown, 1000);
countdown();
}
function countdown() {
var msLeft = targetTime - new Date();
var secondsLeft = Math.floor(msLeft / 1000);
displayTime.innerHTML = secondsLeft;
}
</script>
</head>
<body>
<input type="text" id="text">
<button type="button" onclick="startCountdown()">Start</button>
<span id="displayTime"></span>
</body>
</html>
解决方案4
0 2019-11-06 07:56:39
Here is my take on this这是我对此的看法
function timerCountdown() { var displayTime = document.getElementById("element"); var timeleft = parseInt(displayTime.innerHTML); timeleft--; if(timeleft <= 0){ clearInterval(MyInterval); } displayTime.innerHTML = timeleft; } var MyInterval = setInterval(function(){ timerCountdown(); },1000);
<span id="element">10</span>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.