大家好我已经创建了一个jQuery倒计时,但我希望它能保持计数,即使我刷新页面,这里是源代码:
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();
}
我认为我需要创建一个cookie文件并从中获取数据,但由于我是初学者,我不知道该怎么做,所以请有人帮助我,非常感谢你。
答案 0 :(得分:1)
嘿每次刷新页面时重置时间/日期的原因是因为当前时间,即glob.now不是动态的,所以我为
创建了新的变量glob.startDate = sDate
glob.endDate = eDate
glob.now = nDate
即请注意,日期是从1970年开始的毫秒数(如果你没有得到这个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();
}
答案 1 :(得分:0)
如果你不喜欢cookies,你可以将它存储在localStorage中:
$(window).unload(function() {
if (typeof(Storage) !== "undefined") {
localStorage.lastTime = countdown.currentTime;
} else {
// sorry, no localStorage available.
}
});
然后,您可以使用
从本地存储中重新加载该值$(doucment).ready(function() {
if (typeof(Storage) !== "undefined") {
if(localStorage.lastTime!=="undefined") {
countdown.continueWith(localStorage.lastTime);
} else {
countdown.start();
}
} else {
// sorry, no localStorage available.
}
});
我无法理解你的代码,所以我不能走到最后一英里,并将我的方法与你的代码整合在一起。如果你想要你可以使用这个更容易抓住倒计时的例子:
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);
}