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

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

实现思路:

  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
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值