深入JS2.2简易时钟

最新推荐文章于 2023-02-08 18:33:04 发布

wwwjiahuan

最新推荐文章于 2023-02-08 18:33:04 发布

阅读量352

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wwwjiahuan/article/details/54629885

简易时钟

<!DOCTYPE HTML>
<html>
	<head>
		<meta charset='utf-8'>
		<title>length</title>
		<style>
			body{
				background-color: #000;
				margin: 200px 130px;
			}
			img{
				width: 200px;
				height: 200px;
			}
		</style>
		<script>

		function toDou(n)//将时间补零转化成字符串
		{
			if(n<10){
				return '0'+n;
			}
			else{
				return ''+n;
			}
		}
			window.onload=function(){
				var aImg=document.getElementsByTagName('img');

				function tick(){
					var oData=new Date();//系统获取时间
					var str=toDou(oData.getHours())+toDou(oData.getMinutes())+toDou(oData.getSeconds());//将获取的时分秒拼接成字符串
					for(var i=0;i<aImg.length;i++)
					{
						aImg[i].src=''+str.charAt(i)+'.png';//将图片路径赋值为字符串中的数字，charAt处理兼用性
					}
				}
				setInterval(tick, 1000);//开启定时器，1000毫秒执行一次
				tick();//先执行一次，防止开始时出现断点
				
			};

		</script>
	</head>
	<body>
		<img src="0.png" alt="0">
		<img src="0.png" alt="0">
		:
		<img src="0.png" alt="0">
		<img src="0.png" alt="0">
		:
		<img src="0.png" alt="0">
		<img src="0.png" alt="0">
	</body>
</html>