一个付款剩余时间倒计时的功能

Posted 2020-08-13

今天在做一个支付界面倒计时功能时碰到如下问题：
点击提交订单跳转到确认订单（支付）页面，在顶部有一个倒计时，与此同时，接口返回有创建订单时间字段，根据此字段实现倒计时

实现思路：

1. 将后台获取的时间使用vuex储存，调用：self.$store.state.subOrder.created_at获取到
2. 将后台获取的时间使用Date.parse方法（此方法可以返回 1970/1/1 午夜距离该日期时间的毫秒数。）转化为一个int数值，然后加上倒计时时间（900秒），得到endTime，然后获取当前时间，用endTiem减去当前时间，得到剩余时间，然后通过Math.floor逐个算出还剩几分几秒。

上代码：

computedLastPayTime() {
      let self = this;
      setInterval(function() {
        let createTime = Date.parse(self.$store.state.subOrder.created_at) / 1000;
        let endTime = createTime + 900;
        let clientTime = Date.parse(new Date()) / 1000;
        let lastTime = endTime - clientTime;
        let int_minute;
        if(lastTime > 0){
          int_minute = Math.floor(lastTime/60);
          lastTime -= int_minute * 60;
          self.lastPayTime = int_minute+'分'+ lastTime +'秒'
        } else {

        }
      },1000); 
    }

知识总结：

• let clientTime = Date.parse(new Date()) / 1000;
• int_minute = Math.floor(lastTime/60);
lastTime -= int_minute * 60;逐个算出分、秒
• setInterval（code，millisec）计时器，每隔millisec毫秒执行code

原文地址：https://segmentfault.com/a/1190000014243170