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 '';
}
};
} ();
【html做一个倒计时页面,JS实现同一个html页面多个倒计时】addTimer('time-1',3600)
addTimer('time-2',1200)
});
closetime参数为订单关闭的时间；
deadline时间转化是为了避免某些设备的时间问题；
推荐阅读
- 一个注解@Recover搞定丑陋的循环重试代码
- 算法|Acwing1230. K倍区间
- 一个服务器轻松存储上亿数据，TDengine 在北京智能建筑边缘存储的应用
- 大数据自动管理，24 小时服务无间断，StarRocks 如何做到（）
- 如何构建一个流量无损的在线应用架构 | 专题尾篇
- 如何做好企业内部知识管理工作（）
- 大裁员下，程序员如何做副业（）
- 命保住了！五年时间，我们也搞了一个技术中台
- 实时预览|一个作图预览软件
- TeslaMate（一个开源的特斯拉车主神器）