JS 實現春節倒計時效果

<script>
        // 獲取元素
        var tian = document.querySelector('.tian')
        var shi = document.querySelector('.shi')
        var fen = document.querySelector('.fen')
        var miao = document.querySelector('.miao')

        //春節日期
        var NewYearTime = +new Date('2021-02-12 00:00:00')

        GetTime()
        // 自動重復調用函數,間隔一秒
        setInterval(GetTime, 1000)

        // 獲取時間函數
        function GetTime() {
            var nowtime = +new Date()                   //返回自1970年1月1日至今的總毫秒數
            var times = (NewYearTime - nowtime) / 1000 //得到用戶輸入的時間-當前時間的毫秒值 / 1000 = 剩余秒總數

            var t = parseInt(times / 60 / 60 / 24)  //得到天
            t = t < 10 ? '0' + t : t
            tian.innerHTML = t + ' 天'
            var h = parseInt(times / 60 / 60 % 24)  //得到小時
            h = h < 10 ? '0' + h : h                //三元運算,如果小於10,就在十位補0,如果大於10 就正常輸出
            shi.innerHTML = h + ' 小時'
            var m = parseInt(times / 60 % 60)       //取得分鍾
            m = m < 10 ? '0' + m : m
            fen.innerHTML = m + ' 分鍾'
            var s = parseInt(times % 60)            //取得秒
            s = s < 10 ? '0' + s : s
            miao.innerHTML = s + ' 秒'
        }
    </script>

 

 

 

 

 

 

 

效果圖