Countdown to achieve js

effect:

 

html:


            
            
            
                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 new a Date (end.replace (G //, "/")) getTime ();. // compatible with iPhone IOS 
                Start = new new a Date (start.replace (G //, "/ " .)) the getTime (); 
                now = new new a Date () the getTime ();.
                 IF (now> = start) { // started 
                    rightTime = end - now; 
                    title = '<span> end distance: </ span> ' ; 
                } the else { // does not start 
                    title =' <p> is not started </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>

 

Guess you like

Origin www.cnblogs.com/linjiangxian/p/11609198.html