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

2024年5月19日 116次阅读 来源: JonsonXu

今天在做一个付出界面倒计时功用时遇到以下题目：
点击提交定单跳转到确认定单（付出）页面，在顶部有一个倒计时，与此同时，接口返回有建立定单时候字段，根据此字段完成倒计时

完成思绪：

  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
    原文作者：JonsonXu
    原文地址: https://segmentfault.com/a/1190000014243170
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞