1、有一个需求:在一个页面中,信息都是从服务器异步加载到web前端的,信息渲染到前端是一个列表,每个列都有一个倒计时
2、难题:怎么给每个列绑定同一个函数呢
3、解决方法:在循环拼接列表的时候,给每个列一个唯一的id,在循环中调用时,把唯一的id传进去,这样就可以给每个列绑定同一个函数,并执行不同的倒计时时间戳
代码:
$.ajax({
url: url,
success: function(result){
$("#collage_number").html(result.msg.collage_number)
var html="",arr=result.msg.collage_result;//arr是请求到的数组信息
for(var i =0;i<arr.length;i++){
moreHtml+="<li class='clear'><img class='lt avartar' src='/assets/images/statics/person.png'><div class='lt'> <span>"+arr[i].customer_fullname+"</span><p class='pindanDownTime' data-start='"+arr[i].begin_time+"' data- end='"+arr[i].end_time+"'>Remaining time <span class='pindanHour"+arr[i].id+"'>23</span>:<span class='pindanMin"+arr[i].id+"'>59</span>:<span class='pindanSec"+arr[i].id+"'>00<span></p><p>Still need <span class='pindan_num'>"+arr[i].need_people+"</span> People to join in</p></div><a class='rt join_btn' data- num='"+arr[i].need_people+"' data-id='"+arr[i].id+"' data-start='"+arr[i].begin_time+"' data-end='"+arr[i].end_time+"' data- hour='pindanHour"+arr[i].id+"' data-min='pindanMin"+arr[i].id+"' data-sec='pindanSec"+arr[i].id+"'>Join To Buy</a></li>";
time_down(arr[i].id,arr[i].begin_time,arr[i].end_time,'pindanHour'+arr[i].id,'pindanMin'+arr[i].id,'pindanSec'+arr[i].id,)//调用倒计时函数
}
$("#List").html(html)
}
倒计时函数代码:
function time_down(id,start,end,Hour,Min,Sec){
var nowTime=(new Date().getTime()/1000).toFixed();
var intDiff = end-nowTime;//倒计时总秒数量
function timer(intDiff){
var interval = setInterval(function(){
var day=0,hour=0,minute=0,second=0;
if(intDiff > 0){
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}else {
clearInterval(interval);
interval = null;
getTime();
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('.'+Hour).html(hour);
$('.'+Min).html(minute);
$('.'+Sec).html(second);//'pindanHour'+arr[i].id,'pindanMin'+arr[i].id,'pindanSec'根据传入的参数,id不一样,class不一样,就可以绑定动态的class跟内容(倒计时时间不一样)
intDiff--;
}, 1000);
}
timer(intDiff);
}
}
},
dataType:"json"
});