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() { /* your action */ }, 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）可能更容易。

Answer 2

我修改了你的代码。看起来你正在寻找。

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

<input type = "number" id = "inputValue" onchange="setTime()"> 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>

创建一个倒计时秒表，来自输入框的初始值

2 个答案: