javascript - 创建一个倒计时的秒表，输入框中的初始值

Question

我似乎只在单击按钮时前进一位数字，然后它停止，因为倒计时正在恢复到输入框中的初始值。我想要在输入字段中输入一个初始值，然后用作倒计时的开始时间，一直持续到 0。

我被困住了。有解决办法吗？

function startButton() {
     //--inputValue
       var d = document.getElementById("inputValue").value;
       if (d != 0) {
             --d;    
             document.getElementById("demo").innerHTML = d;
             document.getElementById("omed").innerHTML = "Thank you";
      } 
      else 
      {
            document.getElementById("omed").innerHTML = "Please enter your time";
      }
}

<p>Stopwatch </p>

<input type = "number" id = "inputValue"> minutes</input>

<br><br>
<button onClick= "setInterval(startButton(), 1000)">Start counter!
</button>

<button onClick="clearInterval(myTimer)">Pause counter!
</button>

<p id = "demo"></p>

<br>

<p id = "omed">Enter countdown length</p>

Answer 1

您想要做的是设置一个包含计时器的变量。

var myTimer = setInterval(function() {/* 你的操作 */}, 60000 );

这将设置一个计时器，每 1 分钟触发一次“您的操作”部分。当您使用变量时，您知道如何访问计时器并可以随时停止/启动它。

现在我们可以将代码放入其中以更新 HTML 元素，如下所示:document.getElementById("demo").innerHTML = --d;

代码为:

var myTimer = setInterval(function() { 
    document.getElementById("demo").innerHTML = --d;
}, 60000);

您现在可以通过在任意位置调用:clearInterval(myTimer) 来停止计时器。因此您仍然可以在 onClick 中使用它。

上例中的问题是，现在即使达到 0，它也会倒计时。所以你想在达到 0 时自动停止它。这可以通过检查变量来完成:

if (d !== 0) {
        document.getElementById("demo").innerHTML = --d;   
      }else {
        clearInterval(myTimer); // clear the timer when it hits 0 to make sure it'll not go under 0
      }

我还在代码中添加了一些反馈。但它很容易阅读:如果大于 0，则执行:d - 1。如果为 0，则停止计时器。您还可以在 else { } 中放入计时器已完成的消息。

我用您的代码中的上述信息更改了一些内容:

var myTimer = null;
    
function startButton() {
       clearInterval(myTimer); // Clear the interval so it restarts when reclicking
       var d = document.getElementById("inputValue").value;
       if (d !== 0) {
        document.getElementById("demo").innerHTML = d;  // Set info ready so user knows countdown started. 
        myTimer = setInterval(function() {
          if (d !== 0) {
            document.getElementById("demo").innerHTML = --d;   
          }else {
            clearInterval(myTimer); // clear the timer when it hits 0 to make sure it'll not go under 0
          }
        }, 60000);
      }
      else 
      {
         document.getElementById("omed").innerHTML = "Please enter your time";
         myTimer.clearInterval();
      }
}

<p>Stopwatch</p>
    
<input type="number" id="inputValue"> minutes </input>

<br><br>
<button onClick="startButton()">Start counter!
</button>

<button onClick="clearInterval(myTimer)">Pause counter!
</button>

<p id = "demo"></p>
<br>
<p id = "omed">Enter countdown length</p>

提示:出于测试目的，在间隔中使用秒(1000 而不是 60000)可能会更容易。