How to add start and reset to countdown timer?

Question

I found code on the internet and I want to add start and reset button on it.I hope that someone can help me.

 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

I think she was asking how a button interacts with your script. Buttons can access methods from your script. So clicking on this button will call the start function in your script
Start

http://codepen.io/jdeyrup/pen/ObGPdB
Here is an example of how to do this with your timer.

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