詳細的看看元件內容，這個react的元件

/*
    @startTime 開始時間時間戳，如果不設定就是表示現在，設定的話，如果說時間沒到：不展示還是顯示沒有開始
    @endTime 結束時間戳 必須要給
    @overText  結束
    @willStart 即將開始 如果這個欄位為空，就是不展示內容
    @noSecond 不展示秒（奇葩的倒計時）
    @ms 展示毫秒倒計時
    @callback 倒計時完成的回撥
*/
import React, { useEffect, useRef } from 'react';
import './index.less'

const Countdown = ({ startTime = Date.now(), endTime, willStart = "即將進行倒計時", overText = "倒計時完成", noSecond = false, ms = false, callback }) => {
    const clsPrefix = 'rmc-countdown'
    const step = ms ? 91 : 1000
    //一天時長的毫秒數
    const countEl = useRef(null);
    let currentTime = Date.now();
    const countNum = endTime - Math.max(startTime, currentTime);
    const countR = useRef(countNum);
    let timer = null;

    useEffect(() => {
        function countIt() {
            if (countEl.current) {
                currentTime = Date.now();
                //還沒開始
                if (currentTime < startTime) {
                    if (willStart !== '') {
                        countEl.current.innerHTML = `<div class="${clsPrefix}_will">${willStart}</div>`
                    }
                    return
                }
                countEl.current.innerHTML = getData();
            }
        }
        countIt();
        timer = setInterval(countIt, step);
        return () => clearInterval(timer)
    }, [])

    const getData = () => {
        let d = Math.floor(countR.current / 1000 / 60 / 60 / 24);
        let h = Math.floor(countR.current / 1000 / 60 / 60 % 24);
        let m = Math.floor(countR.current / 1000 / 60 % 60);
        let s = Math.floor(countR.current / 1000 % 60);
        let millisecond = Math.floor(countR.current % 1000);
        if (countR.current < step) {
            clearInterval(timer);
            callback && callback();
            if (overText !== '') {
                return `<div class="${clsPrefix}_over">${overText}</div>`;
            } else {
                return ''
            }
        } else {
            countR.current = countR.current - step;
        }

        let timeTxt = `<div class="${clsPrefix}_info">
            <b>${d > 9 ? d : '0' + d}</b>天
            <b>${h > 9 ? h : '0' + h}</b>時
            <b>${m > 9 ? m : '0' + m}</b>分
            <b>${s > 9 ? s : '0' + s}</b>秒</div>`
        //如果沒有
        if (noSecond) {
            timeTxt = `<div class="${clsPrefix}_info">
            <b>${d > 9 ? d : '0' + d}</b>天
            <b>${h > 9 ? h : '0' + h}</b>時</div>`
        }
        //如有需要毫秒數
        if (ms) {
            timeTxt = `<div class="${clsPrefix}_info">
            <b>${d > 9 ? d : '0' + d}</b>天
            <b>${h > 9 ? h : '0' + h}</b>時
            <b>${m > 9 ? m : '0' + m}</b>分
            <b>${s > 9 ? s : '0' + s}</b>秒
            <b>${millisecond < 100 ? '0' + millisecond : millisecond}</b>毫秒</div>`
        }
        return timeTxt
    }
    return (
        <div className={clsPrefix} ref={countEl}></div>
    );
};

export default Countdown;
 

less內容，很簡單可以根據自己的需求重置css，由於沒有less的語言使用了scss的

.rmc-countdown {
    font-size: 1rem;
    &_info {
        display: flex;
        align-items: center;
        &>b {
            display: inline-block;
            font-size: .8rem;
            color: #ff4471;
            padding: 0 .3rem;
            background-color: black;
            border-radius: .3rem;
            margin: 0 .2rem;
        }
    }
}
 

來源：網站優化怎麼搞