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

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


    <script type="text/javascript">
        //定义结束时间
        var endDate = new Date('09/10/2018 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 = `❤距离我们认识一周年❤${'<br>'}还有${d}天${h}小时${m}分${s}秒`;


            //判断倒计时结束
            if (seconds <= 0) {
                clearInterval(runTime);
                timeHtml = '❤❤❤❤❤';
            }


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

            seconds--;

        }

    </script>
</body>
</html>