Question

我正在创建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）。我在这里做错了什么？

小提琴演示位于 Here ：在这里您可以看到两个值互相闪烁

Answer 1

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

Answer 2

以下是我如何实现这一点。希望评论足够。它需要页面中带有ID＆＃34; counterDiv＆＃34;的元素。将值写入。

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

Answer 3

我解决了以下问题：

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

Javascript Timer CountDown

3 个答案: