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

malakashi 发布于2019-08-22 16:07 / 1941人阅读

摘要：转化为一个数值，然后加上倒计时时间秒，得到，然后获取当前时间，用减去当前时间，得到剩余时间，然后通过逐个算出还剩几分几秒。上代码分秒知识总结逐个算出分秒，计时器，每隔毫秒执行

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

实现思路：

将后台获取的时间使用vuex储存，调用：self.$store.state.subOrder.created_at获取到

将后台获取的时间使用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

GPU云服务器云服务器剩余时间倒计时功能倒计时按钮功能一个好的防火墙应具备哪些功能

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/94077.html

js倒计时小插件－－CountDown.js

摘要：刚写的开源小插件，在这里宣传下地址欢迎吐槽一个用来实现简单页面倒计时的轻量级工具根据要计时的秒数打开一个显示剩余时间的倒计时参数放置倒计时的元素要计时的秒数用于给倒计时设置标记可以给多个倒计时设置同一个标记分割时分秒的分割符倒计时结束时执行刚写的开源小插件，在这里宣传下 ^_^ github地址：https://github.com/flypie2/Co... 欢迎吐槽 ^_^ Co...

mdluo 2019-08-22 10:34 评论0 收藏0
微信公众号，实现倒计时

摘要：在微信公众号开发过程中要实现倒计时的一个功能。原因是解决方案订单生成的时候我们记录下这个时间为，时间间隔为分钟内需要付款，为，为现在的时间。那么倒计时时间，代码如下支付超时订单已提交，请在分秒内完成支付在微信公众号开发过程中要实现倒计时的一个功能。效果如下： showImg(https://segmentfault.com/img/bVbelsn?w=343&h=71); 开始的思路...

sarva 2019-08-26 12:09 评论0 收藏0
时间戳转换成时间日期格式及去重

摘要：在项目中做的一些站点会涉及时间格式的转换，比如，优惠券的有效期，或者资讯类文章的发表时间等，因从后台传过来的时间是时间戳，需要进行转换，所以在这里进行总结记录下以及去重的处理将时间戳转换成时间日期的形式时间为毫秒数时毫秒数转换成时间格式先乘在项目中做的一些站点会涉及时间格式的转换，比如，优惠券的有效期，或者资讯类文章的发表时间等，因从后台传过来的时间是时间戳，需要进行转换，所以在这里...

tianyu 2019-08-26 12:16 评论0 收藏0