倒计时代码

2008年03月08日 | 2,885 次浏览 | 标签:   

由于脚本的当前时间由服务器提供,所以即使用户修改了自己机器的本地时间,在网页上显示的倒计时时间仍然是正确的。在服务端需要输出一个当前时间戳变量,类似于

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页面到该脚本开始位置的时间与倒计时代码开始执行的时间之差,示意如下。



<..网页代码部分..>

脚本使用的时候只用修改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));
	}
}

演示地址:http://panweizeng.com/others/countdown.html

相关文章

Trackbacks(1)

  • 2008/03/08 - 潘魏增|学海无涯 » 文章归档 » 在页面中使用点阵显示汉字

    [...] 上篇文章提到用数字点阵显示奥运倒计时,这里扩展一下,不仅可以用点阵显示数字,还可以用点阵显示汉字。先看演示效果。 Javascript脚本部分还是使用原来DigitDisplay对象,只是在bitArray新增了两个成员。 var kaka = new DigitDisplay(); [...]

发表评论

最受欢迎

评论最多