• 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"));
  • 相关阅读:
    订单的处理原理及代码实现.
    购物车的原理及实现.(仿京东实现原理)
    集群下session共享问题的解决方案.
    页面静态化技术Freemarker技术的介绍及使用实例.
    ActiveMQ的介绍及使用实例.
    获取Android运行apk的packagename 和activityname
    linux extundelete 删除文件恢复
    jenkins 批量修改配置文件
    jenkins构建自动执行jmeter 发送http请求,中间有替换参数路径
    jenkins 执行ssh 远程linux执行命令
  • 原文地址:https://www.cnblogs.com/li-sir/p/9017968.html
Copyright © 2020-2023  润新知