使用JavaScript动态模拟时间钟

最新推荐文章于 2024-05-14 19:02:10 发布

道而起

最新推荐文章于 2024-05-14 19:02:10 发布

阅读量1.3k

点赞数

文章标签： javascript html html5

本文链接：https://blog.csdn.net/weixin_45539338/article/details/125340113

版权

使用JavaScript动态模拟时间钟

文章目录

使用JavaScript动态模拟时间钟
一.实现效果图
二、body
三、JavaScript
四.小结

一.实现效果图

在这里插入图片描述

二、body

<body>
		<div style="background-color: darkgrey;">
			<a style="color: red;" id="a1"></a>年
			<a style="color: blue;" id="a2"></a>月
			<a style="color: darkcyan;" id="a3"></a>日
			<a style="color: darkmagenta;" id="a4"></a>时
			<a style="color: gold;" id="a5"></a>分
			<a style="color: chartreuse;" id="a6"></a>秒
			<input type="button" value="停止" onclick="sdp()" />
			<input type="button" value="继续" onclick="lg()" />
			<a href="demo1.html"></a>
			<input type="button" value="上一页" onclick="dow2()" />
		</div>
	</body>

三、JavaScript

<script>
			function time1(){
				var Mtime=new Date();
				
				var year=Mtime.getFullYear();
				var mon=Mtime.getMonth()+1;
				var day=Mtime.getDate();
				var hou=Mtime.getHours();
				var min=Mtime.getMinutes();
				var sc=Mtime.getSeconds();
				document.getElementById('a1').innerHTML=year;
				document.getElementById('a2').innerHTML=mon;
				document.getElementById('a3').innerHTML=day;
				document.getElementById('a4').innerHTML=hou;
				document.getElementById('a5').innerHTML=min;
				document.getElementById('a6').innerHTML=sc;
			}
			var tt=setInterval('time1()',1);
			function sdp(){
				clearInterval(tt);
			}
			function lg(){
				tt=setInterval('time1()',1000);
			}
			function dow2(){
				//-1表示向后走一个页面，如果当前访问URL中不存在后一个页面，就不会调用。
				history.go(-1);
			}
		</script>