Question

我正在尝试以00:00:00（分钟，秒和百分之一）的格式创建倒数计时器。现在我设置倒数计时器的方法就是确保用户输入的格式为00:00:00（必须是）。从那里倒计时时间应该在他们点击开始按钮时开始。我看到它确实有点倒计时，但我不确定我的实现会出现什么问题。由于某种原因，百分之一没有正确递减。它应该从10:00:00（10分钟）开始，然后到09:59:99 ... 09:59:98等。

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Countdown Timer</title>
   <script type="text/javascript">
      var running = 0;
      var hundreds = 0;

      function validTime() {
      var setTime = document.getElementById("timeEntered").value; 
      var regex = /^\d{2}:\d{2}:\d{2}$/;
      if (regex.test(setTime)) {
            document.getElementById("timeAlert").innerHTML = "<span class='valid'>Valid</span>";
            return (true);
            } else {
            document.getElementById("timeAlert").innerHTML = "<span class='error'>Invalid time entered. Please make sure it's in the format 00:00:00</span>";
            return (false);
            }
      }

      function correctTime(){
         if (validTime()){
            countdownTimer();
            return true;
         }else{
            alert("Please correct your inputted time.");
            return false;
         }
      }

      function countdownTimer() {
         var time = document.getElementById("timeEntered").value;
         var a = time.split(":");
         var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
         if(parseInt(timeToSeconds) <= 600 ) {
            startPause();
         }else{
            document.getElementById("output").innerHTML = "Sorry. Time range cannot exceed 10 mins.";
         }
      }

      function startPause(){
         var time = document.getElementById("timeEntered").value;
         var a = time.split(":");
         var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
         if(running == 0){
            running = 1;
            decrement();
            document.getElementById("startPause").innerHTML = "Start/Stop";
         }else{
            running = 0;
            document.getElementById("startPause").innerHTML = "Resume";
         }
      }

      var hundreds = 0;
      function decrement(){
         var time = document.getElementById("timeEntered").value;
         var a = time.split(":");
         var timeToSeconds = (+a[0]) * 60 + (+a[1]) * 60 + (+a[2]);
         if(running == 1){        
               var mins = Math.round((timeToSeconds - 30)/60);
               var secs = timeToSeconds % 60;
               //var hundredths = timeToSeconds % 100;
               if(mins < 10) {
                  mins = "0" + mins;
               }

               if(secs < 10) {
                  secs = "0" + secs;
               }

               document.getElementById("output").innerHTML = mins + ":" + secs + ":" + hundreds;
               if (hundreds === 0){
                  if(timeToSeconds ===0){
                     clearInterval(countdownTimer);
                     document.getElementById("output").innerHTML = "Time's Up.";
                  }else{
                     timeToSeconds--;
                     hundreds = 100;
                  }
                  }else{
                     hundreds--;
                  }
                  var countdownTimer = setInterval('decrement()', 10)
          }
      }

</script>
</head>
<body>
   <h1>Countdown Timer</h1>
   <div id="mainCont">
      <p>Please enter the desired time:
        <input type="text" id="timeEntered" onblur="validTime();">&nbsp;&nbsp;<span id="timeAlert"></span>
      </p>
      <p>
        <button id="startPause" onclick="correctTime()">Start/Stop</button>
      </p>
      <div id="output">00:00:00</div>
  </div>
</body>
</html>

Answer 1

我不确定这是否是您想要的，但我有一些计时器的工作代码可以计算到给定输入（以秒为单位），包括1/100秒。如果你想要包括你提到的ms，你将需要3 0或者＆＃39; 000＆＃39;用于显示结束。这是代码。当然，如何为你的场景修改它，但计时器是perfe实现的

＆＃13;

function startTimer(duration, display) {
    var timer = duration, minutes, seconds, dispms;
    setInterval(function () {
        minutes = parseInt(timer / 60, 10);
        seconds = parseInt(timer % 60, 10);
        dispms=parseInt((timer)%100,10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        dispms = dispms < 10 ? "0" + dispms : dispms;
        display.textContent = minutes + ":" + seconds+":"+dispms;

        if (--timer < 0) {
            timer = duration;
        }
    }, 1000);
}

window.onload = function () {
    var fiveMinutes = 60 * 5,
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

＆＃13;

<body>
    <div>Registration closes in <span id="time"></span> minutes!</div>
</body>

＆＃13;

我认为你只需要在HTML部分进行更改。我的代码中的其余逻辑适用于通用计时器。您必须将秒作为参数传递，即全部

Answer 2

我认为@ bholagabbar的代码需要重写为一秒钟而不是几秒钟。

function startTimer(duration, display) {
    var timer = duration, minutes, seconds, dispms;
    setInterval(function () {
        dispms=parseInt(timer % 100,10);
        seconds = parseInt(timer / 100, 10);
        minutes = parseInt(seconds / 60, 10);
        seconds = parseInt(seconds % 60, 10);
        minutes = minutes < 10 ? "0" + minutes : minutes;
        seconds = seconds < 10 ? "0" + seconds : seconds;
        dispms = dispms < 10 ? "0" + dispms : dispms;
        display.textContent = minutes + ":" + seconds+":"+dispms;

        if (--timer < 0) {
            timer = duration;
        }
    }, 10);  //hundreths of a second - 1000 would be 1 second
}

window.onload = function () {
    var fiveMinutes = 60 * 5 * 100, //hundreths of second
        display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

倒数计时器百分之一？

2 个答案: