javascript - 如何为倒计时器添加开始和重置？

Question

我在互联网上找到了代码，我想在上面添加启动和重置按钮。我希望有人可以帮助我。

function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 25);
  return {
    'total': t,
    'minutes': minutes,
    'seconds': seconds
  };
}

function initializeClock(id, endtime) {
  var clock = document.getElementById(id);
  var minutesSpan = clock.querySelector('.minutes');
  var secondsSpan = clock.querySelector('.seconds');

  function updateClock() {
    var t = getTimeRemaining(endtime);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  var timeinterval = setInterval(updateClock, 1000);
}

var deadline = new Date(Date.parse(new Date()) + 15 * 24 * 60 * 60 * 1000);
initializeClock('clockdiv', deadline);

<div id="clockdiv">
  <div>
    <span class="minutes"></span>
    <div class="smalltext">Minutes</div>
  </div>
  <div>
    <span class="seconds"></span>
    <div class="smalltext">Seconds</div>
  </div>
</div>

Answer 1

我认为她是在问按钮如何与您的脚本交互。按钮可以访问脚本中的方法。因此，单击此按钮将调用脚本中的启动函数
开始

http://codepen.io/jdeyrup/pen/ObGPdB
以下是如何使用计时器执行此操作的示例。

<div id="clockdiv">
    <div id="days">Days</div>
    <div id="hours">Hours</div>
    <div id="minutes">Minutes</div>
    <div id="seconds">Seconds</div>
</div>
<button type="button" onclick="start()">Start</button>
<button type="button" onclick="stop()">Stop</button>
<script>
function getTimeRemaining(endtime) {
  var t = Date.parse(endtime) - Date.parse(new Date());
  var seconds = Math.floor((t / 1000) % 60);
  var minutes = Math.floor((t / 1000 / 60) % 60);
  var hours = Math.floor((t / 1000 / 60 / 60) % 24 );
  var days = Math.floor(t / 1000 / 60 / 60 / 24);
  return { days, hours, minutes, seconds, totalTime: t };
}

function updateClock(endtime) {
  var seconds = document.getElementById('seconds');
  var minutes = document.getElementById("minutes");
  var hours = document.getElementById("hours");
  var days = document.getElementById('days');
  var t = getTimeRemaining(endtime);
  if(t.totalTime <= 0) stop();
  seconds.innerHTML = ('0' + t.seconds).slice(-2) + ' Seconds';
  minutes.innerHTML = ('0' + t.minutes).slice(-2) + ' Minutes ';
  hours.innerHTML = ('0' + t.hours).slice(-2) + ' Hours';
  days.innerHTML = ('0' + t.days).slice(-2) + ' Days';
}

function start() {
  var deadline = new Date(Date.parse(new Date()) + 15 * 1000);
  updateClock(deadline);
  clockTimer = setInterval(function() {
    updateClock(deadline);
  }, 1000);
}

function stop() {
  clearInterval(clockTimer);
}

var clockTimer;
</script>