简易小时钟

结构

<div id="clock">
	<span></span>点<span></span>分<span></span>秒
</div>

 

CSS

body,div{margin:0;padding:0;}
		body{color:#fff;font:16px/1.5 \5fae\8f6f\96c5\9ed1;}
		#clock{width:300px;text-align:center;background:#1a1a1a;margin:10px auto;padding:20px 0;}
		span{color:#000;width:80px;line-height:2;background:#fbfbfb;border:2px solid #b4b4b4;margin:0 10px;padding:0 10px;}

 

JS

var clock = document.getElementById('clock'),
		spanS = clock.getElementsByTagName('span');
	//获取当前的时间 / 时 / 分 / 秒
	function getTime() {
		var date = new Date(),
			dian = date.getHours(),
			fen = date.getMinutes(),
			miao = date.getSeconds();
		//将时间存入一个数组洪
		var timeArr = [dian,fen,miao];
		//循环数组
		for(var x in timeArr){
			//将数组的每个值赋给span内容
			spanS[x].innerHTML = autofn(timeArr[x]);
		}
		//将只有以为的数字前面加0
		function autofn(x) {
			return x.toString().replace(/^(\d)$/, '0$1');
		}
	}
	getTime(); //开始先执行一次
	setInterval(getTime, 1000);  //定时器每秒执行一次