小程序支付倒计时demo

  1. 时间格式化
    const formatTime = (date) => {
      const year = date.getFullYear()
      const month = date.getMonth() + 1
      const day = date.getDate()
      const hour = date.getHours()
      const minute = date.getMinutes()
      const second = date.getSeconds()
    
      return [year, month, day].map(formatNumber).join('/') + ' ' + [hour, minute, second].map(formatNumber).join(':')
    }
    
    const formatNumber = (n) => {
      n = n.toString()
      return n[1] ? n : '0' + n
    }
    
    
    module.exports = {
      formatTime: formatTime
    }
    

      

  2. 倒计时页面js
    1.引入格式化js
    import { formatTime } from '../../utils/util.js';
    
    2.data: {
        clock: ''  // wxml页面显示
      }
    
    3.触发倒计时时机,以onLoad为例:
        onLoad() { this.countDown() }
    
    4.倒计时函数
      countDown: function () {
        let that = this;
        // 1598274000000 == 2020-08-24 21:00:00;3480000ms == 58min == 3600000ms - 总支付时间
        let countDownNum = 1598274000000 - 2700000;
        let saveCountDownNum = 1598274000000 - 2700000;  // 保存初始时间
        that.setData({
          timer: setInterval(() => {
            countDownNum -= 1000;
            that.setData({
              clock: formatTime(new Date(countDownNum)).slice(14)  // 只保留分和秒
            })
            // 总支付时间:经过120000ms == 2min支付截至
            if (String(saveCountDownNum) - String(countDownNum) == 900000) {
              clearInterval(that.data.timer);
              wx.navigateBack({});
            }
          }, 1000)
        })
      }

posted @ 2020-08-25 10:03  _JZYU  阅读(303)  评论(0编辑  收藏  举报