Question

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>

我正在尝试为我的项目创建一个倒数计时器，用户可以在其中（以秒为单位）输入所需的值。但是，我的代码仅保留数字而不是递减计数。任何帮助，将不胜感激。

我尝试创建一个变量以获取值的元素，设置一个增量计数器和一个setInterval，该变量将每秒减去增量计数器，但我认为增量计数器不起作用？

JS文件

 function timerCountdown() {

        var timeleft = document.getElementById("text").value;
        var counter = 0;
        counter++;

        displayTime.innerHTML = (timeleft - counter);
        setInterval(timerCountdown,1000);



  }

HTML文件

<input type="text" id="text" style="display: none;">
<span id="displayTime"></span>

我希望计时器开始倒计时，但是它所做的只是将值减1并保持在该位置。

Answer 1

你可以试试吗？

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()">

Answer 2

您需要在功能之外初始化计数器。您需要将函数传递给setInterval而不是调用函数。

var counter = 0;
function timerCountdown() {
        var timeleft = document.getElementById("text").value;
        counter++;
        displayTime.innerHTML = (timeleft - counter);
        setInterval(timerCountdown ,1000);
}

您仍然需要担心停止计数器。

Answer 3

如果我是你，我将计算倒计时应达到零的目标时间，并计算每次迭代与该时间的差值。这样做的原因是，您还必须考虑到可以暂停超时和间隔，从而更改速度，这将导致错误的倒计时。看看Chrome: timeouts/interval suspended in background tabs?

看看下面我一起砍掉的一个简单示例。有点古怪，但这显示了一个好的开始。

<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>

Answer 4

这是我的看法

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>

倒数计时器的计数器不工作

4 个答案: