Javascript 带毫秒的倒计时计时器_Javascript_Html

Javascript 带毫秒的倒计时计时器

javascript html

Javascript 带毫秒的倒计时计时器,javascript,html,Javascript,Html,我是JS新手，我一直在试图找出是什么导致我的倒计时计时器不倒计时。用户以00:00:00格式（分、秒和毫秒）输入时间。之后，我将该格式转换为秒，开始倒计时。我认为计算是正确的，但并不是有什么原因导致它不能正常工作。我已经测试并看到代码在输入时间和显示在输出方面运行。我看到倒计时同时在秒和毫秒递减，但应该从10:00:00到09:59:99。。09:59:98... 基本上，在毫秒达到零之前，秒不会改变。所以09:59:00将是09:58:99。。。非常感谢您的帮助。我一直在做这件事，结果被卡住了

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


var运行=0//用于启动/暂停计时器的Glob变量
函数startPause（）{
var time=document.getElementById（“timeEntered”）.value；//不确定是否需要，但我只是将输入的时间转换为秒。
var a=时间分割（“：”）；
var timeToSeconds=（+a[0]）*60+（+a[1]）*60+（+a[2]）；
如果（running==0）{//如果关闭，则将其打开。
运行=1；
倒计时（）；
document.getElementById（“startPause”）.innerHTML=“开始/停止”；
}否则{
运行=0；
document.getElementById（“startPause”）.innerHTML=“Resume”；
}
}
函数倒计时（）{
var time=document.getElementById（“timeEntered”）.value；//获取用户输入并将00:00:00格式转换为秒。
var a=时间分割（“：”）；
如果（！timeToSeconds）
var timeToSeconds=（+a[0]）*60+（+a[1]）*60+（+a[2]）；
如果（running==1）{//当用户单击start时，它将计算分钟、秒和毫秒。
var分钟=数学下限（时间到秒/60）；
var秒=时间秒%60；
var milli=时间秒%100；
如果（分钟这里有一些问题，因此我将逐一检查并向您展示解决方案。第一个问题是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);
     }

分钟和秒的计算方法相同，a[1]
是秒值，不应相乘。而a[2]
实际上是10*毫秒（1秒=1000毫秒）。该值应除以100
：
  if(!timeToSeconds)
    var timeToSeconds = (+a[0]) * 60 + (+a[1]) + (Math.floor(+a[2]/100));

if语句
是一个基本检查，检查值是否为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转换为正确的值，因此除了应用的%
之外，它们将具有相同的值

我想指出的最后一件事是，这个计时器并不精确。因为在计算和setTimeout
调用之间需要一些时间。要获得更精确的值，您需要使用Date.now（）
并找出开始
时间和当前
计时器之间的差异。使用这样的方法，可以以相同的方式应用于倒计时计时器。
这太模糊了，无法回答，您应该描述发生了什么，您期望发生什么，您尝试了什么。请学习如何使用JavaScript控制台和调试您的代码，执行console.log（timeToSeconds）
显示您的问题。该值从未更改。因为您一直从静态的输入中获取该值。函数正在调用，但值从未更改。这是您所期望的还是它仍然有问题（我假设您不希望中间值按原样递增）？如果是，请描述问题所在以及您的期望。我感谢Spencer的帮助…但是倒计时应该像秒表一样工作，但相反。如果毫秒递减，在秒可以改变之前，毫秒必须先从100-0达到。10:00:00…09:59:99…09:59:98…当然这是uld将被快速模拟到09:59:00..09:58:99。现在它的秒数和毫秒数同时递减。@user5544269这是因为mili
或seconds都不会乘以任何数字，所以除了模运算符之外，它们将是相同的值。我在下面添加了我的答案。
 var minutes = Math.floor(timeToSeconds / 60) % 60;
 var seconds = Math.floor(timeToSeconds) % 60;
 var milli = Math.floor(timeToSeconds*100) % 100;