电子时钟的时间需与北京时间实时对应。
解：1.获取元素
2.定义时间更新函数
（1）创建Date对象；（2）得到当前时间；（3）个位数补零；（4）渲染给页面
3.页面加载后立即执行（初始化）
4.定时更新
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
display: flex;
}
.box1 {
display: flex;
width: 200px;
height: 200px;
border: 1px solid black;
font-size: 150px;
justify-content: center;
align-items: center;
}
.mask {
font-size: 150px;
display: flex;
margin-top: -20px;
}
</style>
</head>
<body>
<div class="box1" id="h"></div>
<div class="mask">:</div>
<div class="box1" id="m"></div>
<div class="mask">:</div>
<div class="box1" id="s"></div>
<script>
// 获取元素
const hour = document.querySelector('#h')
const min = document.querySelector('#m')
const sec = document.querySelector('#s')
// 定义时间更新函数
function getNowTime() {
let date = new Date() // 创建Date对象，获取当前系统的时间
let h = date.getHours() // 得到当前小时
let m = date.getMinutes() // 得到当前分钟
let s = date.getSeconds() // 得到当前秒
// 个位数前补0
h = h < 10 ? '0' + h : h
m = m < 10 ? '0' + m : m
s = s < 10 ? '0' + s : s
// 渲染给页面
hour.innerHTML = h
min.innerHTML = m
sec.innerHTML = s
}
getNowTime() // 页面加载后立即执行，确保打开页面就显示当前时间
setInterval(getNowTime, 1000) // 定时更新
</script>
</body>
</html>
第一遍复写 正确