一般涉及到电商的都会涉及到倒计时,比如下单后在30min中付款,预售商品倒计时开始,秒杀倒计时等等,都需要显示倒计时作为提示,下面是一个简单的实现。
html部分:
<div id="remainTime" style="font-size:12px;font-weight:600;color:#FF5722;></div>
JavaScript部分
<script>
//支付剩余时间倒计时
$(function(orderDate){ //orderDate是订单生效时间,后台的Date类型传到前端成了毫秒
var now=new Date();
var end=new Date(orderDate+30*60*1000); //提交订单的时间+30min就是订单失效时间,后台Date传过来变成了毫秒
/*两个时间相减,得到的是毫秒ms,变成秒*/
var result=Math.floor(end-now)/1000; //result= 30*60s;
var interval=setInterval(sub,1000); //定时器 调度对象
/*封装减1秒的函数*/
function sub(){
if (result>1) {
result = result - 1;
var second = Math.floor(result % 60); // 计算秒 ,取余
var minite = Math.floor((result / 60) % 60); //计算分 ,换算有多少分,取余,余出多少秒
//var hour = Math.floor(result/1000/60/60%24); //计算小时,这里最长只有30min,用不着
//var day = Math.floor(result/1000/60/60/24); //计算天,这里最长只有30min,用不着
$("#remainTime").html("支付剩余时间:" + minite + "分" + second + "秒");
} else{
//这里可以添加倒计时结束后需要执行的事件
alert("未在规定时间内支付,订单已失效!");
window.clearInterval(interval);
//TODO 订单失效后的一些列操作:更改订单状态的同时回库存
}
};
});
</script>
效果:
30min到了之后: