倒计时 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .countDown .time{
            background-color: orangered;
            color: white;
            width: auto;
            font-style: italic;
            display: inline-block;
            padding: 5px;
            border-radius: 5px;
        }

        .countDown .split {
            margin: 0 5px;
        }
    </style>
</head>
<body>

    <div>
        <div class="countDown">
            <span class="time hours">03</span>
            <span class="split">:</span>
            <span class="minutes time">25</span>
            <span class="split">:</span>
            <span class="seconds time">53</span>
        </div>
    </div>

    <script>
        var time = new Date();
        time.setHours(21)
        time.setMinutes(30)
        time.setSeconds(0)

        var hourEl = document.querySelector('.hours')
        var minutesEl = document.querySelector('.minutes')
        var secondsEl = document.querySelector('.seconds')

        function leftFillNum(num, targetLength) {
            return num.toString().padStart(targetLength, "0");
        }

        setInterval (function() {
            var now = new Date();
            var intervalDate = Math.floor((time.getTime() - now.getTime()) / 1000)
            // console.log(intervalDate)
            var hours = leftFillNum(Math.floor(intervalDate / 3600), 2)
            var minutes = leftFillNum(Math.floor(intervalDate / 60) % 60, 2)
            var seconds = leftFillNum(intervalDate % 60, 2)

            hourEl.textContent = hours
            minutesEl.textContent = minutes
            secondsEl.textContent = seconds
        }, 1000)
    </script>

</body>
</html>
posted @ 2025-01-09 08:32  魏阳晨  阅读(6)  评论(0)    收藏  举报
AmazingCounters.com