小程序-倒计时

一、小程序倒计时是非常普遍用的，比如在订单支支付的15分钟倒计时


二、代码实例
js文件

// pages/shower/shower.js
var num = 900//计时  
var strH = ''  
var strM = ''  
var strS = ''  
var timer = '' 
Page({
  data: {
  timeText:'',
  paytime:''
  },
  onLoad: function (options) {
     var paytime=wx.getStorageSync('paytime');//支付时间
     that.setData({
         paytime:paytime
     })
     var myDate =new Date();//获取系统当前时间     var mytime=myDate.getTime();//获取当前时间(从1970.1.1开始的毫秒数)     
     //订单开始时间（毫秒化）     
     //console.log('获取到的时间。测试格式'+mytime);     
     paytime=paytime.replace(/-/g, '/');     
     var date =new Date(paytime);     
     //过期时间（毫秒化）     
     var logdata=date.getTime()+900*1000;     
     //现在和过期时间的时间差：剩余时间（过期时间-现在时间）    
      var remain=logdata-mytime;     
      console.log('获取到的时间差。测试格式'+remain);     
      //剩余时间（转化为秒）     
      var second=remain/1000;     
      console.log('获取到的时间为秒。测试格式'+second);     
      if(second>0){     
       num=second;      
       this.move()        
       //计时开始 后面的1000是毫秒 每1000毫秒跳一次 ，setInterval返回的是定时器编号       
       timer=setInterval(this.move,1000);       
       }else{       
       //已超时，订单失效，无需启用倒计时定时器     
      }
  },
  move(){           
  //时        
  strM =  this.zeroFill(''+parseInt(num/60%24),2)  //分      
  strS = this.zeroFill(''+parseInt(num%60),2)   //秒    
  var nown=strM+':'+strS    
  //赋值给text内容      
  this.setData({        
  timeText:nown      
  })       
  //当时间归零停止计时器      
  if (num == 0){          
  clearInterval(timer)          
  return      
  }       
  num--   
  //每秒递减    
  },   
   zeroFill(str, n){      
   //补零方法，str为数字字符串 n为需要的位数，不够补零      
   if  (str.length < n){        
   str = '0'+str      
   }      
   return str    
   }
})

wxml文件

<view wx:if="{{orderstatus==2}}">    
   <view> 请在15分钟内完成支付，剩余 
      <label class="dtime"> {{timeText}}</label>
   </view>  
</view>

注意：订单一般有多个未支付，也就是会有多个定时器（倒计时），这时就需要关闭定时器：在取消订单时候关闭、支付成功关闭、支付失败关闭、页面卸载关闭，在js文件：

/**   * 生命周期函数--监听页面卸载   */  
onUnload: function () {    
//关闭计时器(timer为计时器编号)    
  clearTimeout(timer);  
},
//取消订单  
cancel:function(){
 //关闭计时器(timer为计时器编号)    
  clearTimeout(timer); 
},
// 去支付  
topay:function(){
//此处省略一部分没涉及到的，就是在支付成功或者失败的时候都关闭一下定时器
 wx.requestPayment({            
 timeStamp: resd.data.Data.timeStamp,            
 nonceStr: resd.data.Data.nonceStr,            
 package: resd.data.Data.packAge,            
 signType: resd.data.Data.signType,            
 paySign: resd.data.Data.paySign,            
 success: function (res) {            
 // success              
 console.log(res);              
 wx.redirectTo({                
 url: '/pages/myOrder/myOrder',              
 });              
 //关闭计时器(timer为计时器编号)               
 clearTimeout(timer);            
 },            
 fail: function (res) {            
 // fail            
 console.log("用户取消支付：");            
 wx.redirectTo({              
 url: '/pages/myOrder/myOrder',            
 });            
 //关闭计时器(timer为计时器编号)            
 clearTimeout(timer);                        
 },            
 complete: function (red_conplete) {            
 // complete            
 //此接口是主动查询订单是否已支付            
 wx.request({              
 url: '接口URL',                
 method: 'GET',              
 header: {              
 'content-type': 'application/x-www-form-urlencoded',             
  },              
  dataType: 'json',             
   data: {                
   OrderPaySid: resd.data.Data.orderPaySid              
   },              
   success: function (res) {                
   console.log("调用了主动查询..."+res.data.Message+"   支付状态为:"+res.data.Status)              
   }              
   })            
   }            
   })
}