Set Pause option to Javascript Countdown Timer script

Question

I'am creating a countdown timer.So this is the my code so far.

function countdownTimeStart() {

var el = document.getElementById('demo');
var cancel = document.getElementById('cancel');

/* Start count the time in timer panel */
var time = document.getElementById("picker-dates").value;
time = time.split(':');

var x = setInterval(function () {

    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    console.log(time);

    // create a function to handle the cancel
    function cancelCountdown(){
        el.innerHTML = "00:00:00";
        clearInterval(x);
    }
    // attach listener to cancel if cancel button is clicked
    cancel.addEventListener( 'click', cancelCountdown);

    // if seconds are negative, set them to 59 and reduce minutes
    if (time[2] == -1) {
        time[1]--;
        time[2] = 59
    }

    // if minutes are negative, set them to 59 and reduce hours
    if (time[1] == -1) {
        time[0]--;
        time[1] = 59
    }

    // Output the result in an element with id="demo"
    if( seconds == 0 && minutes == 0 && hours == 0 ){
        clearInterval(x);
        el.innerHTML = "00:00:00";
    } else if (seconds < 10) {
        el.innerHTML = hours + ": " + minutes + ": " + "0" + seconds + " ";
    } else {
        el.innerHTML = hours + ": " + minutes + ": " + seconds + " ";
    }

}, 1000);}

So I want to create a pause button for this. I refered similar questions such as Javascript - Pausing setInterval().

It seems that it is easy to create pause option in jquery. But I haven't idea how can I apply this to my script. Can someone help me.

Save time when interval started, cancel interval upon button click, calculate time interval should have, start new interval upon till calculated time ends — Drag13, May 01 '18 at 07:55
The only significance of jQuery in the answer you linked to is in adding event handlers to a couple of buttons that set a `pause` flag to be true or false -- nothing that's really special to the idea of pausing a timer. As long as you know how to add event handlers without jQuery, the answer is there. — kshetline, May 01 '18 at 08:02

score 1 · Answer 1 · answered May 01 '18 at 08:03

1

On pause click, you could create an object like savedTime that saves the current value of the time array. Then, when start is clicked, you could check to see if there is anything in savedTime. If so, then assign hours, minutes, and seconds to the value of that object; otherwise, set their values to the default ones from the input. For example, something like:

var el = document.getElementById('demo');
var cancel = document.getElementById('cancel');
var savedTime;
function countdownTimeStart() {
  /* Start count the time in timer panel */
  var timeValue = document.getElementById("picker-dates").value;
  var time;
  if (savedTime) {
    time = savedTime;
    savedTime = null;
  } else time = timeValue.split(':');

  var x = setInterval(function () {
    // set hours, minutes and seconds, decrease seconds
    var hours = time[0];
    var minutes = time[1];
    var seconds = time[2]--;

    // rest of countdownTimeStart is as normal
    // ...
  });

  // Attach this function to your pause button:
  function pauseTimer() {
    savedTime = time;
    clearInterval(x);
  }
}

answered May 01 '18 at 08:03

CertainPerformance

356,069
52
309
320

Not working for me, shouldn't I add " var pause= document.getElementById('pause'); ? – Chathuri Fernando May 01 '18 at 08:35
As the comment says, you need to `Attach this function to your pause button:` - you didn't post your HTML so I left that to you. – CertainPerformance May 01 '18 at 08:36
Pause is the my pause button and is it possible to add only " var pause= document.getElementById('pause');" additionally from your code, – Chathuri Fernando May 01 '18 at 08:39
You also need to attach the click handler to the button - just declaring the element won't do anything. – CertainPerformance May 01 '18 at 08:47
It works fine. Can I resume it when click the pause button again? – Chathuri Fernando May 01 '18 at 09:56
It's currently set up to resume when `countdownTimeStart` is called. If you want clicking on the pause button to resume it, then you'll have to change `pauseTimer` to check to see if `savedTime` is populated. If it is populated, then resume (that is, call `countdownTimeStart`); otherwise, assign to `savedTime` and clear the interval. – CertainPerformance May 01 '18 at 10:01

Set Pause option to Javascript Countdown Timer script

1 Answers1