倒计时

利用时间戳实现倒计时功能

 <div class="countdown">
        <p class="title" style="color:#eceda2">活动倒计时</p>
        <p class="clock">
            <span id="hour">00</span>
            <i>:</i>
            <span id="minutes">25</span>
            <i>:</i>
            <span id="scond">20</span>
        </p>
        <p class="days">
            <span id="day">00</span>
            <span>天</span>
        </p>
    </div>

         .countdown {
            width: 240px;
            height: 305px;
            text-align: center;
            line-height: 1;
            color: #faaeae;
            background-image: linear-gradient(to top, #ff0844 0%, #ffb199 100%);
            overflow: hidden;
            margin: 100px auto;
        }

        .countdown .next {
            font-size: 16px;
            margin: 25px 0 14px;
        }

        .countdown .title {
            font-size: 33px;
        }

        .countdown .days {
            margin-top: 50px;
            font-size: 50px;
            color: rgb(221, 229, 135);
        }

        .countdown small {
            font-size: 17px;
        }

        .countdown .clock {
            width: 142px;
            margin: 18px auto 0;
            overflow: hidden;
        }

        .countdown .clock span,
        .countdown .clock i {
            display: block;
            text-align: center;
            line-height: 34px;
            font-size: 23px;
            float: left;
        }

        .countdown .clock span {
            width: 34px;
            height: 34px;
            border-radius: 2px;
            background-color: #fafafa;
        }

        .countdown .clock i {
            width: 20px;
            font-style: normal;
        }

实现原理：

1. 时分秒 如果是小于10，需要补0
2. 利用将来时间与现在时间的时间差，将对应的时间戳转化为天、时、分、秒

js代码如下：

 function padZero(n) {
            return n < 10 ? '0' + n : n
        }

        function countDown() {
            const fTime = +new Date('2022-8-1 00:00:00')
            const nTime = +new Date()
            const rest = (fTime - nTime) / 1000
            if(rest < 0) clearInterval(time) //清除定时器
            const d = parseInt(rest / (60 * 60 * 24))
            const h = padZero(parseInt(rest / 60 / 60 % 24))
            const m = padZero(parseInt(rest / 60 % 60))
            const s = padZero(parseInt(rest % 60))
            document.querySelector('#day').innerHTML = d
            document.querySelector('#hour').innerHTML = h
            document.querySelector('#minutes').innerHTML = m
            document.querySelector('#scond').innerHTML = s

        }
        countDown()
        const time = setInterval(countDown,1000)