Question

我尝试创建一个包含多个计时器的网站。我使用了网站上的脚本。但在此脚本中无法重置一个计时器或两个计时器。我想从头开始再次启动timer1，所以我必须先重置计时器。如何重置timer / s以使用新值启动它？

最后，我想启动Timer1，之后启动Timer2，Timer1的剩余时间为Timer2的新时间。

function countdown(element, minutes, seconds) {
  // Fetch the display element
  var el = document.getElementById(element);

  // Set the timer
  var interval = setInterval(function() {
    if (seconds == 0) {
      if (minutes == 0) {
        (el.innerHTML = "STOP!");

        clearInterval(interval);
        return;
      } else {
        minutes--;
        seconds = 60;
      }
    }

    if (minutes > 0) {
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
    } else {
      var minute_text = '';
    }

    var second_text = seconds > 1 ? '' : '';
    el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
    seconds--;
  }, 1000);
}

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');

start1.onclick = function() {
  countdown('countdown1', 0, 15);
}

start2.onclick = function() {
  countdown('countdown2', 0, 10);
}

<html>

<head>
</head>

<body>
  <div id='countdown1'></div>
  <div id='countdown2'></div>
  <input id="timer1" type="button" value="Start timer 1" />
  <input id="timer2" type="button" value="Start timer 2" />
</body>

</html>

感谢您的帮助

Answer 1

您需要返回并存储对变量的引用，该变量包含间隔（interval），然后您可以在句柄上调用clearinterval：

完整代码段

function countdown(element, minutes, seconds) {
  // Fetch the display element
  var el = document.getElementById(element);

  // Set the timer
  var interval = setInterval(function() {
    if (seconds == 0) {
      if (minutes == 0) {
        (el.innerHTML = "STOP!");

        clearInterval(interval);
        return;
      } else {
        minutes--;
        seconds = 60;
      }
    }

    if (minutes > 0) {
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
    } else {
      var minute_text = '';
    }

    var second_text = seconds > 1 ? '' : '';
    el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
    seconds--;
  }, 1000);

  return interval;
}

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');
var resetBoth = document.getElementById('resetBoth');

var countdown1Interval;
var countdown2Interval;

start1.onclick = function() {
  countdown1Interval = countdown('countdown1', 0, 15);
}

start2.onclick = function() {
  countdown2Interval = countdown('countdown2', 0, 10);
}

resetBoth.onclick = function(){
    if (countdown1Interval){
         clearInterval(countdown1Interval);
         countdown1Interval = undefined;
    }
    if (countdown2Interval){
        clearInterval(countdown2Interval);
        countdown2Interval = undefined;
    }
}

<html>

<head>
</head>

<body>
  <div id='countdown1'></div>
  <div id='countdown2'></div>
  <input id="timer1" type="button" value="Start timer 1" />
  <input id="timer2" type="button" value="Start timer 2" />
  <input id="resetBoth" type="button" value="Stop both timers" />
</body>

</html>

Answer 2

您可以将区间作为属性绑定到元素本身。

  if ( el.interval )
  {
      clearInterval( el.interval );
  }
  // Set the timer
  var interval = el.interval = setInterval(function() {

<强>演示

＆＃13;

function countdown(element, minutes, seconds) {
  // Fetch the display element
  var el = document.getElementById(element);
  if ( el.interval )
  {
      clearInterval( el.interval );
  }
  // Set the timer
  var interval = el.interval = setInterval(function() {
    if (seconds == 0) {
      if (minutes == 0) {
        (el.innerHTML = "STOP!");

        clearInterval(interval);
        return;
      } else {
        minutes--;
        seconds = 60;
      }
    }

    if (minutes > 0) {
      var minute_text = minutes + (minutes > 1 ? ' minutes' : ' minute');
    } else {
      var minute_text = '';
    }

    var second_text = seconds > 1 ? '' : '';
    el.innerHTML = minute_text + ' ' + seconds + ' ' + second_text + '';
    seconds--;
  }, 1000);
}

//Start as many timers as you want

var start1 = document.getElementById('timer1');
var start2 = document.getElementById('timer2');

start1.onclick = function() {
  countdown('countdown1', 0, 15);
}

start2.onclick = function() {
  countdown('countdown2', 0, 10);
}

＆＃13;

<html>

<head>
</head>

<body>
  <div id='countdown1'></div>
  <div id='countdown2'></div>
  <input id="timer1" type="button" value="Start timer 1" />
  <input id="timer2" type="button" value="Start timer 2" />
</body>

</html>

＆＃13;

在JS中重置多个计时器

2 个答案:

完整代码段