由于脚本的当前时间由服务器提供,所以即使用户修改了自己机器的本地时间,在网页上显示的倒计时时间仍然是正确的。在服务端需要输出一个当前时间戳变量,类似于
var timestamp = 12049781335468750;
倒计时代码和大部分人写的代码都差不多,这里主要是一个start函数。
start:function(timeFix){
var _fix = timeFix == null ? 0 : timeFix, _ = this;
this.correctTime = this.timeDiff - _fix;
if(this.correctTime <= 0){
this.show(0,0,0,0); return;
}
//parseInt not Math.floor
var _day = parseInt(this.correctTime/(1000*60*60*24));
var _hour = parseInt((this.correctTime/(1000*60*60))%24);
var _minute = parseInt((this.correctTime/(1000*60))%60);
var _second = parseInt((this.correctTime/1000)%60);
this.show(_day,_hour,_minute,_second);
this.timeDiff -= 1000;
clearTimeout(this.timeoutId);
//第二次以后timeFix为0
this.timeoutId = setTimeout(function(){_.start.apply(_);},1000);
}
第一次执行时,需要传递一个时间差(timeFix)给start函数。这个时间差为浏览器解析HTML页面到该脚本开始位置的时间与倒计时代码开始执行的时间之差,示意如下。
<script>
//脚本开始位置
var beginTime = new Date();
</script>
<script src="http://adman.ifeng.com/time/time.aspx?type=js"></script>
<..网页代码部分..>
<script>
//倒计时开始执行位置
js.start(new Date().getTime()-beginTime.getTime());
</script>
脚本使用的时候只用修改show函数即可,这里我做了一个使用数字点阵显示的奥运倒计时。
function DigitDisplay(){
this.holder = "digit";
this.tdList = null;
this.bitArray = {
'0':'111101101101111',
'1':'001001001001001',
'2':'111001111100111',
'3':'111001111001111',
'4':'101101111001001',
'5':'111100111001111',
'6':'111100111101111',
'7':'111001001001001',
'8':'111101111101111',
'9':'111101111001111',
'dot':'000010000010000'
}
}
DigitDisplay.prototype = {
clear:function(){
for(var i = 0 ; i < this.tdList.length; i++)
this.tdList[i].className = "blank";
},
preInit:function(){
this.tdList = $(this.holder).getElementsByTagName('TD');
this.clear();
},
init:function(digit){
this.preInit();
var _arr = this.bitArray[digit];
for(var i = 0 ; i < this.tdList.length; i++){
if(_arr.charAt(i) == '1') this.tdList[i].className = "filled";
}
}
}
//倒计时的show函数,可随意定制需要的功能
CountDown.prototype.show = function(day,hour,minute,second){
var _timeStr = this.digitFix(day,3)+':'+this.digitFix(hour,2)+':'
+this.digitFix(minute,2)+':'+this.digitFix(second,2);
for(var i = 0, _o = null; i < this.tableList.length; i++){
_o = new DigitDisplay();
_o.holder = this.tableList[i];
if(isNaN(parseInt(_timeStr.charAt(i))))
_o.init('dot');
else
_o.init(_timeStr.charAt(i));
}
}