一、小程序倒计时是非常普遍用的,比如在订单支支付的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)
}
})
}
})
}