页面结构
<ul id="list-box">
<li class="flex">
<div class="img-box align-center">
<a href="">
<img src=""/>
</a>
</div>
<div class="text cell">
<div class="flex"><span class="name cell ect">优乐拍套餐一</span><span class="price">¥248.00</span></div>
<div class="flex"><span class="describe cell ect">周期:30天 利息10%</span><span class="num">X1</span></div>
<div class="flex"><span class="time cell ect" data-time="1542866820123">剩余时间:30天15小时</span></div>
<div class="flex"><span class="trustee-btn">领取收益</span></div>
</div>
</li>
<li class="flex">
<div class="img-box align-center">
<a href="">
<img src=""/>
</a>
</div>
<div class="text cell">
<div class="flex"><span class="name cell ect">优乐拍套餐一</span><span class="price">¥248.00</span></div>
<div class="flex"><span class="describe cell ect">周期:30天 利息10%</span><span class="num">X1</span></div>
<div class="flex"><span class="time cell ect" data-time="1540260060123">剩余时间:30天15小时</span></div>
<div class="flex"><span class="trustee-btn">领取收益</span></div>
</div>
</li>
</ul>
JS代码 不依赖JQ
var box=document.getElementById('list-box');
var list=box.querySelectorAll('li');
var listTime=box.querySelectorAll('.time');
var rusteeBtn=box.querySelectorAll('.trustee-btn');
for(var i=0;i<list.length;i++){
var time=listTime[i].getAttribute('data-time');
var times=setTime((time)*1);
toTime(listTime[i],times,rusteeBtn[i]);
}
function setTime(time){
var date = new Date(time);
Y = date.getFullYear() + '-';
M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
D = date.getDate() + ' ';
h = date.getHours() + ':';
m = date.getMinutes() + ':';
s = date.getSeconds();
return (Y+M+D+h+m+s)
}
function addNum(num){
if(num<10){
return '0'+num;
}
else{
return num;
}
};
function toTime(obj,wDays,btn){
var time=null;
time=setInterval(function(){
var nowDate = new Date();
var newDate = new Date(wDays);
var disTime = newDate.getTime() - nowDate.getTime();
if(disTime <= 0){
clearInterval(time);
obj.innerHTML ='到期请领取收益';
btn.classList.add('red');
}else{
var cha = Math.ceil((newDate.getTime()-nowDate.getTime())/1000);
var iDays = Math.floor(cha/3600/24);
var iHours = addNum( Math.floor(cha/3600%24) );
var iMins = addNum( Math.floor(cha/60%60) );
var iSec = addNum( Math.ceil(cha%60) );
obj.innerHTML ='剩余时间:'+iDays+'天'+iHours+'小时'+iMins+'分'+iSec+'秒';
}
},100);
};