编写程序，实现电子时钟自动走动的效果并提供一个按钮控制电子时钟是否停止走动。

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

加辣椒了吗?

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

阅读量1.5w

点赞数 47

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_44797539/article/details/109409488

版权

该博客介绍了一个使用JavaScript编写的动态电子时钟程序，通过创建Date对象获取当前时间并实时更新显示。此外，还实现了通过按钮控制时钟的暂停与继续走动功能。代码中使用了setTimeout进行时间刷新，并通过变量run控制时钟状态。读者可以借此了解JavaScript时间处理和DOM操作。

摘要由CSDN通过智能技术生成

题目：

编写程序，实现电子时钟自动走动的效果并提供一个按钮控制电子时钟是否停止走动。

代码解释：
chance_str(n)函数：对获取的时间格式化，即对不足两位数的一位数补零。
time()函数：获取时间，新建Date对象返回当日的日期和时间。其中setTimeout一秒刷新一次时间。
chance()函数：控制按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="text">
			<p id="time"></p>
			<input type="button" id="bian" onclick="chance()" value="暂停">
		</div>
		
		<script>
			//编写程序，实现电子时钟自动走动的效果，
			//并提供一个按钮控制电子时钟是否停止走动。
			//要求清晰的程序步骤，并为程序标注释。
			var run = true;		// 控制时间是否走动
			function chance_str(n){		// 对两位数补零
				if (n<10){
					n = "0" + n
				}
				return n
			}
			function time(){	// 获取时间
				//console.log(run)
				if(run){
					var day = new Date();
					var h = day.getHours();// 对两位数补零
					h = chance_str(h)
					var m = day.getMinutes();// 对两位数补零
					m = chance_str(m)
					var s = day.getSeconds();// 对两位数补零
					s = chance_str(s)
					document.getElementById('time').innerHTML =
					h + ":" + m + ":" + s;  
					setTimeout(time, 1000);		// 一秒刷新一次时间
				}
			}
			
			time()	// 调用时间函数,初始化界面
			
			function chance(){	// 控制按钮事件
				if(run == true){	// 暂停操作
					run = !run;
					document.getElementById('bian').value = "开始";
				}else{		// 开始操作
					run = !run;
					document.getElementById('bian').value = "暂停";
					time()
				}
			}
			
		</script>
	</body>
</html>