zoukankan      html  css  js  c++  java
  • 倒计时3

    <!DOCTYPE html>
    <html lang="en">
    
    <head>
        <meta charset="UTF-8">
        <title>倒计时4不用引入插件</title>
        <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
        /*倒计时 模块*/
    
        .count_down {
            overflow: hidden;
            background: #fff;
            padding-bottom: 30px;
        }
    
        .cd_words {
            color: #fff;
            font-size: 18px;
            text-align: center;
            width: 100%;
            text-shadow: 0 0 2px #000;
            padding-top: 10px;
        }
    
        .cd_date {
            display: inline-block;
            color: #fff;
            width: 100%;
            box-sizing: border-box;
            padding-top: 5px;
            text-align: center
        }
    
        .cd_day {
            color: #f7cf93;
            width: 100%;
            text-align: center;
        }
    
        .cd_day span {
            font-size: 30px;
            color: #fd9800;
            font-weight: 700;
            padding: 0 5px;
            display: inline-block;
        }
    
        .cd_bottom {
            font-size: 14px;
            background-color: #c51216;
            border-radius: 5px;
            width: 200px;
            height: 40px;
            line-height: 40px;
            margin: 10px auto;
            color: #fff;
            text-align: center;
        }
    
        .cd_time {
            display: inline-block;
            vertical-align: top;
        }
    
        .cd_time span {
            background-color: #fff;
            border-radius: 3px;
            color: #6e4200;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            display: inline-block;
            font-size: 16px;
            margin: 5px 3px 0;
            vertical-align: top;
        }
        </style>
    </head>
    
    <body>
        <div class="count_down">
            <p class="cd_day ">还有<span id="t_d ">44</span></p>
            <div class="cd_bottom ">
                <div class="cd_time "><span id="t_h ">00时</span></div>
                <div class="cd_time "><span id="t_m ">00分</span></div>
                <div class="cd_time "><span id="t_s ">00秒</span></div>
            </div>
        </div>
        <script type="text/javascript ">
        function GetRTime() {
            var EndTime = new Date('2018/03/20 00:00:00');
            var NowTime = new Date();
            var t = EndTime.getTime() - NowTime.getTime();
            //判断活动结束后时间显示为0
            if (t > 0) {
                var d = Math.floor(t / 1000 / 60 / 60 / 24);
                var h = Math.floor(t / 1000 / 60 / 60 % 24);
                var m = Math.floor(t / 1000 / 60 % 60);
                var s = Math.floor(t / 1000 % 60);
                // if(d<10){
                //  d = '0'+d;
                // }else if(h<10){
                //  h='0'+h;
                // }else if(s<10){
                //  s='0'+s;
                // }
    
                document.getElementById("t_d ").innerHTML = d;
                document.getElementById("t_h ").innerHTML = h;
                document.getElementById("t_m ").innerHTML = m;
                document.getElementById("t_s ").innerHTML = s;
    
            }
    
        }
        setInterval(GetRTime, 0);
        </script>
    </body>
    
    </html>
  • 相关阅读:
    sqlite3 增删改查
    Charles 修改接口返回值
    矫正Django 时间不正确
    unittest 使用 HTMLTestRunner 生成测试报告
    unittest 使用例子
    pyppeteer
    linux源码编译-安装timescaledb数据库(中标麒麟+龙芯CPU) (转载)
    不会用java api对kafka topic进行创建、查询和删除,你也太out了(建议收藏)(转载)
    django 学习(转载)
    Docker 启动镜像(转载)
  • 原文地址:https://www.cnblogs.com/huanghuali/p/8431787.html
Copyright © 2011-2022 走看看