我有一个倒数计时器，除了倒计时从重新加载页面时从头开始。
这是我的HTML。
<!DOCTYPE html>
<html>
<head>
<title>DrugStore.pk | Under Construction</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--css-->
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" href="css/jquery.countdown.css" />
<!--/css-->
<!--js-->
<script src="js/jquery.min.js"></script>
<script src="js/jquery.countdown.js"></script>
<script src="js/script.js"></script>
<!--js-->
<!-- webfonts -->
<link href='http://fonts.googleapis.com/css? family=Open+Sans:400,300,700,800' rel='stylesheet' type='text/css'>
<!-- webfonts -->
</head>
<body>
<div class="banner">
<div class="wrap">
<div class="banner-text">
<h1>Drug Store</h1>
<h2>Something awesome is coming your way !<br/>Our website is under construction but we are in the final stage of the development program</h2>
</div>
<div class="timer_wrap">
<div id="counter"> </div>
</div>
</div>
</div>
<div class="clear"> </div>
</div>
<div class="banner-text-info">
<p>Stay in Touch to get the latest updates:</p>
<div class="copy-rights">
</div>
</body>
</html>
在script.js我有：
/* ---- Countdown timer ---- */
$('#counter').countdown({
timestamp : (new Date()).getTime() + 34*24*60*60*1000
});
/* ---- Animations ---- */
$('#links a').hover(
function(){ $(this).animate({ left: 3 }, 'fast'); },
function(){ $(this).animate({ left: 0 }, 'fast'); }
);
$('footer a').hover(
function(){ $(this).animate({ top: 3 }, 'fast'); },
function(){ $(this).animate({ top: 0 }, 'fast'); }
);
这是jquerycountdown.js：
(function($){
// Number of seconds in every time division
var days = 24*60*60,
hours = 60*60,
minutes = 60;
// Creating the plugin
$.fn.countdown = function(prop){
var options = $.extend({
callback : function(){},
timestamp : 0
},prop);
var left, d, h, m, s, positions;
// Initialize the plugin
init(this, options);
positions = this.find('.position');
(function tick(){
// Time left
left = Math.floor((options.timestamp - (new Date())) / 1000);
if(left < 0){
left = 0;
}
// Number of days left
d = Math.floor(left / days);
updateDuo(0, 1, d);
left -= d*days;
// Number of hours left
h = Math.floor(left / hours);
updateDuo(2, 3, h);
left -= h*hours;
// Number of minutes left
m = Math.floor(left / minutes);
updateDuo(4, 5, m);
left -= m*minutes;
// Number of seconds left
s = left;
updateDuo(6, 7, s);
// Calling an optional user supplied callback
options.callback(d, h, m, s);
// Scheduling another call of this function in 1s
setTimeout(tick, 1000);
})();
// This function updates two digit positions at once
function updateDuo(minor,major,value){
switchDigit(positions.eq(minor),Math.floor(value/10)%10);
switchDigit(positions.eq(major),value%10);
}
return this;
};
function init(elem, options){
elem.addClass('countdownHolder');
// Creating the markup inside the container
$.each(['Days','Hours','Minutes','Seconds'],function(i){
var boxName;
if(this=="Days") {
boxName = "DAYS";
}
else if(this=="Hours") {
boxName = "Hours";
}
else if(this=="Minutes") {
boxName = "Minutes";
}
else {
boxName = "Seconds";
}
$('<div class="count'+this+'">' +
'<span class="position">' +
'<span class="digit static">0</span>' +
'</span>' +
'<span class="position">' +
'<span class="digit static">0</span>' +
'</span>' +
'<span class="boxName">' +
'<span class="'+this+'">' + boxName + '</span>' +
'</span>'
).appendTo(elem);
if(this!="Seconds"){
elem.append('<span class="points">:</span><span class="countDiv countDiv'+i+'"></span>');
}
});
}
// Creates an animated transition between the two numbers
function switchDigit(position,number){
var digit = position.find('.digit')
if(digit.is(':animated')){
return false;
}
if(position.data('digit') == number){
// We are already showing this number
return false;
}
position.data('digit', number);
var replacement = $('<span>',{
'class':'digit',
css:{
top:0,
opacity:0
},
html:number
});
// The .static class is added when the animation
// completes. This makes it run smoother.
digit
.before(replacement)
.removeClass('static')
.animate({top:0,opacity:0},'fast',function(){
digit.remove();
})
replacement
.delay(100)
.animate({top:0,opacity:1},'fast',function(){
replacement.addClass('static');
});
}
})(jQuery);
答案 0 :(得分：6)
当用户加载页面时，您当前的代码会开始34天的倒计时。通过将初始时间戳存储在浏览器的本地存储中，您可以使计时器通过同一客户端的多个会话 - 即，即同一浏览器。
在文件script.js中，在评论/* ---- Countdown timer ---- */下，替换以下行：
$('#counter').countdown({
timestamp : (new Date()).getTime() + 34*24*60*60*1000
});
这些行：
var countdownTarget = localStorage.getItem('countdownTarget'); // Read from storage.
if (countdownTarget === null) { // Not stored?
countdownTarget = (new Date()).getTime() + 34*24*60*60*1000; // Make a new one.
localStorage.setItem('countdownTarget', countdownTarget); // Store it.
}
$('#counter').countdown({
timestamp : countdownTarget
});
此代码使用localStorage，它在浏览器会话中保持不变。如果您希望在用户退出浏览器时忘记时间戳，请改用sessionStorage。
如果您的目标是让所有客户都显示一个倒计时到固定时间点的计时器，则必须在客户端中计算该固定点。您可以使用Date.UTC()在JavaScript中执行此操作，这样您就可以在Coordinated Universal Time (UTC)中指定日期。 UTC大致相当于格林威治标准时间。
例如，如果你倒计时到2015年10月25日7:00 UTC，你可以写下以下内容：
var countdownTarget = Date.UTC(2015, 9, 25, 7);
请注意，month参数是0到11之间的整数，包括0和11。因此，十月，即第十个月，表示为9.然而，日期参数从1开始，因此第25天表示为25。
要在script.js中实现此功能，请将/* ---- Countdown timer ---- */下的行替换为：
$('#counter').countdown({
timestamp : Date.UTC(2015, 9, 25, 7)
});