JavaScript实现页面倒计时效果

 html代码:

<div class="time"></div>

css:

<style>

        .time {

            width: 300px;

            height: 50px;

            border: 1px solid black;

            line-height: 50px;

            text-align: center;

        }

    </style>

JavaScript:

    <script>

        // 1.先获取div

        let div = document.querySelector('.time');

        // 2.获取年月日,时分秒

        function mytime() {

            let dt = new Date();

            let year = dt.getFullYear();

            let M = dt.getMonth() + 1;

            let day = dt.getDate();

            let h = dt.getHours();

            let m = dt.getMinutes();

            let s = dt.getSeconds();

            // 拼接字符串并将字符串设置给div

            div.innerHTML = `今天是:${year}年${M}月${day}日${h}:${m}:${s}`;

        }

        mytime();

        // 设置一个定时器

        setInterval(function () {

            mytime();

        }, 1000)

    </script>