使用HTML与JavaScript实现动态时钟-优快云博客

本文介绍了一个使用HTML、CSS及JavaScript实现的动态时钟项目。该项目通过不断更新页面上的图片来显示当前时间，每张图片代表一个数字，以此构成当前的时间（小时、分钟和秒）。此外，还提供了一种兼容IE7及以上版本的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		body{
			background: url(img/0.png);
		}
	</style>
	<script>
		//如果小于10 的话，前面补0  时钟的格式01:12:30
		function toDou(n){
				if(n<10)
				{
					return "0"+n;
				}else{
					return ""+n;//为什么要加空  因为证明返回的是一个字符串
				}
				
			}
		
		window.onload = function(){
	
			var imgArr = document.getElementsByTagName("img");


		function tick(){
			var oDate =new Date();
			var str =toDou( oDate.getHours() )+toDou( oDate.getMinutes() )+toDou( oDate.getSeconds() );

			for(var i = 0 ; i < imgArr.length;i++)
			{
				//imgArr[i].src = 'img/'+str[i]+'.png';//不兼容ie7以下版本
　　　　　　　　　　　　　　　　　　 imgArr[i].src = 'img/'+str.charAt(i)+‘.png';
			}
		}
		setInterval(tick,1000);//每隔一秒调用一次
		tick();//当加载完成的时候调用一次 就不会是刷新的时候为初始值了 00:00:00
	
		}
	</script>
	<body style="background: black; color: white; font-size: 50px;">
		<img src="img/0.png" alt="" />
		<img src="img/0.png" alt="" />
		：
		<img src="img/0.png" alt="" />
		<img src="img/0.png" alt="" />
		：
		<img src="img/0.png" alt="" />
		<img src="img/0.png" alt="" />
	</body>
</html>