<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=.box, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 150px;
margin: 20,auto;
line-height: 150px;
text-align: center;
}
#clock{
width: 300px;
height: 100px;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<div class="box">
<div id="clock"></div>
<p>
<button id="btn_start">开始</button>
</p>
</div>
<script>
//1.创建变量
let timer = null; //赋初值 定时器变量
let flag =true //标记变量,用来标识当前按钮是开始还是暂停
//调用 showTime()
showTime()
//2.定义函数:用于显示时间
function showTime(){
//2.1创建日期对象 ---当前日期
let now = new Date()
//2.2取出日期对象的时间
let h = now.getHours()
let m = now.getMinutes()
let s = now.getSeconds()
h = h<10?'0'+h:h
m = m<10?'0'+m:m
s = s<10?'0'+s:s
//2.3将时间写入div中
document.getElementById('clock').innerHTML=h+':'+m+':'+s
}
//3.给按钮注册c1ick事件,在事件的处理程序中创建定时器
let start =document.getElementById('btn_start')
start.addEventListener('click',function(){
//3.1、判断标记变量f1ag,若为true表示时间正在运行,按钮显示'暂停'
if(flag){
timer = setInterval(showTime,1000)//创建定时器
flag =!flag//取反
this.innerHTML='暂停'//this代表的是当前的按钮start
}else{
clearInterval(timer)//清除定时器
flag =!flag//取反
this.innerHTML='开始'//this代表的是当前的按钮
}
})
</script>
</body>
</html>
编写程序,实现电子时钟自动走动的效果,并提供一个按钮控制电子时钟是否停止走动。
最新推荐文章于 2023-04-17 13:30:40 发布