要求:
电子时钟的时间需与北京时间实时对应。
原理:
- 获取当地时间,我发现不用UTC+8,当地时间已经与北京时间一致。
- 获取时分秒,小于十的补零。
- 调用clock更新,这样刷新的时候还会有内容。
- 设置每秒钟调用一次。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>北京时间电子钟</title><style>.clock {margin: 0 auto;width: 200px;height: 200px;border: 2px solid pink;text-align: center;line-height: 200px;font-size: 30px;}</style>
</head>
<body><div class="clock"></div><script>function Clock() {//北京时间:UTC+8let bjTime = new Date()let hour = bjTime.getHours()let minute = bjTime.getMinutes()let second = bjTime.getSeconds()hour = hour < 10 ? '0' + hour : hourminute = minute < 10 ? '0' + minute : minutesecond = second < 10 ? '0' + second : secondlet Time = hour + ':' + minute + ':' + second let clock = document.querySelector('.clock')clock.textContent = Time}Clock()setInterval(Clock, 1000)</script>
</body>
</html>
视频:
电子时钟