问题
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();
}
来源：https://stackoverflow.com/questions/15390810/jquery-countdown-after-refresh