用JavaScript实现倒计时 

<!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>倒计时案例</title>

</head>

<body>
    <div class="time">
        <span class="hour">00</span>
        <span class="minute">00</span>
        <span class="second">00</span>
    </div>
    <script>
        // 1.获取元素
        var hourEle = document.querySelector('.hour');
        var minuteEle = document.querySelector('.minute');
        var secondEle = document.querySelector('.second');

        var endDate = new Date();
        endDate.setHours(24)
        endDate.setMinutes(0)
        endDate.setSeconds(0)
        endDate.setMilliseconds(0)
        var timer = setInterval(function () {
            var nowDate = new Date();
            //2.计算差值
            var intervelTime = parseInt((endDate.getTime() - nowDate.getTime()) / 1000);
            var intervelSecond = parseInt(intervelTime % 60);
            var intervelMinute = parseInt(intervelTime / 60 % 60);
            var intervelHour = parseInt(intervelTime / 3600);
            // 3.赋值
            hourEle.textContent = leftFillNum(intervelHour, 2);
            minuteEle.textContent = leftFillNum(intervelMinute, 2);
            secondEle.textContent = leftFillNum(intervelSecond, 2);
        }, 1000)
        function leftFillNum(num, targetLength) {
            return num.toString().padStart(targetLength, 0);
        }

    </script>
</body>

</html>

结果画面:

缺点:

载入时会有短暂的一刻无法正确显示

 

posted @ 2022-11-06 22:26  theYT  阅读(137)  评论(0)    收藏  举报