倒数计时器停在零我希望它重置

时间:2012-11-30 05:38:47

标签: javascript html css

我试图找出一种方法让我的倒数计时器在25时再次重新启动,当它达到0时。我不知道我错了但是它不会工作。

的Javascript

window.onload = function() {
   startCountDown(25, 1000, myFunction);
}

function startCountDown(i, p, f) {
   var pause = p;
   var fn = f;
   var countDownObj = document.getElementById("countDown");

   countDownObj.count = function(i) {
      //write out count
      countDownObj.innerHTML = i;
      if (i == 0) {
      //execute function
      fn();
      //stop
      return;
   }
   setTimeout(function() {
      // repeat
      countDownObj.count(i - 1);
      },
      pause  
      );
   }
   //set it going
   countDownObj.count(i);
}

function myFunction(){};
</script>

HTML

    <div id="countDown"></div>

4 个答案:

答案 0 :(得分:1)

试试这个,计时器在0

之后重启

http://jsfiddle.net/GdkAH/1/

完整代码:

window.onload = function() {
startCountDown(25, 1000, myFunction);
}

function startCountDown(i, p, f) {
    var pause = p;
    var fn = f;
    var countDownObj = document.getElementById("countDown");

    countDownObj.count = function(i) {
    //  write out count
    countDownObj.innerHTML = i;
    if (i == 0) {
    //  execute function
        fn();
        startCountDown(25, 1000, myFunction);
        //  stop
        return;
    }
    setTimeout(function() {
            //  repeat
            countDownObj.count(i - 1);
    }, pause);
}
//  set it going
countDownObj.count(i);
}

function myFunction(){};

​

答案 1 :(得分:1)

我没有看到你重置计数器。当你的计数器下降到0时,它执行该功能并返回。相反,你想要执行功能 - &gt;重置计数器 - &gt;返回

您只需在fn()下添加i = 25即可完成此操作:

function startCountDown(i, p, f) {
var pause = p;
var fn = f;
var countDownObj = document.getElementById("countDown");

countDownObj.count = function(i) {
//  write out count
countDownObj.innerHTML = i;
if (i == 0) {
//  execute function
fn();
i = 25;
//  stop
return;
}
setTimeout(function() {
//  repeat
countDownObj.count(i - 1);
},
pause  
);
}
//  set it going

答案 2 :(得分:1)

@Muthu中的

Kumaran代码在倒计时1后没有显示为零。你可以更新到:

if (i < 0) {
//  execute function
    fn();
    startCountDown(10, 1000, myFunction);
    //  stop
    return;
}

答案 3 :(得分:1)

对于连续运行的计时器使用setInterval的主要原因是调整间隔,使其尽可能接近系统时钟的增量,通常为1秒但可能更长。在这种情况下,似乎没有必要,所以只需使用setInterval。

下面是一个不向元素添加非标准属性的函数,可以使用window.onload中的函数表达式调用它,所以完全避免使用全局变量(不是说有很多点,但有些喜欢最小化它们。)

var runTimer = (function() {

  var element, count = 0;

  return function(i, p, f) {
    element = document.getElementById('countDown');

    setInterval(function() {
      element.innerHTML = i - (count % i);
      if (count && !(count % i)) {
        f();
      }
      count++;  
    }, p);
  }
}());

function foo() {
  console.log('foo');
}

window.onload = function() {
  runTimer(25, 1000, foo);
}