电商平台倒计时效果

点击购买商品后，一般会有30分钟的到记时让用户确认支付，如果用户没有支付则释放商品的从新回库上架。这是电商平台常用的处理商品销售和库存的方法。需要注意的是，使用这个效果时间的拉取一定不可能是客户端的系统时间，而是服务存储的数据时间，为什么？解释一下，如果用户的客户端时间改了，不准确，这个效果基本是没用的。也就是说，制作这个倒计时效果，时间数据是死的，今天试着改了一个到记时的js，基本实现自己想要的效果，这里分享出来。

<meta charset="utf-8">
<script src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<span class="timebox">23:21:11</span> //第一次将服务器时间显示在这里
<br/>
<span class="timebox">23:25:12</span>
<br/>
<span class="timebox">23:15:13</span>
<br/>
<span class="timebox">23:35:14</span>
<script type="text/javascript">
 

 
$(function() {
 var oTime = $(".timebox");
 oTime.each(function() {
 var that = $(this);
 var ts = that.text().split(":", 3);
 var tnums = [parseInt(ts[0]), parseInt(ts[1]), parseInt(ts[2])];
 setInterval(function() {
 tnums = getNextTimeNumber(tnums[0], tnums[1], tnums[2]);
 showNewTime(tnums[0], tnums[1], tnums[2])
 }, 1000);

 function showNewTime(h, m, s) {
 var timeStr = ("0" + m.toString()).substr(-2) + ":" + ("0" + s.toString()).substr(-2);
 that.text(timeStr)
 }
 function getNextTimeNumber(h, m, s) {
 if (--s == 00 && m !="00") {
 s = 60; 
 }
 if (s == 60 ) { 
 if (--m == -1) {
 m = new String(00);
 //
 }
 }
 if(m=="00" && s==-1){
 s = new String(00);
 //that.parent().hide()
 }
 return [h, m, s]
 }
 })
});
 
</script>