如何制作一个简单的数码计时器

最新推荐文章于 2024-07-15 17:15:41 发布

你好122xx

最新推荐文章于 2024-07-15 17:15:41 发布

阅读量162

点赞数

文章标签： javascript html 前端

本文链接：https://blog.csdn.net/gibgkjnkk/article/details/130184132

版权

以下代码如下：

静态部分：

<body style="background: black; color: white; font-size: 50px;">
		<img src="img/0.png" />
		<img src="img/0.png" /> 
		:
		<img src="img/0.png" />
		<img src="img/0.png" />
		:
		<img src="img/0.png" />
		<img src="img/0.png" />
	</body>

JS部分：

<script>
			function toDou(n) {
				if(n < 10) {
					return '0' + n;
				} else {
					return '' + n;
				}
			}
			window.onload = function() {
				var aImg = 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 < aImg.length; i++){
						aImg[i].src = 'img/' + str.charAt(i) + '.png';
					}
				}
				setInterval(tick,1000);
				tick();
			}
		</script>

主要目的是通过定时器每秒钟更新屏幕上的数十个图像，使其看起来像是在实时更新。代码中涉及到的时间处理、更新图像、定时器等方面，都是非常重要的组成部分，下面将分别进行解释。

时间处理：

先展示代码

function toDou(n) {
				if(n < 10) {
					return '0' + n;
				} else {
					return '' + n;
				}
			}

在这代码中，使用了一个名为toDou的函数来处理时间的小时、分钟和秒数，该函数的作用是将时间数值转换为字符串，其中小时数为 0-23 之间的数字，分钟数为 0-59 之间的数字，秒数为 0-59 之间的数字。

图像更新：

展示代码

window.onload = function() {
				var aImg = 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 < aImg.length; i++){
						aImg[i].src = 'img/' + str.charAt(i) + '.png';
					}
				}
				setInterval(tick,1000);
				tick();
			}

在更新图像时，我使用了一个名为tick的函数，该函数每秒钟调用一次，用于更新屏幕上的图像。在tick函数中，首先获取当前时间数值，并将其转换为字符串，然后使用字符串连接的方式将小时、分钟和秒数字符串连接起来，得到一个时间字符串。接着，遍历屏幕上的所有图像，将每个图像的源地址转换为时间字符串中的小时、分钟和秒数对应的数字，然后将这些数字作为图像的src属性值设置为相应的图像文件的名称。这样就可以使图像看起来像是在实时更新。

定时器

展示代码

setInterval(tick,1000);
				tick();

代码中使用了一个setInterval函数来控制定时器，该函数每秒钟调用一次tick函数，从而实现了图像的实时更新。

字体大小

在代码中出现的<font>标签中，使用了font-size属性设置了字体大小，其值为 50px。虽然这只是一个字符串，但是在 HTML 中，字符串也可以通过<font>标签进行设置，因此这个字符串会被解析为字体大小。

<body style="background: black; color: white; font-size: 50px;">

总结：

代码的结构非常简单，主要由三部分组成:

时间处理函数toDou:该函数的作用是将时间数值转换为字符串，其中小时数为 0-23 之间的数字，分钟数为 0-59 之间的数字，秒数为 0-59 之间的数字。
图像更新函数tick:该函数每秒钟调用一次，用于更新屏幕上的图像。在函数中，首先获取当前时间数值，并将其转换为字符串，然后使用字符串连接的方式将小时、分钟和秒数字符串连接起来，得到一个新的时间字符串。接着，遍历屏幕上的所有图像，将每个图像的源地址设置为时间字符串中的小时、分钟和秒数对应的数字，从而实现图像的更新。
定时器函数setInterval:该函数用于控制定时器，每秒钟调用一次tick函数，从而实现图像的实时更新。

你好122xx

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
1
评论
如何制作一个简单的数码计时器

以下代码如下：静态部分：JS部分：主要目的是通过定时器每秒钟更新屏幕上的数十个图像，使其看起来像是在实时更新。代码中涉及到的时间处理、更新图像、定时器等方面，都是非常重要的组成部分，下面将分别进行解释。时间处理：先展示代码在这代码中，使用了一个名为的函数来处理时间的小时、分钟和秒数，该函数的作用是将时间数值转换为字符串，其中小时数为 0-23 之间的数字，分钟数为 0-59 之间的数字，秒数为 0-59 之间的数字。图像更新：展示代码在更新图像时，我使用了一个名为的函数，该函数每秒钟
复制链接

扫一扫