倒數計時（天、時、分、秒）

R妹發表於2018-08-28
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>倒數計時</title>
        <style type="text/css">
            .tl_countDown{ text-align: center; margin-top: 100px; overflow: hidden; }
            .tl_countDown span{ float: left; margin-right: 5px;}
            .tl_countDown i{ float: left; margin-right: 16px; text-decoration: none; font-style: normal;}
        </style>
        <script type="text/javascript">
            
            var now_seconds = new Date().getTime();//當前時間（秒）
                
            var finish_seconds = now_seconds + (28.62*60*60); //結束時間（秒）

            var active_seconds = finish_seconds - now_seconds; //活動時間（秒）

            function countDown() { 
                 
                var day = parseInt( active_seconds / (24*60*60) );  //活動天數

                if(day < 10){
                    day = '0' + day;
                }
                    
                var  day_residue = active_seconds % (24*60*60);
                    
                var hour = parseInt( day_residue / (60*60) );  //活動小時

                if(hour < 10){
                    hour = '0' + hour;
                }
                    
                var  hour_residue = day_residue % (60*60); 
                     
                var minute = parseInt( hour_residue / 60 ); //活動分

                if(minute < 10){
                    minute = '0' + minute;
                }
                    
                var second =  hour_residue % 60 //活動秒

                if(second < 10){
                    second = '0' + second;
                }

                active_seconds --;

                document.getElementById("second").innerHTML = second;
                document.getElementById("minute").innerHTML = minute;
                document.getElementById("hour").innerHTML = hour;
                document.getElementById("day").innerHTML = day;
                if (active_seconds < 0) {
                    return;
                }

                setTimeout(countDown, 1000);

            }
               

        </script>
    </head>
    <body onload="countDown()">
        <div class="tl_countDown">
            <span id="day">01</span>
            <i>天</i>
            <span id="hour">20</span>
            <i>時</i>
            <span id="minute">30</span>
            <i>分</i>
            <span id="second">01</span>
            <i>秒</i>        
        </div>    
    </body>
</html>

 

相關文章