How to pause/play JavaScript countdown clock

Question

I need to play & pause this countdown timer where I would be able to resume the clock at the specific time it was paused. Initial state is play.

Please note that the button is empty since I didn't import the font-awesome package, but it switches from play to pause.
Please use togglePause function to create that play/pause interval execution.

I'm stuck...

The Fiddle.

the clock HTML

<h1>Countdown Clock</h1>
<div id="clockdiv">
    <div>
        <span class="days"></span>
        <div class="smalltext">Days</div>
    </div>
    <div>
        <span class="hours">t</span>
        <div class="smalltext">Hours</div>
    </div>
    <div>
        <span class="minutes"></span>
        <div class="smalltext">Minutes</div>
    </div>
    <div>
        <span class="seconds"></span>
        <div class="smalltext">Seconds</div>
    </div>
</div>
<div class="container">
<div id="controls">
    <h2>Pause/Continue</h2>
    <button id="pause" onclick="togglePause(1);" class="pause"><span class="fa fa-pause"></span></button>

the clock JS:

function togglePause(toPause)
{
    if($('#pause > span').hasClass('fa-pause')) {
        $('#pause > span').addClass('fa-play').removeClass('fa-pause');
    }else{
        $('#pause > span').addClass('fa-pause').removeClass('fa-play');
    }

}
    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 {
            'total': t,
            'days': days,
            'hours': hours,
            'minutes': minutes,
            'seconds': seconds
        };
    }

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

        function updateClock() {
            var t = getTimeRemaining(endtime);

            daysSpan.innerHTML = t.days;
            hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
            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);
    }

    function setClock(hours, minutes) {

    }


    var days = 1;
    var hours = 1;
    var minutes = 0.25;
    var seconds = 1;

    var deadline = new Date(Date.parse(new Date()) + days*60*minutes*60*seconds*1000);
    initializeClock('clockdiv', deadline);

Instead of using deadline as a Date I think you should store (mili)seconds left till deadline. This way, when you stop timer, you don't need to recalculate. Then, make initialiseClock return timeinterval and store it in a var on init. This way you can stop (clearInterval()) outside of your initialiseClock() function. So, now you can use it inside your togglePause() functioon to stop it or to recreate it. — Mirko Vukušić
– Mirko Vukušić, Commented Jan 5, 2017 at 12:04
if i pause the counter and resumed after 2 min then from where counter should get started again? Should it start from the paused time or actual time left for the deadline? — vijayP
– vijayP, Commented Jan 5, 2017 at 12:06

Bharatsing Parmar · Accepted Answer · 2017-01-06 06:21:40Z

2

Try this working Play/Pause code: jsfiddle.net/bharatsing/1fdnho9k/7/

var timeinterval;
var t=0;

function togglePause(toPause)
{
    if($('#pause > span').hasClass('fa-pause')) {
        clearInterval(timeinterval);
        $('#pause > span').addClass('fa-play').removeClass('fa-pause');
    }else{
        var deadline=new Date(Date.parse(new Date()) + t);
        initializeClock('clockdiv', deadline);
        $('#pause > span').addClass('fa-pause').removeClass('fa-play');
    }      
}

function getTimeRemaining(endtime) {
    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 {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function getTimeRemainingNew(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 {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

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

    function updateClock() {
        var t = getTimeRemaining(endtime);

        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

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

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

function setClock(hours, minutes) {

}

$(document).ready(function(){
  var days = 1;
  var hours = 1;
  var minutes = 0.25;
  var seconds = 1;

  var deadline = new Date(Date.parse(new Date()) + days*60*minutes*60*seconds*1000);

  initializeClock('clockdiv', deadline);
});

edited Jan 6, 2017 at 6:21

answered Jan 5, 2017 at 12:38

Bharatsing Parmar

2,4551 gold badge11 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

DudeOfLayers Over a year ago

Hi, very nice but why remove the onclick="togglePause(1);?

Bharatsing Parmar Over a year ago

In fiddle it gives error that togglePause is not defined. So I have change it to $('#pause').click();

DudeOfLayers Over a year ago

Please keep as original and i'll set your answer as accepted, the if for the font-awesome icon isn't changing, and I have an ajax there (didn't include in code) that sends to my framework(laravel). thanks Bharasing.

Bharatsing Parmar Over a year ago

In your page it will working fine but in fiddle to make it work need to change this.

Bharatsing Parmar Over a year ago

I have updated answer as per your need. You can check it jsfiddle.net/bharatsing/1fdnho9k/7

|

Asad Sarwar · Accepted Answer · 2017-01-05 12:54:21Z

fiddle

make timeinterval variable global, clear time interval on click and add seconds to global endtime:

var myBool = false;
var globalEndTime;
var globalEndTimeTimer;
$('#pause').click(function()
{
        //alert('in');
    if($('#pause > span').hasClass('fa-pause')) {
        $('#pause > span').addClass('fa-play').removeClass('fa-pause');
    }else{
        $('#pause > span').addClass('fa-pause').removeClass('fa-play');
    }
    myBool = !myBool;
    //alert(myBool);
    if(myBool){
        clearInterval(timeinterval);
      globalEndTimeTimer = setInterval(updateGlobalEndTime, 1000);
    }else{
        clearInterval(globalEndTimeTimer);
        initializeClock('clockdiv', globalEndTime);
      //timeinterval = setInterval(updateClock, 1000);
    }


   });

Collectives™ on Stack Overflow

How to pause/play JavaScript countdown clock

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related