项目中待收货订单中需要展示倒计时,根据后台返回的收货时间,设置倒计时显示在页面上。
效果图:
首先我用的是setInterval,需要传递两个参数。第一个参数是到期时间,第二个参数遍历的索引。
函数代码如下:
function countDown(endTime,i){
var time_start = new Date().getTime(); //设定当前时间
var time_end = new Date(endTime).getTime(); //设定目标时间
// 计算时间差
var time_distance = time_end - time_start;
// 天
var int_day = Math.floor(time_distance/86400000);
time_distance -= int_day * 86400000;
// 时
var int_hour = Math.floor(time_distance/3600000);
time_distance -= int_hour * 3600000;
// 分
var int_minute = Math.floor(time_distance/60000);
time_distance -= int_minute * 60000;
// 秒
var int_second = Math.floor(time_distance/1000);
// 时分秒为单数时、前面加零
if(int_day < 10 && int_day > 0){
int_day = "0" + int_day;
}else if(int_day < 0){ // 日期已过
$("#tab3").find(".bigbox").eq(i).find("div.countDownRow>p").html("已自动签收");
}
if(int_hour < 10){
int_hour = "0" + int_hour;
}
if(int_minute < 10){
int_minute = "0" + int_minute;
}
if(int_second < 10){
int_second = "0" + int_second;
}
if(int_day==0 && int_hour==0 && int_minute ==0 && int_second==0){
$("#tab3").find(".bigbox").eq(i).find("div.countDownRow>p").html("已自动签收");
}
// 显示时间
var result = int_day+"天"+int_hour+"时"+int_minute+"分"+int_second+"秒";
$("#tab3").find(".bigbox").eq(i).find("span.countDown").html(result);
// 设置定时器
// setTimeout("countDown('"+ endTime + "','" + i +"')",1000); // 这里也可以用setTimeout 在函数体内实现循环
}
调用函数代码如下:
setInterval("countDown('"+receivingEndTime+"','"+i+"')",1000); // 调用倒计时函数
注意调用函数需要传递参数的时候,需要在参数外加上单引号
如果不加上单引号,如:setInterval("countDown("+receivingEndTime+","+i+")",1000)
会报错