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

梦里梦外; 2023-10-05 13:00 8阅读 0赞

### 题目： ###

代码解释：  
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>

运行结果截图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70_pic_center]  
就这样啦，很简单的一个代码，主要理解Date对象就行！！！  
运行出来的时间就是喜欢我的时间啊！如果让我加个限制，我希望是一万年！！！  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70_pic_center 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201031231922861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ==,size_16,color_FFFFFF,t_70#pic_center
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ_size_16_color_FFFFFF_t_70_pic_center 1]: https://img-blog.csdnimg.cn/2020103123205921.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc5NzUzOQ==,size_16,color_FFFFFF,t_70#pic_center