Question

我是JS的新手，我一直试图找出导致倒数计时器不倒计时的原因。用户以00:00:00格式分钟，秒和毫秒输入时间。然后，我将该格式转换为秒，以开始倒计时。我认为计算很好，但有些事情并没有导致它不应该表现得如此。我已经测试并看到代码在输入时间和显示输出方面运行。我看到倒计时递减，同时为秒和毫秒，但它应该从10:00:00到09:59:99 ... 09:59:98 ...基本上秒不会改变直到毫秒达到零。所以09:59:00将是09:58:99 ...非常感谢任何帮助。我一直在这，并被卡住了。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">

   var running = 0; //Glob variable for starting/pausing timer

   function startPause(){ 
      var time = document.getElementById("timeEntered").value; //Not sure if needed but I just have the time entered be converted to seconds.
      var a = time.split(":");
      var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
      if(running == 0){ //If off, turn it on. 
         running = 1;
         countDown();
         document.getElementById("startPause").innerHTML = "Start/Stop";
      }else{
        running = 0;
        document.getElementById("startPause").innerHTML = "Resume";
      }
   }

   function countDown() {
      var time = document.getElementById("timeEntered").value; //Take user input and convert 00:00:00 format to seconds. 
      var a = time.split(":");
      if(!timeToSeconds)
      var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
      if(running == 1){ //When user clicks start it will calculate the minutes, seconds, and milliseconds. 
         var minutes = Math.floor(timeToSeconds / 60);
         var seconds = timeToSeconds % 60;
         var milli = timeToSeconds % 100;
         if(minutes <= 9) { //Add leading zeroes to display countdown in 00:00:00 format.
             minutes = "0" + minutes;
         }
         if(seconds <= 9) {
             seconds = "0" + seconds;
         }
         if(milli <= 9) {
             milli = "0" + milli;
         }
         timeToSeconds--; //Decrement the time entered.
         console.log(timeToSeconds); 
         document.getElementById("output").innerHTML = minutes + ":" + seconds + ":" + milli //Display the time 00:00:00 format. 
         if(timeToSeconds !== -1){
             setTimeout('countDown()',100);
         }
         if(timeToSeconds == 0){ //When time is 00:00:00 the message will show. 
             document.getElementById("output").innerHTML = "The time is over."
         }
     }
  }

</script>
</head>
<body>
   <h1>Countdown Timer</h1>
   <div id="mainCont">
   <input type="text" id="timeEntered">
   <p>
     <button id="startPause" onclick="startPause()">Start/Stop</button>
   </p>
     <div id="output">00:00:00</div>
  </div>
</body>
</html>

Answer 1

这里有一些问题，所以我将逐一介绍解决方案。第一个问题是timeToSeconds的值在每次迭代时都是相同的。这样做的原因是因为您从同一个不变的源获取值，因为下一个函数调用中的值丢失，因此递减不执行任何操作。要解决这个问题，你的函数需要一个参数，你可以在修改它之后将剩余的秒数传递出去：

function countDown(timeToSeconds) {
    ...
    timeToSeconds-=0.1; //Decrement the time entered.

    if(timeToSeconds <= 0){ //When time is 00:00:00 the message will show. 
         document.getElementById("output").innerHTML = "The time is over."
         return;
     }
     else if(timeToSeconds !== -1){
         setTimeout(function(){countDown(timeToSeconds)},100);
     }

注意我只减去了0.1，因为我们的setTimeout在100毫秒（0.1秒）后被调用。我已经切换了支票，因为即使timeToSeconds为0，你也会调用计时器。

接下来的事情是你在这里的代码中关闭转换为秒：

var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);

分钟和秒都以相同的方式计算，a[1]是秒值，不应该相乘。而a[2]实际上是10*milliseconds（ 1秒= 1000毫秒）。该值应除以100：

  if(!timeToSeconds)
    var timeToSeconds = (+a[0]) * 60 + (+a[1]) + (Math.floor(+a[2]/100));

if-statement是基本检查，如果值为true（任何数字）。在我们的例子中，它可以作为＆＃34;这个值是否存在＆＃34; 检查，因为我们只处理正数。以下转换应该是：

 var minutes = Math.floor(timeToSeconds / 60) % 60;
 var seconds = Math.floor(timeToSeconds) % 60;
 var milli = Math.floor(timeToSeconds*100) % 100;

在大多数情况下，minutes和seconds的值正确无误。虽然milli和seconds出现相同的原因是因为您从未将milli转换为正确的值，因此除了%之外，它们具有相同的值

Here is the final result

我想指出的最后一件事是这个计时器不准确。因为计算和setTimeout调用之间需要一些时间。要获得更准确的值，您需要使用Date.now()并查找start时间和current计时器之间的差异。 This question使用这样的方法，可以以相同的方式应用于倒数计时器。

倒数计时器，以毫秒为单位

1 个答案: