js 倒计时实现

效果：
html:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <title>倒计时</title>
        <script type="text/javascript" src="js/jquery.js"></script>
        <style>
            *{
                margin:0;
                padding:0;
            }
            
            p{
                margin:50px;
            }
            
            i{
                font-style:normal;
            }
            
            .countTime{
                color:red;
            }
        </style>
    </head>
    <body>
        <div>
            <p>开始时间：<span id="start_time"></span> - 结束时间：<span id="end_time"></span></p>
            <p class="countDown"></p>
        </div>
        <script type="text/javascript">
            $(document).ready(function() {
                window.start_time = '2019-09-29 12:00';
                window.end_time = '2019-10-07 12:00';
                $('#start_time').text(window.start_time);
                $('#end_time').text(window.end_time);
                setInterval(function() {
                    countDown();
                    var t = countDown().title;
                    $('.countDown').empty();
                    $('.countDown').append(t);
                }, 1000);
            })

            function countDown() {
                var end = window.end_time,
                    start = window.start_time,
                    string = '',
                    title = '',
                    now = 0,
                    rightTime = 0;
                end = new Date(end.replace(/-/g, "/")).getTime(); // 兼容IOS苹果手机
                start = new Date(start.replace(/-/g, "/")).getTime();
                now = new Date().getTime();
                if (now >= start) { // 已开始
                    rightTime = end - now;
                    title = '<span>距结束：</span>';
                } else { // 未开始
                    title = '<p>未开始</p>';
                }
                if (rightTime > 0) {
                    if (now >= start) {
                        var dd = Math.floor(rightTime / 1000 / 60 / 60 / 24);
                        var hh = Math.floor((rightTime / 1000 / 60 / 60) % 24);
                        var mm = Math.floor((rightTime / 1000 / 60) % 60);
                        var ss = Math.floor((rightTime / 1000) % 60);
                        if (dd < 10) {
                            dd = '0' + dd;
                        }
                        if (hh < 10) {
                            hh = '0' + hh;
                        }
                        if (mm < 10) {
                            mm = '0' + mm;
                        }
                        if (ss < 10) {
                            ss = '0' + ss;
                        }
                        string = "<i><span class='countTime'>" + dd +
                            "</span>天<span class='countTime'>" + hh +
                            "</span>时<span class='countTime'>" + mm +
                            "</span>分<span class='countTime'>" + ss +
                            "</span>秒</i>";
                        title = title + string;
                    }
                } else {
                    title = '<p>已结束</p>';
                }
                return {
                    "title": title
                }

            }
        </script>
    </body>
</html>
猜你喜欢
