时分秒倒计时实现

最新推荐文章于 2024-05-27 22:58:54 发布

飞扬_柳絮

最新推荐文章于 2024-05-27 22:58:54 发布

阅读量538

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/tjcjava/article/details/78131879

版权

JavaScript 专栏收录该内容

31 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
        <title>时分秒倒计时</title>
        <style>
            *{padding: 0;margin: 0;}
            html,body{width:100%;height:100%;}
            #wrap{
                width: 100%;
                height: 100%;
            }
            .timer{
                position: absolute;
                top: 50%;
                left: 45%;
                transform: translate(-45%,-50%);
                -webkit-transform: translate(-45%, -50%); 
            }
        </style>
    </head>
    <body>
        <div id="wrap">
            <div class="timer">  
                <span id="_d">0</span>
                <span class="txt">天</span>
                <span id="hour_0">0</span>
                <span id="hour_1">0</span> 
                <span class="txt">时</span>
                <span id="minute_0">0</span>
                <span id="minute_1">0</span> 
                <span class="txt">分</span>
                <span id="second_0">0</span>  
                <span id="second_1">0</span>
                <span class="txt">秒</span>
            </div> 
        </div>
        <script type="text/javascript" src="//s.thsi.cn/js/m/common/zepto.js"></script>
        <script>
            $(function(){
               setInterval(function(){showCountDown();},1000);
            });
            /*setHours：设置指定的时间的小时字段,返回值毫秒数
              endTime：new Date 中国标准时间
            */
            var endTime = new Date(new Date().setHours(24,0,0,0));
            function showCountDown(){
                var leftTime = (endTime.getTime() - new Date().getTime()) / 1000;
                var left_days = parseInt(leftTime / 60 / 60 / 24,10); //剩余天数
                var left_hours = parseInt(leftTime / 60 / 60 % 24,10);
                if(left_hours < 10){
                    hour_0 = 0; hour_1 = left_hours;
                }else{
                    hour_0 = parseInt(left_hours / 10);
                    hour_1 = parseInt(left_hours % 10);
                }
                var left_minutes = parseInt(leftTime / 60 % 60,10);
                if(left_minutes < 10){
                    minute_0 = 0; minute_1 = left_minutes;
                }else{
                   minute_0 = parseInt(left_minutes / 10);
                   minute_1 = parseInt(left_minutes % 10);
                }
                var left_seconds = parseInt(leftTime % 60,10);
                if(left_seconds < 10){
                    second_0 = 0; second_1 = left_seconds;
                }else{
                   second_0 = parseInt(left_seconds / 10);
                   second_1 = parseInt(left_seconds % 10);
                }
                $('#_d').html(left_days);
                $('#hour_0').html(hour_0);
                $('#hour_1').html(hour_1);
                $('#minute_0').html(minute_0);
                $('#minute_1').html(minute_1);
                $('#second_0').html(second_0);
                $('#second_1').html(second_1);
            }
        </script>
    </body>
</html>

飞扬_柳絮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
时分秒倒计时实现

<!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta name="viewport" content="initial-scale
复制链接

扫一扫