数码时钟

最新推荐文章于 2021-02-24 05:22:05 发布

wusiye_123456

最新推荐文章于 2021-02-24 05:22:05 发布

阅读量231

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wusiye_123456/article/details/90667043

版权

js 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

数码时钟

·获取系统时间

Date对象

getHours、getMinutes、getSeconds

·显示系统时间

字符串连接

空位补零

·设置图片路径

charAt 获取第几位，有点像数组 (charAt(0))-->获取第0为的字符

·date对象的其他方法：

年（getFullYear()）月（getMonth()）日（getDate()）星期（getDay()）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script>

	function toDouble(num) {
		if(num<10) {
			return '0'+num;
		}
		else {
			return ''+num;
		}
	}

	window.onload = function() {
		var oBtn1 = document.getElementById('btn1');
		var aImg = document.getElementsByTagName('img');

		var i = 0;

	function updateTime() {
			var oDate = new Date();  //获取系统时间
			// var arr =['2', '1', '5', '5', '3', '2'];
			var str = toDouble(oDate.getHours() ) + toDouble(oDate.getMinutes()) + toDouble(oDate.getSeconds() );  //toDouble是补零

			//alert(str);

			 for (i=0; i<aImg.length; i++) {
				aImg[i].src='images/' + str.charAt(i)+ '.png';
			 }
			
		}

		setInterval(updateTime,1000);
		updateTime();  //在页面执行前，先调用一下这个函数，这样，打开页面就是这个时间，如果不调用这个函数，打开页面是6个0，过一秒才是当前时间
	}
	</script>
</head>
<body style="color:#FFFF00; background:#990099;font-size: 50px;">
	<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">
	秒
</body>
</html>

wusiye_123456

关注

0
点赞
踩
0

收藏

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

数码时钟·获取系统时间Date对象getHours、getMinutes、getSeconds·显示系统时间字符串连接空位补零·设置图片路径charAt 获取第几位，有点像数组 (charAt(0))-->获取第0为的字符·date对象的其他方法：年（getFu...
复制链接

扫一扫