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