时钟

最新推荐文章于 2024-03-25 20:57:50 发布

年年CODE

最新推荐文章于 2024-03-25 20:57:50 发布

阅读量106

点赞数 1

分类专栏： DOM节点的增 ·删· 改· 查文章标签：时钟

本文链接：https://blog.csdn.net/qq_38743783/article/details/85160025

版权

DOM节点的增 ·删· 改· 查专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div class='box'>
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
		<img src="" alt="">
	</div>
	<script type="text/javascript">
		function show() {
			var now=new Date();
			var hours=now.getHours();
			var minute=now.getMinutes();
			var second=now.getSeconds();
			if(hours<10){
				hours='0'+hours;
			}
			if(minute<10){
				minute='0'+minute;
			}
			if(second<10){
				second='0'+second;
			}
			//拼接成字符串
			var timr=hours+':'+minute+':'+second;
			var imgs=document.images;//查找页面中所有img标签;返回值是数组。
			for(var i=0;i<timr.length;i++){
				if(i==2||i==5){
					imgs[i].src='../../img/second.png';
				}else{	
					imgs[i].src='../../img/'+timr.charAt(i)+'.png';
				}
			}
			console.log(imgs);
		}
		show();
		setInterval(show,1000);
	</script>
</body>
</html>

timr.charAt(i)返回指定位置的字符；
代码主要是根据小时分秒的不断变化，修改 img的src属性
图片的名字和时间对应

在这里插入图片描述

年年CODE

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时钟

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt;&lt;/head&gt;&lt;body&gt; &lt;div class='
复制链接

扫一扫

专栏目录