刷新后的JQuery倒计时 [英] JQuery countdown after refresh
本文介绍了刷新后的JQuery倒计时的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我创建了一个jQuery倒计时，但我想要它继续计数，即使我刷新页面，这里是源代码：
function JBCountDown（settings）{
var glob = settings;
function deg（deg）{
return（Math.PI / 180）* deg - （Math.PI / 180）* 90
}
$ b b 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）;
}，
小时：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）;
}，
分钟：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）;
}，
秒：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）;
/ *倒计时完成* /
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文件，并从中获取数据，但因为我是一个初学者，我不知道该怎么做，所以如果有人可以帮助我，非常感谢你。
$（window）.unload（function（）{
if（typeof（Storage）！undefined）{
localStorage.lastTime = countdown.currentTime;
} else {
//对不起，没有localStorage可用。
}
}）;
您可以使用
$（doucment）.ready（function（）{
if（typeof（Storage）！==undefined）{
if（localStorage.lastTime！==undefined）{
countdown.continueWith（localStorage.lastTime）;
} else {
countdown.start（）;
}
} else {
//对不起，没有localStorage可用。
}
}）;
我不能理解你的代码，所以我不能去最后一英里，集成我的方法，你的代码。如果你想要你可以使用这个更容易握持倒计时的例子：
function（）{
setInterval {
var now = new Date（）。getTime（），
event = new Date（March 01，2013 20:05:00）。getTime（）;
var toGo = （事件 - 现在）/ 1000;
if（toGo> 0）{
var days = Math.floor（toGo / 3600/24）;
var toGo = toGo - 24 * 3600）;
var hours = Math.floor（toGo / 3600）;
var toGo = toGo - （hours * 3600）;
var minutes = Math.floor ）;
var seconds = Math.floor（toGo - （minutes * 60））;
$（＃countdown-days）。html（days）;
$ -hurs）。html（hours）;
$（＃countdown-minutes）.html（minutes）;
$（＃countdown-seconds）。
} else {
$（＃countdown-days）。html（0）;
$（＃countdown-hours）。html（0）;
$（＃countdown-minutes）。html（0）;
$（＃countdown-seconds）。html（0）;
clearInterval（）;
}
}，1000）;
}
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.
解决方案
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);
}
这篇关于刷新后的JQuery倒计时的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
