以毫秒为单位的倒计时答案

【问题标题】：Countdown timer with milliseconds以毫秒为单位的倒计时
【发布时间】：2015-12-13 11:10:21
【问题描述】：

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

【问题讨论】：

这个太模糊了，无法回答，你应该描述会发生什么，你期望会发生什么，你尝试了什么。
请学习如何使用 JavaScript 控制台并调试您的代码，console.log(timeToSeconds) 会显示您的问题。价值永远不会改变。因为你不断地从你的input 那里得到它，它是静态的。正在调用函数，但值永远不会改变。
Here is the code with the applied fix。这是您所期望的还是它仍然有问题（我假设您不希望中间值按原样增加）？如果是这样，请描述问题所在以及您的预期。
感谢 Spencer 的帮助...但是倒计时应该像秒表一样工作，但相反。在毫秒递减并且在秒可以改变之前，毫秒必须首先从 100-0 达到，就像这样。 10:00:00... 09:59:99... 09:59:98.. 当然这会快速模拟到 09:59:00.. 09:58:99。现在它同时减少了秒和毫秒。
@user5544269 这是因为mili 或seconds 都没有乘以任何数字，所以除了模运算符之外它们将是相同的值。我在下面添加了我的答案。

标签： javascript html

【解决方案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（为任意数字）。在我们的例子中，它可以作为 “这个值是否存在” 检查，因为我们只处理正数。以下转换应该是：

 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 使用了这样的方法，可以同样的方式应用于倒计时。

【讨论】：