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

需求场景

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

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

实现代码

$(document).ready(function () {

var addTimer = function () {

var list = [], interval;

return function (id, closetime) {

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

var now = new Date();

var time = (deadline.valueOf() - now.valueOf())/1000 ;

if (!interval)

interval = setInterval(go, 1000);

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

}

function go() {

for (var i = 0; i < list.length; i++) {

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

if(html){

list[i].ele.innerHTML = html;

}else{

window.location.reload();

}

if (!list[i].time)

list.splice(i--, 1);

}

}

function getTimerString(time){

if(time>0){

var days = parseInt(time / (60 * 60 * 24));

var hours = parseInt((time % (60 * 60 * 24)) / (60 * 60));

var minutes = parseInt((time % (60 * 60)) / (60));

var seconds = parseInt(time % 60);

var html = "订单将于" ;

if(days>0) { html += days + ' 天';}

if(hours>0) { html += hours + ' 小时';}

if(minutes>0) { html += minutes + ' 分钟';}

if(seconds>0) { html += seconds + ' 秒';}

html+="后失效，请尽快完成支付."

return html;

}else{

return '';

}

};

} ();

addTimer('time-1',3600)

addTimer('time-2',1200)

});

closetime参数为订单关闭的时间；

deadline时间转化是为了避免某些设备的时间问题；