javscript定时器demo：电子时钟

最新推荐文章于 2024-05-30 11:27:58 发布

CharlesKKK丶

最新推荐文章于 2024-05-30 11:27:58 发布

阅读量334

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43890514/article/details/115710126

版权

一、效果图
在这里插入图片描述

二、实现要点

先准备0-9的数字的图片素材。其中图片名和数字值相同。方便根据数字对应图片的路径。需要展示八张数字图片，根据时间的不同切换不同的数字。
步骤：
a. 获取系统时间：Date对象、getHours()、getMinutes()
b. 显示系统时间：字符串连接
c. 设置图片路径：charAt
注意点：

getHours()、getMinutes()等函数取到的是数字，需要把时分秒拼接成字符串，根据字符串的index来换不同的数字图片。
因为时间的各位显示都是两位数，所以如果数字小于10 需要在前面加0，因此定义一个函数format来实现这个功能。

三、代码
搭建时钟的结构
在这里插入图片描述

	<body style="background-color: #000; color:#fff">
		<div id="clock">
			<img src="images/0.png">
			<img src="images/0.png">
			:
			<img src="images/0.png">
			<img src="images/0.png">
			:
			<img src="images/0.png">
			<img src="images/0.png">
		</div>

	</body>

				var aImg = document.getElementsByTagName('img');
			
				//
				function format(time) {
					if (time < 10) {
						// 补0
						return '0' + time;
					} else {
						return '' + time
					}
				}
				
				function clock() {
					var oDate = new Date();
					// 直接得到的是数字，
					// 需要转变为字符串实现将时间的字符串拼接。
					//数字图片0 - 9 的路径名依次是images/0.png、images/1.png ...
					//例如时间为20：20:15  ->time = '202015'
					var time = format(oDate.getHours()) + format(oDate.getMinutes()) + format(oDate.getSeconds());
					
					for (let i = 0; i < aImg.length; i++) {
					// 根据当前的时间通过动态改变路径来选择图片
						aImg[i].src = 'images/' + time.charAt(i) + '.png'
					}
				}
				// 总是一秒后执行，会导致短暂00：00：00
				setInterval(clock, 1000);
				// 页面加载过程中直接先执行一遍
				clock();
			
			}

四、素材
在这里插入图片描述

CharlesKKK丶

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javscript定时器demo：电子时钟

javscript定时器demo：电子时钟一、效果图二、实现要点先准备0-9的数字的图片素材时间的显示 hh:mm:ss注意点：getHours()、getMinutes()等函数取到的是数字，需要把时分秒拼接成字符串，根据字符串的index来换不同的数字图片。如果数字小于10 需要在前面加0三、代码搭建时钟的结构 <body style="background-color: #000000; color:#fff"> <div id="cl
复制链接

扫一扫