JS实现倒计时功能

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            margin: 100px 100px;
        }
        
        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: red;
            color: #fff;
            line-height: 40px;
            text-align: center;
        }
    </style>
    <script>
        window.addEventListener('load', function() {
            var d = document.querySelector('.day');
            var h = document.querySelector('.hours');
            var m = document.querySelector('.minutes');
            var s = document.querySelector('.seconds');
            var innerTime = new Date('2021-6-23 18:00');
            getDate();
            setInterval(getDate, 1000);
            // 获取时间
            function getDate() {
                var time = Date.now();
                var newTime = (innerTime - time) / 1000;
                var day = parseInt(newTime / 60 / 60 / 24);
                day = day < 10 ? '0' + day : day;
                d.innerHTML = day;
                // 计算小时
                var hours = parseInt(newTime / 60 / 60 % 24);
                hours = hours < 10 ? '0' + hours : hours;
                h.innerHTML = hours;
                // 计算分钟
                var minutes = parseInt(newTime / 60 % 60);
                minutes = minutes < 10 ? '0' + minutes : minutes;
                m.innerHTML = minutes;
                // 计算秒数
                var seconds = parseInt(newTime % 60);
                seconds = seconds < 10 ? '0' + seconds : seconds;
                s.innerHTML = seconds;
            }
        });
    </script>
</head>

<body>
    <span class="day">1</span>
    <span class="hours">1</span>
    <span class="minutes">1</span>
    <span class="seconds">1</span>
</body>

</html>
JS实现倒计时功能

推荐阅读
