Java脚本定时器倒计时

Java script Timer CountDown

本文关键字：倒计时 定时器 脚本 Java      更新时间：2023-09-26

我正在创建java脚本倒计时计时器，它可以正确工作60秒，之后它不工作。

var counter = setInterval(timer, 1000); //1000 will  run it every 1 second
function timer() {   
    var val = document.getElementById("LabelTimer");
    if (val != null) {
        var PopUpTimeDuration = 2;  
        countdown(parseInt(PopUpTimeDuration));
    }
}
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counterVal = document.getElementById("lblCountDown");
        var current_minutes = mins - 1
        seconds--;
        counterVal.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        var result = counterVal.innerHTML;
        if (result == "0:00") {
            clearInterval(counter);
            CloseIdlePage();
        } 
        if (seconds > 0) {
            setTimeout(tick, 1000);
        } else {
            debugger;
            if (mins >= 1) {
                countdown(mins - 1); 
            }
        }
    }
    tick();
}

当我运行这个程序时，它开始1:59，并持续到1:01。之后，这个显示值休息到1:59。(不是0:59)。我做错了什么?

小提琴演示在这里:在这里你可以看到两个值相互闪烁

我将如何实现它。希望这些评论是足够的。它需要在页面中有一个ID为"counterDiv"的元素来将值写入。

function quickCount(mins) {
  // Keep some values in a closure
  var el = document.getElementById('counterDiv');
  var secs = 0;
  // Helper to pad single digit numbers
  function z(n){return (n<10? '0':'') + n}
  // Keep a reference to the interval
  var timer = setInterval(function() {
    // Write the values
    el.innerHTML = mins + ':' + z(secs);
    // Decremement seconds
    --secs;
    // If finished a minute, decrement minut
    if (secs < 0) {
      if (mins) {
        --mins;
        secs = 59;
      // If finsihed minutes too, cancel timer
      } else {
        timer && clearInterval(timer);
      }
    }
  // Run at about every second
  }, 1000);
}

window.onload = function() {
  quickCount(2);
}

HTH 

        <head>
          <script type="text/javascript">
          function timer() 
          {   
               var val = document.getElementById("LabelTimer");

               if (val !== null)
                  {
                           var PopUpTimeDuration = 2;  
                           countdown(parseInt(PopUpTimeDuration));
                   }
          }
         function countdown(minutes)
         {
                var seconds = 60;
                var mins = minutes;
                function tick()
                {
                var counterVal = document.getElementById("lblCountDown");
                var current_minutes = mins - 1;
                seconds--;
var t=current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
                counterVal.value = t;
                var result = counterVal.innerHTML;
                 if (result === "0:00")
                 {
                          CloseIdlePage();
                   } 
                 if (seconds > 0)
                 {
                      setTimeout(tick, 1000);
                 } 
                 else 
                   {
                      if (mins > 1)
                      {
                      countdown(mins - 1); 
                      }
                   }
                  }
               tick();
           }
      </script>
  </head>
   <body>
          <div>TODO write content</div>
          <input type="text" id="LabelTimer" value="yooo">
           <input type="text" id="lblCountDown">
          <input type="button" value="try" onclick="timer();" />
   </body>

我做了如下处理:

var counter = setInterval(timer, 1000); //1000 will  run it every 1 second
var IsFunctionCalled = false;
function timer() {   
    var val = document.getElementById("LabelTimer");
    if (val != null) {
        var PopUpTimeDuration = 2; 
         if (IsFunctionCalled == false) {
            IsFunctionCalled = true 
            countdown(parseInt(PopUpTimeDuration));
        }
    }
}
function countdown(minutes) {
    var seconds = 60;
    var mins = minutes
    function tick() {
        var counterVal = document.getElementById("lblCountDown");
        var current_minutes = mins - 1
        seconds--;
        counterVal.innerHTML =
        current_minutes.toString() + ":" + (seconds < 10 ? "0" : "") + String(seconds);
        var result = counterVal.innerHTML;
        if (result == "0:00") {
            clearInterval(counter);
            CloseIdlePage();
        } 
        if (seconds > 0) {
           setTimeout(tick, 1000);
          // tick()
        } else {
            if (mins >= 1) {
                countdown(mins - 1); 
            }
        }
    }
    tick();
}

查看Demo

相关文章：