倒计时（天、时、分、秒）

最新推荐文章于 2022-11-14 14:42:36 发布

芒种017

最新推荐文章于 2022-11-14 14:42:36 发布

阅读量665

点赞数 1

分类专栏：前端 css htm 文章标签：计时倒计时活动倒计时

本文链接：https://blog.csdn.net/weixin_41848880/article/details/82144111

版权

前端同时被 3 个专栏收录

18 篇文章 1 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

htm

11 篇文章 0 订阅

订阅专栏

<!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>