利用js制作数码时钟的效果

刚开始学习js不久，对于js的应用还不是那么的得心应手，所以对于学习中遇到的问题及时记下是很有必要的！
今天用js做了一个数码时钟的特效，中间遇到了一些问题，还好经过自己的不断修改数码时钟终于可以运行了。想到以后也许有同道中人也会遇到相似的问题，也许我写的这一篇文章会对你有一些帮助，那么这篇文章就有了它存在的意义了！下面我们就来看一下时钟效果的具体代码

HTML:

<div>
	<img src='imgs/0.png' /><img src='imgs/0.png' />:
	<img src='imgs/0.png' /><img src='imgs/0.png' />:
	<img src='imgs/0.png' /><img src='imgs/0.png' />
</div>

下面就是具体的js代码了：

window.onload=function(){
	var oimg=document.getElementsByTagName('img');
	setInterval(function(){
		var date=new Date();
		var str=date.getHours()+date.getMinutes()+date.getSeconds();
　　alert(str);
		for(var i=0;i<oimg.length;i++){
			oimg[i].src='imgs/'+str[i]+'.png';
		};
	},1000);
}

我们把str弹出来看一下到底存储的是什么，在没有实验之前我们想的是会弹出像110707这种格式的内容，好吧，现在我们运行看一下是不是与我们想的一样，结果如下图：

正如我们所看到的，它弹出的不是字符串而是数字之和，所以我们上面写的代码还是有问题的，我们需要把数字转化成字符串。而且还需要特别处理一下弹出的字符，如果当前时间是十一点零七分，我们需要在7前面加个0，也就是对于小于10的数字我们需要在前面补个0，这样弹出的效果才是我们需要的。那么我们来修改一下上面的代码。

function getTime(n){
	if(n<10){
		return '0'+n;
	}else{
		return ''+n;
	}
};
var str=getTime(date.getHours())+getTime(date.getMinutes())+getTime(date.getSeconds());

现在再来看一下弹出来的效果:

现在弹出来的内容就是我们需要的了！然后我们把alert(str)删除或者注释一下，就可以看到图片每过一秒钟就自动变化一下。可是当我们运行这段代码的时候还是可以看到存在一点小小的问题，当页面刚打开的时候会有一秒钟的时间页面中的数字和当前时间是不一致的。那么我们怎么改呢？很简单，我们把setInterval中的代码单独提取出来放在一个方法中，然后把这个方法运行一下就可以了！难道这样就万事大吉了吗？当然是非也，我们发现在IE9下运行的是好好的，可是在IE7浏览器总运行出来的就有错误了。这是因为oimg[i].src='imgs/'+str[i]+'.png';这句代码在IE7下是不兼容的，怎么才能让代码兼容呢？把这句代码改成oimg[i].src='imgs/'+str.charAt(i)+'.png';就可以了，其实就是把[]用charAt()代替就可以了！最终代码如下：

<script type="text/javascript">
	function getTime(n){
		if(n<10){
			return '0'+n;
		}else{
			return ''+n;
		}
	};
	window.onload=function(){
		var oimg=document.getElementsByTagName('img');
		setInterval(function(){
			tick();
		},1000);
		function tick(){
			var date=new Date();
			var str=getTime(date.getHours())+getTime(date.getMinutes())+getTime(date.getSeconds());
			for(var i=0;i<oimg.length;i++){
				oimg[i].src='imgs/'+str.charAt(i)+'.png';
			};
		};
		tick();
	}
</script>

最终完整代码，点击下面链接可以查看效果：

http://www.csshello.com/js/405.html