javaScript 实现倒计时案例

html

<h2 >2021还剩多少天：
    <span id="day">0</span>天
    <span id="hour">0</span>小时
    <span id="minute">0</span>分
    <span id="second">0</span>秒
</h2>

script

<script>
    let day = document.querySelector("#day")
    let hour = document.querySelector("#hour")
    let minute = document.querySelector("#minute")
    let second = document.querySelector("#second")

    let timer1 = +new Date()        //获得毫秒值

    let timer2 = +new Date("2021-12-31")

    let timer =  timer2 - timer1

    timer = timer / 1000

    let newDay = parseInt (timer / 60 / 60 / 24)
    let newHour = parseInt (timer / 60 / 60 % 24)
    let newMinute = parseInt (timer / 60 % 60)
    let newSecond = parseInt (timer % 60)

    day.innerHTML = newDay
    hour.innerHTML = newHour
    minute.innerHTML = newMinute
    second.innerHTML = newSecond


    setInterval(()=>{
        let timer1 = +new Date()        //获得毫秒值
        let timer2 = +new Date("2021-12-31")
        let timer =  timer2 - timer1

        timer = timer / 1000

        let newDay = parseInt (timer / 60 / 60 / 24)
        let newHour = parseInt (timer / 60 / 60 % 24)
        let newMinute = parseInt (timer / 60 % 60)
        let newSecond = parseInt (timer % 60)

        day.innerHTML = newDay
        hour.innerHTML = newHour
        minute.innerHTML = newMinute
        second.innerHTML = newSecond
    },1000)
</script>