我访问我的网站它开始时间倒计时但问题是当我重新加载该页时间倒计时已被重置。问题是什么以及如何解决。
直播演示链接 - http://bdtunes4u.com/un/full/
01指数
<!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();
}