创建一个自动更新的时钟

盒子样式

    #clock {
            margin: 100px auto;
            width: 400px;
            height: 50px;
            background: pink;
            border-radius: 10px;
            text-align: center;
            line-height: 50px;
        }

创建盒子

    <div id="clock"></div>

js 代码，讲时间渲染入盒子中

setInterval(function () {
            var time = new Date() //创建时间
            console.log(time);  //控制台测试打印
            var timeStr = `${time.getFullYear()}年
                            ${time.getMonth() + 1}月
                            ${time.getDate()}日
                            ${time.getHours()}:
                            ${time.getMinutes()}:
                            ${time.getSeconds()}` //格式化时间
            document.getElementById('clock').innerHTML = timeStr
        }, 100) //渲染在盒子中