JavaScript counter that continue from where left

Question

I'm trying to create a countdown counter that should countdown for 24 hours, displaying the days, the hours, the minutes and the seconds. The question is that I want to make it somehow save the progress. For example, I put the countdown to start from now till tomorrow the same time (24 hours) and when a user comes in my site after 2 hours the counter should start from 22 hours for that user and if the user closes the site and then comes back after 2 hours the counter should start from 20 hours for that user. I hope it's clear enough. I found that if that is possible it could be done using cookies, but I'm not sure how it should be done... If anyone could help it will be great! :3 Here is my code so far: HTML:

<div id="clockdiv">
  <span class="days"></span>
  <span class="hours"></span>
  <span class="minutes"></span>
  <span class="seconds"></span>
</div>

JavaScript

// if there's a cookie with the name myClock, use that value as the deadline
    if(document.cookie && document.cookie.match('myClock')){
// get deadline value from cookie
    var deadline = document.cookie.match(/(^|;)myClock=([^;]+)/)[2];
    }

// otherwise, set a deadline 10 minutes from now and 
// save it in a cookie with that name
    else{
// create deadline 10 minutes from now
        var timeInMinutes = 1380;
        var currentTime = Date.parse(new Date());
        var deadline = new Date(currentTime + timeInMinutes*60*1000);

// store deadline in cookie for future reference
        document.cookie = 'myClock=' + deadline + '; path=/; domain=.optic2n.com';
    }

    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);
    }

    initializeClock('clockdiv', deadline);

Thank you in advance for the help! :3

Best regards, Tsvetko Krastev

Can you tell us whether you have any specific error (e.g. in the console) or whether you are able to read the deadline from the cookie (e.g. by doing a `console.log(deadline)`? — raphv, Jun 17 '16 at 09:31
Hi, thanks for the quick replay. Using console.log(deadline) I get the following result - Sat Jun 18 2016 12:33:30 GMT+0300 (FLE Daylight Time), undefined — tsvetko.krastev, Jun 17 '16 at 09:35

score 0 · Accepted Answer · answered Jun 17 '16 at 10:16

It is possible I have missed something, but your code seems very complex for something so simple. Here is what I came up with:

HTML:

<div id="clockdiv">
  <span id="d" class="days"></span>days
  <span id="h" class="hours"></span>hrs
  <span id="m" class="minutes"></span>mins
  <span id="s" class="seconds"></span>secs
</div>

Javascript:

var deadline = localStorage.getItem('dl') ? parseInt(localStorage.getItem('dl')) : (Date.now() + 86400000);
var delay = null;
// Good spot to do checks for 24hrs has passed already here

localStorage.setItem('dl',deadline);

function render() {
    if (delay) {
        clearTimeout(delay);
        delay = null;
    }
    var diff = (deadline - Date.now()) / 1000;
    document.getElementById('d').innerHTML = Math.floor(diff / 86400);
    document.getElementById('h').innerHTML = Math.floor(diff / 3600);
    document.getElementById('m').innerHTML = Math.floor((diff / 60) % 60);
    document.getElementById('s').innerHTML = Math.floor(diff % 60);
    delay = setTimeout(render,1000);
}
render();

NOTE: There are no checks for what to do after 24 hours.

Thank you very much!! This looks waaay more simple. Thank you very much! — tsvetko.krastev, Jun 17 '16 at 15:04

JavaScript counter that continue from where left

1 Answers1