JS：实现电子表形式的时间显示

最新推荐文章于 2023-01-12 12:50:34 发布

燕双嘤

最新推荐文章于 2023-01-12 12:50:34 发布

阅读量2.1k

点赞数

分类专栏： HTML/CSS/JS/jQuery

本文链接：https://blog.csdn.net/qq_42192693/article/details/82664818

版权

HTML/CSS/JS/jQuery 专栏收录该内容

29 篇文章 2 订阅

订阅专栏

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<script language="JavaScript">
		var imgs = [];
		for(var i = 0; i < 10; i++) {
			imgs[i] = new Image();
			imgs[i].src = 'img/' + i + '.jpg';
		}

		function displayTime() {
			var now = new Date();
			var time = [];

			var hrs = now.getHours(); //小时
			hrs = (hrs < 10 ? '0' : '') + hrs;
			time[0] = hrs.charAt(0);
			time[1] = hrs.charAt(1);

			var mins = now.getMinutes(); //分钟
			mins = (mins < 10 ? '0' : '') + mins;
			time[2] = mins.charAt(0);
			time[3] = mins.charAt(1);

			var secs = now.getSeconds(); //秒
			secs = (secs < 10 ? '0' : '') + secs;
			time[4] = secs.charAt(0);
			time[5] = secs.charAt(1);

		for(var i = 0; i < time.length; i++) {        //在指定时间调用特定的图片
				var img = document.getElementById('d' + i);
				img.src = imgs[time[i]].src;
				img.alt = time[i];
			}
		}
	</script>

	<body onLoad="setInterval('displayTime()',1000);">
		<p class="style1">当前时间：</p>
		<img id="d0" src="img/0.jpg" alt="0">
		<img id="d1" src="img/0.jpg" alt="0">
		<img src="img/10.jpg" alt=":">
		<img id="d2" src="img/0.jpg" alt="0">
		<img id="d3" src="img/0.jpg" alt="0">
		<img src="img/10.jpg" alt=":">
		<img id="d4" src="img/0.jpg" alt="0">
		<img id="d5" src="img/0.jpg" alt="0">
	</body>

</html>

需要电子表图片，从0-9