当前位置：首页 > article >正文

电子时钟html

article 2025/2/11 16:04:43

要求：
电子时钟的时间需与北京时间实时对应。
原理：

获取当地时间，我发现不用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+8
            let bjTime = new Date()
            let hour = bjTime.getHours()
            let minute = bjTime.getMinutes()
            let second = bjTime.getSeconds()
            hour = hour < 10 ? '0' + hour : hour
            minute = minute < 10 ? '0' + minute : minute
            second = second < 10 ? '0' + second : second
            let Time = hour + ':' + minute + ':' + second 
            let clock = document.querySelector('.clock')
            clock.textContent = Time
        }
        Clock()
        setInterval(Clock, 1000)
    </script>
</body>
</html>

视频：

电子时钟

查看全文

http://www.kler.cn/a/540852.html