Javascript—简单电子时钟制作总结

最新推荐文章于 2024-05-30 07:58:39 发布

_小彬哥

最新推荐文章于 2024-05-30 07:58:39 发布

阅读量2.4k

点赞数 1

文章标签： javascript for循环

本文链接：https://blog.csdn.net/hewenbin9201/article/details/54319121

版权

代码

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			body {
				background: #000;
				color: #FFF;
				font-size: 50px;
			}
		</style>
		<script type="text/javascript">
			function totwo(num) {
				if (num < 10) {
					return '0' + num;
				} else {
					return '' + num;
				}
			}
			window.onload = function() {
				var oTime = document.getElementById('time');
				var aImgs = oTime.getElementsByTagName('img');

				function newtime() {
					var mydate = new Date();
					var stime = totwo(mydate.getHours()) + totwo(mydate.getMinutes()) + totwo(mydate.getSeconds());
					for (var i = 0; i < aImgs.length; i++) {
						aImgs[i].src = 'images/' + stime.charAt(i) + '.png';
					}
				}
				
				setInterval(newtime,1000);
				newtime();
				console.log(stime);
			}
		</script>
	</head>

	<body>
		<div id="time">
			<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>

</html>

制作思路：html：用一个div盒子装着两张数字img图片.然后加入css样式修改背景颜色，字体颜色，和冒号尺寸。

Javascript思路：用数字图片的循环实现时、分、秒的动态运行。

关键点：创建一个日期对象，得到一个时间戳获取系统时间。 var mydate = new Date();

var stime = totwo(mydate.getHours()) + totwo(mydate.getMinutes()) + totwo(mydate.getSeconds());

再利用for循环：for (var i = 0; i < aImgs.length; i++) {

aImgs[i].src = 'images/' + stime.charAt(i) + '.png';

}

得到一个静态的时刻，但这个时间需要每次刷新才能显示最新的时间，所以还不够完善。

因此可以利用定时器setInterval实现动态时间效果。

_小彬哥

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
Javascript—简单电子时钟制作总结

代码 body { background: #000; color: #FFF; font-size: 50px; } function totwo(num) { if (num < 10) { return '0' + num; } else { return '' + num
复制链接

扫一扫