zoukankan      html  css  js  c++  java
  • 一个付款剩余时间倒计时的功能

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

    实现思路:

    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

  • 相关阅读:
    ThinkPHP5.1 行为与钩子
    PHP 商品秒杀抢购业务流程
    MySQL 读写分离
    Redis 管道
    Redis 事务
    Redis 锁机制
    ThinkPHP 实现队列
    MySQL 存储引擎
    分布式唯一ID分配问题
    Lightscape
  • 原文地址:https://www.cnblogs.com/lalalagq/p/9919405.html
Copyright © 2011-2022 走看看