js实现数字时钟

    看过别人的思路，自己也写了一个。原理就是准备10张图，图片名分别和图上的数字对应，时间的格式是xx:xx:xx，分别有六个位置的图片需要动态修改crs属性，每个位置上的数字是n（具体由当前时间决定），这个位置上的图片即为n.gif，就这样。

请先查看Demo

然后是结构：

View Code

1 < p >
2 当前时间为：
3 < span id ="clock" >
4 < img class ="num" src ="images/0.gif" />
5 < img class ="num" src ="images/0.gif" />
6 < img src ="images/colon.gif" />
7 < img class ="num" src ="images/0.gif" />
8 < img class ="num" src ="images/0.gif" />
9 < img src ="images/colon.gif" />
10 < img class ="num" src ="images/0.gif" />
11 < img class ="num" src ="images/0.gif" />
12 </ span >
13 </ p >

最后是js：

function Clock(id, className) {
	this.id = id;
	this.className = className;
	this.imgs = getByClass(this.className, $(this.id));
	Clock.clocks.push(this);
	for(var i=0; i<Clock.clocks.length; i++) {
		Clock.clocks[i].go();
	}
	var _this = this;
	setInterval(function() {
		_this.go();
	}, 1000);
}

Clock.clocks = [];
Clock.preZero = function(n) {//前导0
	return ('0'.repeat(1) + n).slice(-2);
}

Clock.prototype = {
	setTime: function(h, m, s) {
		this.setImg(Clock.preZero(h) + Clock.preZero(m) + Clock.preZero(s));//把时间推入一个字符串中
	},
	setImg: function(s) {
		for(var i=0; i<this.imgs.length; i++) {
			this.imgs[i].src = 'images/' + s[i] + '.gif';//每张图片的名字就是它所表示的时间part的数字
		};
	},
	go: function() {
		var date = new Date();
		this.setTime(date.getHours(), date.getMinutes(), date.getSeconds());
	}
}

window.onload = function() {
	var newClock1 = new Clock('clock', 'num');
}

这里默认的那些方法就不贴出来了，你知道的^_^!

转载于:https://www.cnblogs.com/chemdemo/archive/2011/03/10/1980324.html