纯原生的电子时钟

html
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .digital-clock {
            font-size: 30px;
            text-align: center;
            margin-top: 50px;
        }
        .digital-clock div {
            display: inline-block;
        }
        .datestr {
            text-align: center;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="digital-clock">
            <div class="hour">00</div>
            <div>:</div>
            <div class="minute">00</div>
            <div>:</div>
            <div class="second">00</div>
        </div>
        <div class="datestr">
        </div>
    </div>
    <script>
        var hourDiv = document.querySelector('.hour');
        var minuteDiv = document.querySelector('.minute');
        var secondDiv = document.querySelector('.second');
        var datastrDiv = document.querySelector('.datestr')
        function setTime() {
            //当前时间
            var now = new Date();
            // 获取小时、分钟和秒数
            var hours = now.getHours();
            var minutes = now.getMinutes();
            var seconds = now.getSeconds();
            //处理格式
            hours = hours < 10 ? '0' + hours : hours;
            minutes = minutes < 10 ? '0' + minutes : minutes;
            seconds = seconds < 10 ? '0' + seconds : seconds;

            hourDiv.textContent = hours;
            minuteDiv.textContent = minutes;
            secondDiv.textContent = seconds;
            datastrDiv.textContent = "今天是：" + now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日" + " 星期" + "日一二三四五六".charAt(now.getDay());
        } setInterval(setTime, 1000);
    </script>
</body>

</html>
纯原生的电子时钟 ​

纯原生的电子时钟
