1. 程式人生 > >jquery頁面多個倒計時效果

jquery頁面多個倒計時效果

bsp width data jquer -a second ext time() size

<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"));

jquery頁面多個倒計時效果