Web开发基础-JavaScript-13

原创于 2018-07-13 23:35:16 发布 · 145 阅读

0 ·

CC 4.0 BY-SA版权

Web开发专栏收录该内容

108 篇文章

订阅专栏

本文介绍了一个使用JavaScript实现的动态时钟案例。通过设置周期性定时器，页面上的时钟能够实时更新显示当前时间。用户可以点击按钮启动或暂停时钟显示。

JS中周期性定时器的使用练习：

案例思路：

动态时钟的演示案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动态时钟</title>
		<style type="text/css">
			p {
				border:1px solid red;
				width:200px;
				height:40px;
				text-align:center;
				line-height:40px;
				font-size:20px;
			}
		
		</style>
		<script type="text/javascript">
		
			var id = null;
			function start(){
				//如果id非空则定时器已启动，
				//那么就不必再次启动了。
				if(id){
					return;
				}
				id = setInterval(function(){
					var now = new Date();
					var time = now.toLocaleTimeString();
					var p = document.getElementById("clock");
					p.innerHTML = time;
				},1000);
			}
			
			function stop(){
				clearInterval(id);
				//暂停时定时器已停止，将id清空，
				//下次再点启动就可以继续用id判断了。
				
				id = null;
				
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始"
			onclick="start();">
		<input type="button" value="暂停"
		 	onclick="stop();">
		<p id="clock"></p>
	
	</body>

</html>

最终页面显示效果：点击开始，会动态显示当前时间，点击暂停则停止显示时间。