html做一个倒计时页面,JS实现同一个html页面多个倒计时

需求场景

在商城应用中&＃xff0c;要限制订单的有效期&＃xff0c;所以会做自动关闭订单的服务器端任务。

为了方便提醒用户及时支付&＃xff0c;需要在订单列表页展示倒计时。

实现代码

$(document).ready(function () {

var addTimer &＃61; function () {

var list &＃61; [], interval;

return function (id, closetime) {

var deadline &＃61; new Date(closetime.replace(new RegExp(/-/gm) ,"/"));

var now &＃61; new Date();

var time &＃61; (deadline.valueOf() - now.valueOf())/1000 ;

if (!interval)

interval &＃61; setInterval(go, 1000);

list.push({ ele: document.getElementById(id), time: time });

}

function go() {

for (var i &＃61; 0; i

var html &＃61; getTimerString(list[i].time ? list[i].time -&＃61; 1 : 0);

if(html){

list[i].ele.innerHTML &＃61; html;

}else{

window.location.reload();

}

if (!list[i].time)

list.splice(i--, 1);

}

}

function getTimerString(time){

if(time>0){

var days &＃61; parseInt(time / (60 * 60 * 24));

var hours &＃61; parseInt((time % (60 * 60 * 24)) / (60 * 60));

var minutes &＃61; parseInt((time % (60 * 60)) / (60));

var seconds &＃61; parseInt(time % 60);

var html &＃61; "订单将于" ;

if(days>0) { html &＃43;&＃61; days &＃43; &＃39; 天&＃39;;}

if(hours>0) { html &＃43;&＃61; hours &＃43; &＃39; 小时&＃39;;}

if(minutes>0) { html &＃43;&＃61; minutes &＃43; &＃39; 分钟&＃39;;}

if(seconds>0) { html &＃43;&＃61; seconds &＃43; &＃39; 秒&＃39;;}

html&＃43;&＃61;"后失效&＃xff0c;请尽快完成支付."

return html;

}else{

return &＃39;&＃39;;

}

};

} ();

addTimer(&＃39;time-1&＃39;,3600)

addTimer(&＃39;time-2&＃39;,1200)

});

closetime参数为订单关闭的时间&＃xff1b;

deadline时间转化是为了避免某些设备的时间问题&＃xff1b;