【HTML+CSS+JavaScript】实时倒计时功能

需求：实现距离2019年过年倒计时展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</title>
    <style>
        #box {
            font-size:60px;
            margin-top:200px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box"></div>

    <script>
        //定义结束时间
        var endDate = new Date('02/05/2019 00:00:00');
        //当前的时间
        var currDate = new Date(); 

        //倒计时的秒数
        var seconds = Math.round(endDate.getTime()/1000) - Math.round(currDate.getTime()/1000);

        runTime();   //调用一下

        //定时
        var timer = setInterval(runTime, 1000);


        function runTime(){
            //包含的天数
            var d = Math.floor(seconds / (3600 * 24));
            var s = seconds - d * 3600 * 24;
            //计算包含的小时数
            var h = Math.floor(s / 3600);
            s -= h * 3600; //剩下的秒数
            //计算包含的分钟数
            var m = Math.floor(s / 60); 
            //计算剩下的秒
            s -= m * 60;  

            //给个位数 补0
            d = d < 10 ? '0'+d : d;
            h = h < 10 ? '0'+h : h;
            m = m < 10 ? '0'+m : m;
            s = s < 10 ? '0'+s : s;

            //拼接字符串
            var timeHtml = `距离过年还有${d}天${h}小时${m}分${s}秒`;

            //判断倒计时结束
            if (seconds <= 0) {
                clearInterval(timer);
                timeHtml = '过年了';
            }

            document.querySelector('#box').innerHTML = timeHtml;


            seconds --;
        }
    </script>
</body>
</html>
【HTML+CSS+JavaScript】实时倒计时功能

猜你喜欢
