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>

 

 

 

 

 

 

 

效果图