js支付倒计时

1,785 阅读1分钟

整体思路:先获取时间间隔的秒数 之后把相差的秒数转为即时的时分秒

如果是后台返回了距离当前的倒计时 时分秒 只需要转为秒数计算  
如果没有返回则根据日期 获取相差的毫秒数 在转为秒数

首先获取当前展示的倒计时时间

getData(){
  post('Order/PayOrderDetails',{
    OrderNo:this.OrderNo
  }).then(res=>{
    this.data = res.data
    console.log(res,"代收的数据")
    this.TotalPrice = res.data.TotalPrice
    this.remainTimeHours = this.resize(res.data.Hours) //1
    this.remainTimeMinutes = this.resize(res.data.Minutes) //56
    this.remainTimeSeconds = this.resize(res.data.Seconds)//36
    this.computedLastPayTime()
  })
},

根据相差的秒数 转为时分秒

computedLastPayTime() { let _hour = this.remainTimeHours6060 let _minute = this.remainTimeMinutes*60 let _seconds = this.remainTimeSeconds this.lastTime = _hour + _minute + _seconds //秒数

  var interval=setInterval(()=>{
    if (this.lastTime>1) {
        this.lastTime = this.lastTime - 1;
        var second = Math.floor(this.lastTime % 60);     // 计算秒 ,取余
        var minite = Math.floor((this.lastTime / 60) % 60); //计算分 ,换算有多少分,取余,余出多少秒
        var hour = Math.floor(this.lastTime/60/60%24);  //计算小时,这里最长只有30min,用不着
        //var day = Math.floor(this.lastTime/60/60/24);   //计算天,这里最长只有30min,用不着
        // $("#remainTime").html("支付剩余时间:" + minite + "分" + second + "秒");
        
        this.remainTimeHours = this.resize(hour)
        this.remainTimeMinutes = this.resize(minite)
        this.remainTimeSeconds = this.resize(second)
    } else{
        //这里可以添加倒计时结束后需要执行的事件
        // alert("未在规定时间内支付,订单已失效!");
        clearInterval(interval);  
        //TODO 订单失效后的一些列操作:更改订单状态的同时回库存
    }
  },1000); //定时器 调度对象
    
},
resize(num){
  return num<10?`0${num}`:num
}