微信小程序预约时间显示倒计时

 1. 已经预约好未来的某一时间,到当前时间的倒计时。

js文件中:

/**
   * 倒计时
   * 
   */
  count_down: function (e) {
    // 预约时间减去当前时间
    var totalSecond = this.data.orderInfo.applyDeadLineTime/1000 - Date.parse(new Date()) / 1000;
    
    var interval = setInterval(function () {
      // 秒数
      var second = totalSecond;

      // 天数位
      var day = Math.floor(second / 3600 / 24);
      var dayStr = day.toString();
      if (dayStr.length == 1) dayStr = '0' + dayStr;

      // 小时位
      var hr = Math.floor((second - day * 3600 * 24) / 3600);
      var hrStr = hr.toString();
      if (hrStr.length == 1) hrStr = '0' + hrStr;

      // 分钟位
      var min = Math.floor((second - day * 3600 * 24 - hr * 3600) / 60);
      var minStr = min.toString();
      if (minStr.length == 1) minStr = '0' + minStr;

      // 秒位
      var sec = second - day * 3600 * 24 - hr * 3600 - min * 60;
      var secStr = sec.toString();
      if (secStr.length == 1) secStr = '0' + secStr;

      var hrStrV2 = ''
      var minStrV2 = ''
      if (hrStr == '00') {
        hrStrV2 = ''
      } else {
        hrStrV2 = hrStr + '时'
      }
      if (minStr == '00') {
        minStrV2 = ''
      } else {
        minStrV2 = minStr + '分'
      }
      this.setData({
        // countDownDay: dayStr,
        countDownHour: hrStrV2,
        countDownMinute: minStrV2,
        countDownSecond: secStr,
      });
      totalSecond--;
      if (totalSecond < 0) {
        clearInterval(interval);
        wx.showToast({
          title: '预约时间已经到',
        });
        this.setData({
          // countDownDay: '',
          countDownHour: '',
          countDownMinute: '',
          countDownSecond: '00',
        });
      }
    }.bind(this), 1000);
  },

wxml文件中:

<view class="txt">
                <view class="inner">
                    <view class="t1">请在{{countDownHour}}{{countDownMinute}}{{countDownSecond}}秒内到达停车场</view>
                    <view class="t2">到达停车场后,系统将为您额外保留{{orderInfo.arrivalMins}}分钟的停车入库时间</view>
                </view>
            </view>

猜你喜欢

转载自blog.csdn.net/qq_34749453/article/details/84994736