JQuery countdown after refresh

问题:

Hi guys I've created a jQuery countdown but I want it to stay counting even if I refresh the page, here it is the source code:

function JBCountDown(settings) {
var glob = settings;

function deg(deg) {
    return (Math.PI/180)*deg - (Math.PI/180)*90
}

glob.total   = Math.floor((glob.endDate - glob.startDate)/86400);
glob.days    = Math.floor((glob.endDate - glob.now ) / 5000);
glob.hours   = 24 - Math.floor(((glob.endDate - glob.now) % 86400) / 3600);
glob.minutes = 60 - Math.floor((((glob.endDate - glob.now) % 86400) % 3600) / 60) ;

if (glob.now >= glob.endDate) {
    return;
}

var clock = {
    set: {
        days: function(){
            var cdays = $("#canvas_days").get(0);
            var ctx = cdays.getContext("2d");
            ctx.clearRect(0, 0, cdays.width, cdays.height);
            ctx.beginPath();
            ctx.strokeStyle = glob.daysColor;

            ctx.shadowBlur    = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowColor = glob.daysGlow;

            ctx.arc(94,94,85, deg(0), deg((360/glob.total)*(glob.total - glob.days)));
            ctx.lineWidth = 17;
            ctx.stroke();
            $(".clock_days .val").text(glob.days);
        },

        hours: function(){
            var cHr = $("#canvas_hours").get(0);
            var ctx = cHr.getContext("2d");
            ctx.clearRect(0, 0, cHr.width, cHr.height);
            ctx.beginPath();
            ctx.strokeStyle = glob.hoursColor;

            ctx.shadowBlur    = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowColor = glob.hoursGlow;

            ctx.arc(94,94,85, deg(0), deg(15*glob.hours));
            ctx.lineWidth = 17;
            ctx.stroke();
            $(".clock_hours .val").text(24 - glob.hours);
        },

        minutes : function(){
            var cMin = $("#canvas_minutes").get(0);
            var ctx = cMin.getContext("2d");
            ctx.clearRect(0, 0, cMin.width, cMin.height);
            ctx.beginPath();
            ctx.strokeStyle = glob.minutesColor;

            ctx.shadowBlur    = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowColor = glob.minutesGlow;

            ctx.arc(94,94,85, deg(0), deg(6*glob.minutes));
            ctx.lineWidth = 17;
            ctx.stroke();
            $(".clock_minutes .val").text(60 - glob.minutes);
        },
        seconds: function(){
            var cSec = $("#canvas_seconds").get(0);
            var ctx = cSec.getContext("2d");
            ctx.clearRect(0, 0, cSec.width, cSec.height);
            ctx.beginPath();
            ctx.strokeStyle = glob.secondsColor;

            ctx.shadowBlur    = 10;
            ctx.shadowOffsetX = 0;
            ctx.shadowOffsetY = 0;
            ctx.shadowColor = glob.secondsGlow;

            ctx.arc(94,94,85, deg(0), deg(6*glob.seconds));
            ctx.lineWidth = 17;
            ctx.stroke();

            $(".clock_seconds .val").text(60 - glob.seconds);
        }
    },

    start: function(){
        /* Seconds */
        var cdown = setInterval(function(){
            if ( glob.seconds > 59 ) {
                if (60 - glob.minutes == 0 && 24 - glob.hours == 0 && glob.days == 0) {
                    clearInterval(cdown);

                    /* Countdown is complete */

                    return;
                }
                glob.seconds = 1;
                if (glob.minutes > 59) {
                    glob.minutes = 1;
                    clock.set.minutes();
                    if (glob.hours > 23) {
                        glob.hours = 1;
                        if (glob.days > 0) {
                            glob.days--;
                            clock.set.days();
                        }
                    } else {
                        glob.hours++;
                    }
                    clock.set.hours();
                } else {
                    glob.minutes++;
                }
                clock.set.minutes();
            } else {
                glob.seconds++;
            }
            clock.set.seconds();
        },1000);
    }
}
clock.set.seconds();
clock.set.minutes();
clock.set.hours();
clock.set.days();
clock.start();

}

I think that I need to create a cookie file and take the data from it, but as I'm a beginner I don't know how to do it, so please if someone could help me, thank you a lot.

回答1:

you could store it in the localStorage if you don't like cookies:

$(window).unload(function() {
     if (typeof(Storage) !== "undefined") {
             localStorage.lastTime = countdown.currentTime;
     } else {
             // sorry, no localStorage available.
     }
});

you can then load the value back again with from the local storage with

$(doucment).ready(function() {
     if (typeof(Storage) !== "undefined") {
           if(localStorage.lastTime!=="undefined") {
                countdown.continueWith(localStorage.lastTime);
           } else {
                countdown.start();
           }
     } else {
            // sorry, no localStorage available.
     }
});

i cannot understand your code, so i cannot go the last mile and integrate my approach for your question with your code. if you want you can use this easier to grip countdown example:

function () {
                setInterval(function() {
                    var now = new Date().getTime(),
                        event = new Date("March 01, 2013 20:05:00").getTime();
                    var toGo = (event - now) / 1000;
                    if (toGo > 0) {
                        var days = Math.floor(toGo/3600/24);
                        var toGo = toGo - (days*24*3600);
                        var hours = Math.floor(toGo/3600);
                        var toGo = toGo - (hours*3600);
                        var minutes = Math.floor(toGo/60);
                        var seconds = Math.floor(toGo - (minutes*60));
                        $("#countdown-days").html(days);
                        $("#countdown-hours").html(hours);
                        $("#countdown-minutes").html(minutes);
                        $("#countdown-seconds").html(seconds);
                    } else {
                        $("#countdown-days").html(0);
                        $("#countdown-hours").html(0);
                        $("#countdown-minutes").html(0);
                        $("#countdown-seconds").html(0);
                        clearInterval();
                    }
                }, 1000);
            }

回答2:

Hey the reason the time/date is resetting every time you refresh the page is because the current time i.e glob.now is not dynamic so i created new variables for

glob.startDate = sDate
glob.endDate = eDate
glob.now = nDate

i.e Also note that the date is in milliseconds from 1970 (check this out if you dont get this http://www.w3schools.com/jsref/jsref_gettime.asp)

        function JBCountDown(settings) {
        var glob = settings;
       // var glob.startDate = 18316800;
       //  var glob.endDate = 26179200;
        var nDate = (new Date().getTime())/1000;
        var eDate = ((new Date(2013, 9, 31, 09, 0, 0, 0)).getTime())/1000; 
        var sDate = ((new Date(2013, 7, 1, 09, 0, 0, 0)).getTime())/1000; 
        function deg(deg) {
            return (Math.PI/180)*deg - (Math.PI/180)*90
        }


        glob.total   = Math.floor((eDate - sDate)/86400);
        glob.days    = Math.floor((eDate - nDate ) / 86400);
        glob.hours   = 24 - Math.floor(((eDate - nDate) % 86400) / 3600);
        glob.minutes = 60 - Math.floor((((eDate - nDate) % 86400) % 3600) / 60) ;

        alert (eDate - sDate);
        if (nDate >= eDate) {
            return;
        }

        var clock = {
            set: {
                days: function(){
                    var cdays = $("#canvas_days").get(0);
                    var ctx = cdays.getContext("2d");
                    ctx.clearRect(0, 0, cdays.width, cdays.height);
                    ctx.beginPath();
                    ctx.strokeStyle = glob.daysColor;

                    ctx.shadowBlur    = 10;
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 0;
                    ctx.shadowColor = glob.daysGlow;

                    ctx.arc(94,94,85, deg(0), deg((360/glob.total)*(glob.total - glob.days)));
                    ctx.lineWidth = 17;
                    ctx.stroke();
                    $(".clock_days .val").text(glob.days);
                },

                hours: function(){
                    var cHr = $("#canvas_hours").get(0);
                    var ctx = cHr.getContext("2d");
                    ctx.clearRect(0, 0, cHr.width, cHr.height);
                    ctx.beginPath();
                    ctx.strokeStyle = glob.hoursColor;

                    ctx.shadowBlur    = 10;
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 0;
                    ctx.shadowColor = glob.hoursGlow;

                    ctx.arc(94,94,85, deg(0), deg(15*glob.hours));
                    ctx.lineWidth = 17;
                    ctx.stroke();
                    $(".clock_hours .val").text(24 - glob.hours);
                },

                minutes : function(){
                    var cMin = $("#canvas_minutes").get(0);
                    var ctx = cMin.getContext("2d");
                    ctx.clearRect(0, 0, cMin.width, cMin.height);
                    ctx.beginPath();
                    ctx.strokeStyle = glob.minutesColor;

                    ctx.shadowBlur    = 10;
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 0;
                    ctx.shadowColor = glob.minutesGlow;

                    ctx.arc(94,94,85, deg(0), deg(6*glob.minutes));
                    ctx.lineWidth = 17;
                    ctx.stroke();
                    $(".clock_minutes .val").text(60 - glob.minutes);
                },
                seconds: function(){
                    var cSec = $("#canvas_seconds").get(0);
                    var ctx = cSec.getContext("2d");
                    ctx.clearRect(0, 0, cSec.width, cSec.height);
                    ctx.beginPath();
                    ctx.strokeStyle = glob.secondsColor;

                    ctx.shadowBlur    = 10;
                    ctx.shadowOffsetX = 0;
                    ctx.shadowOffsetY = 0;
                    ctx.shadowColor = glob.secondsGlow;

                    ctx.arc(94,94,85, deg(0), deg(6*glob.seconds));
                    ctx.lineWidth = 17;
                    ctx.stroke();

                    $(".clock_seconds .val").text(60 - glob.seconds);
                }
            },

            start: function(){
                /* Seconds */
                var cdown = setInterval(function(){
                    if ( glob.seconds > 59 ) {
                        if (60 - glob.minutes == 0 && 24 - glob.hours == 0 && glob.days == 0) {
                            clearInterval(cdown);

                            /* Countdown is complete */

                            return;
                        }
                        glob.seconds = 1;
                        if (glob.minutes > 59) {
                            glob.minutes = 1;
                            clock.set.minutes();
                            if (glob.hours > 23) {
                                glob.hours = 1;
                                if (glob.days > 0) {
                                    glob.days--;
                                    clock.set.days();
                                }
                            } else {
                                glob.hours++;
                            }
                            clock.set.hours();
                        } else {
                            glob.minutes++;
                        }
                        clock.set.minutes();
                    } else {
                        glob.seconds++;
                    }
                    clock.set.seconds();
                },1000);
            }
        }
        clock.set.seconds();
        clock.set.minutes();
        clock.set.hours();
        clock.set.days();
        clock.start();
    }