JavaScript - Store countdown for when page reloads etc

Question

So here I have created a countdown timer of 10 minutes to initiate upon the press of the 'START' button. I want to store this countdown so that when the user goes of the page and comes back to it the countdown will still be going. Note that I do NOT want the countdown to stop and then continue where it left off upon page reload, I would like it to continue to it's specified deadline. Any suggestions?

<html>
<head>

</head>
<body>



    <a id="sendButton" class="button" onclick=" startClock();">START</a>

        <div id="sectionClock">

        <div id="clockdiv">
            <div>
                <span class="hours"></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>

    <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);
    return {
        'total': t,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}
var flag = 0;

function startClock() {


    /************ INITIALIZE CLOCK ************/
    function initializeClock(id, endtime) {

        // If countdown time is 0 then operate
        if(flag==0)
        {
            var clock = document.getElementById(id);
            var hoursSpan = clock.querySelector('.hours');
            var minutesSpan = clock.querySelector('.minutes');
            var secondsSpan = clock.querySelector('.seconds');

        flag=1; 
        }


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


            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);
                flag=0;
            }
        }

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

    var timeInMinutes = 10;
    var currentTime = Date.parse(new Date());
    var deadline = new Date(currentTime + timeInMinutes*60*1000);
    initializeClock('clockdiv', deadline);

    document.cookie = deadline

    var cookie = document.cookie;

    console.log(cookie);

}

function sendTrack(){
    (function() {

        var trackUrl = document.getElementById("url");    

    }());
}

    </script>

</body>
</html>

score 0 · Answer 1 · edited May 23 '17 at 12:07

0

You have the right idea of using a cookie but you need to make sure you're reading/writing it correctly. I would actually suggest using local storage instead.

var deadline = localStorage.deadline;
if (deadline) { // Make sure we've saved one before
    deadline = new Date(deadline);
} else { // Create a new one and save it
    deadline = new Date(Date.now() + timeInMinutes*60*1000);
    localStorage.deadline = deadline;
}

edited May 23 '17 at 12:07

Community

1
1

answered May 05 '16 at 19:49

Mike Cluck

31,869
13
80
91

will this work even though the clock is initialised upon a click function? – mellows May 05 '16 at 20:05
@mellows Sure. If you want it to load as soon as the page loads, just do the first part during your main code. Check to see if the deadline is in the local storage. If it is, start the countdown. Otherwise, just wait for the click. – Mike Cluck May 05 '16 at 21:30
I am fairly new to coding, don't suppose you have a working example? I can't figure out where to put the code. Appreciate the help! – mellows May 05 '16 at 21:37

JavaScript - Store countdown for when page reloads etc

1 Answers1