我访问我的网站，它开始时间倒计时，但问题是，当我重新加载页面时间倒计时已重置。问题是什么?如何解决?
实时演示链接——http://bdtunes4u.com/un/full/
01-Index
<!doctype html>
<html>
<head>
<title>Coming SooN - A Premium Template</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link type="text/css" rel="stylesheet" href="css/custom.css" media="screen" />
<link type="text/css" rel="stylesheet" href="css/responsive.css" media="screen" />
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google font -->
<link href='http://fonts.googleapis.com/css?family=Fjalla+One|Archivo+Narrow|Oswald:400,700' rel='stylesheet' type='text/css'>
<!-- Import JavaScript -->
<script type="text/javascript" src="js/subscribe.js"></script>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/clock.js"></script>
<script type="text/javascript" src="http://www.convert-unix-time.com/scripts.js"></script>
<script type="text/javascript">
$(document).ready(function(){
JBCountDown({
secondsColor : "#B9C2C3",
secondsGlow : "none",
minutesColor : "#FDC800",
minutesGlow : "none",
hoursColor : "#44A5A8",
hoursGlow : "none",
daysColor : "#5CA1BF",
daysGlow : "none",
startDate : "1369396800",
endDate : "1369483200",
now : "1369446865 "
});
});
</script>
</head>
<body>
<div class="over_bg">
<div class="clearfix"></div>
<div class="wrapper">
<div class="top">
<h2>THIS WEBSITE IS UNDER CONSTRUCTION!</h2>
<h4>WE WILL GET BACK TO...</h4>
</div>
<div class="clock">
<div class="clock_days">
<canvas id="canvas_days" height="190px" width="190px" id="canvas_days"></canvas>
<div class="text" style=" background:url(img/4.png) no-repeat;">
<p class="val">0</p>
<p class="type_days">Days</p>
</div>
</div>
<div class="clock_hours">
<canvas height="190px" width="190px" id="canvas_hours"></canvas>
<div class="text" style=" background:url(img/3.png) no-repeat;">
<p class="val">0</p>
<p class="type_hours">Hours</p>
</div>
</div>
<div class="clock_minutes">
<canvas height="190px" width="190px" id="canvas_minutes"></canvas>
<div class="text" style=" background:url(img/2.png) no-repeat;">
<p class="val">0</p>
<p class="type_minutes">Minutes</p>
</div>
</div>
<div class="clock_seconds">
<canvas height="190px" width="190px" id="canvas_seconds"></canvas>
<div class="text" style=" background:url(img/1.png) no-repeat;">
<p class="val">0</p>
<p class="type_seconds">Seconds</p>
</div>
</div>
</div><!-- clock -->
<div class="sign-up">
<h3>Please subscribe to get notified, When we launch!</h3>
<div id="notification">
<div id="notificationForm">
<form id="notify" name="notify" action="#">
<input class="email " type="text" name="email" id="email" value="Enter Your Email Address" onfocus="clearText(this)" onblur="clearText(this)">
<span class="ajaxLoadImg" style="display: none;"><img src="images/loadingBar.gif" alt="loadingBar"></span>
<!-- Uncomment to use normal png button image -->
<div class="clearfix"></div>
<button class="notificationFormSubmit btn btn-info btn-block " value="" name="Submit">Submit</button>
</form>
</div>
<!-- The div where the user will see the error/success message when submitting the form. -->
<div id="formMessage">
<div class="userMessage" style="display: none;"></div>
</div>
</div>
</div><!-- Sign Up -->
</div><!-- Wrapper -->
</div>
</body>
</html>
02——
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 ) / 86400);
glob.hours = 24 - Math.floor(((glob.endDate - glob.now) % 86400) / 3600);
glob.minutes = 60 - Math.floor((((glob.endDate - glob.now) % 86400) % 3600) / 60) ;
glob.seconds = 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(95,95,80, deg(0), deg((360/glob.total)*(glob.total - glob.days)));
ctx.lineWidth = 12;
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(95,95,80, deg(0), deg(15*glob.hours));
ctx.lineWidth = 12;
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(95,95,80, deg(0), deg(6*glob.minutes));
ctx.lineWidth = 12;
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(95,95,80, deg(0), deg(6*glob.seconds));
ctx.lineWidth = 12;
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();
}
我想这个URL会对你有帮助。看看这个
http://www.keith-wood.name/countdown.html