zoukankan      html  css  js  c++  java
  • jquery页面多个倒计时效果

    <div class="timeBox" data-times="2019/06/30,23:59:59"> 
        距结束 <span class="time date"> 00 </span><span class="time hour"> 00 </span> : 
        <span class="time minutes"> 00 </span> : 
        <span class="time seconds"> 00 </span> 
    </div>
    <div class="timeBox" data-times="2017/07/25,20:20:20"> 
        距结束 <span class="time date"> 00 </span><span class="time hour"> 00 </span> : 
        <span class="time minutes"> 00 </span> : 
        <span class="time seconds"> 00 </span> 
    </div>
    <div class="timeBox" data-times="2018/05/10,18:30:00"> 
        距结束 <span class="time date"> 00 </span><span class="time hour"> 00 </span> : 
        <span class="time minutes"> 00 </span> : 
        <span class="time seconds"> 00 </span> 
    </div>
    <div class="timeBox2" data-times="2018/05/10,20:20:20"> 
        距结束 <span class="time hour"> 00 </span> : 
        <span class="time minutes"> 00 </span> : 
        <span class="time seconds"> 00 </span> 
    </div>
    * {
        padding:0;
        margin:0;
    }
    body {
        font-size:16px;
    }
    .timeBox {
        color:#6dbec5;
        margin:10px auto;
    }
    .timeBox2 {
        color:#12ae53;
        margin:10px auto;
    }
    .time {
        border:1px solid #6dbec5;
        width:40px;
        height:20px;
        text-align:center;
        line-height:20px;
        display:inline-block;
    }
    var endtime,nowtime,lefttime,d,h,m,s;
    var sh;
    $.fn.countDown = function(_boolean,_this){
        var sh = [];
        // var _this = $(this);
        _this.each(function(index, el){
    
        var thisObj = $(this);
        sh[index]=setInterval(function(){
            var times = thisObj.data("times");//获得timeBox的data值,即结束时间
            endtime = new Date(times);//把data值转换成时间
            nowtime = new Date();//获得当前时间
            lefttime=parseInt((endtime.getTime()-nowtime.getTime())/1000); //结束时间-当前时间得到毫秒数,再除以1000得到两个时间相差的秒数
            if(_boolean){
                d=parseInt(lefttime/3600/24);
                h=parseInt((lefttime/3600)%24);
            }else{
                d=parseInt(lefttime/3600/24)*24;
                h=parseInt((lefttime/3600)%24)+d;
            }
    
            m=parseInt((lefttime/60)%60);
            s=parseInt(lefttime%60);
            if(endtime.getTime() <= nowtime.getTime()){
                d = h = m = s = "0";
                clearInterval(sh[index]);
            }
            // 三目运算符
            d = d < 10 ? "0"+ d : d;
            h = h < 10 ? "0"+ h : h;
            m = m < 10 ? "0"+ m : m;
            s = s < 10 ? "0"+ s : s;
    
            if(_boolean){
                thisObj.find(".date").text(d);
            }
    
            thisObj.find(".hour").text(h);
            thisObj.find(".minutes").text(m);
            thisObj.find(".seconds").text(s);
    
            if(lefttime<=0){
                //d = h = m = s = "00";
                //thisObj.find('span').hide();
                thisObj.html("<b>活动结束</b>");
                clearInterval(sh[index]);
            }
        },1000);
        });
    }
    
    
    // 调用
    
    $(".timeBox").countDown(true,$(".timeBox"));
    $(".timeBox2").countDown(true,$(".timeBox2"));
  • 相关阅读:
    Self Host 使用 Exceptionless 实时监控程序运行日志服务
    Asp.Net Core 集成 Hangfire 配置使用 Redis 存储
    阿里云负载不支持 WebSocket 协议与 WSS 和 Nginx 配置问题
    使用 Scrapyd 管理部署 Scrapy 的一些问题
    Ubuntu 安装配置最新版 PostgreSQL
    Anaconda 科学计算环境与包的管理
    Linux 部署 ASP.NET Core 的一些问题记录
    关于 IdentityServer 部署到生产环境相关问题踩坑记录
    推荐一个 MYSQL 的命令行的客户端 MYCLI
    可能是 2017 最全的机器学习开源项目列表
  • 原文地址:https://www.cnblogs.com/li-sir/p/9017968.html
Copyright © 2011-2022 走看看