微信小程序倒计时

<view class="time-box">
   <view class="time-item">{{left_time_list[0]}}</view>天
   <view class="time-item">{{left_time_list[1]}}</view>时
   <view class="time-item">{{left_time_list[2]}}</view>分
   <view class="time-item">{{left_time_list[3]}}</view>秒
</view>
.time-box {overflow: hidden; margin-left: 40rpx;font-size: 28rpx;}
.time-item { display: inline-block;padding: 0 10rpx;background:#fff; border-radius: 8rpx; font-size: 28rpx;text-align: center; line-height: 40rpx; margin: 0 8rpx; color: #333;}
const app = getApp()
Page({
    data: {
        left_time: '', //活动剩余时间的秒数
        timer: '', //倒计时定时器
        left_time_list: [], //剩余秒数转换 天,小时 分 秒
        left_time_list_date: [],       
    },
    onLoad() {
      
    },  
    onShow: function () {
      this.getLeftTime('2024/12/03 11:20:00')
    },
    /**
     * 定时器,计算剩下时间
     * @param {*} end_time 
     */
    getLeftTime(end_time) {
      let left_time = this.getTimestap(end_time);
      this.initDate(left_time)
      this.data.timer = setInterval(() => {
        if (left_time-- === 0) {
          this.setData({
            left_time: 0,
            left_time_list: this.formatSeconds(0)
          })
          clearInterval(this.data.timer)
        } else {
          this.initDate(left_time)
        }
      }, 1000);
    },
    /**
     * 初始化数据
     */
    initDate(e) {
      let left_time_list = this.formatSeconds(e),
        left_time_list_date = this.formatDate(JSON.stringify(left_time_list));
      this.setData({
        left_time: e,
        left_time_list,
        left_time_list_date
      })
    },
    /**
     * 获取指定时间-当前时间的秒数
     * @param {*} end_time 
     */
    getTimestap(end_time) {
      // 当前时间
      var currentTime = parseInt(new Date().getTime() / 1000);
      // 未来时间
      var futureTime = parseInt(new Date(end_time.replace(/-/g, '/')).getTime() / 1000); //ios无法解析
      return futureTime <= currentTime ? 0 : futureTime - currentTime;
    },
    /**
     * 毫秒-天-时-分-秒
     * @param {*} value 
     */
    formatSeconds(value) {
      let time = [],
        day = parseInt(value / 86400),
        hour = parseInt((value % 86400) / 3600),
        min = parseInt(((value % 86400) % 3600) / 60),
        sec = parseInt(((value % 86400) % 3600) % 60);
      time[0] = day > 0 ? this.addZero(day) : this.addZero(0);
      time[1] = hour > 0 ? this.addZero(hour) : this.addZero(0);
      time[2] = min > 0 ? this.addZero(min) : this.addZero(0);
      time[3] = sec > 0 ? this.addZero(sec) : this.addZero(0);
      return time;
    },
    /**
     * 拆分数组-天-时-分-秒
     * @param {*} e 
     */
    formatDate(e) {
      let list = JSON.parse(e);
      for (let i = 0; i < list.length; i++) {
        list[i] = list[i].toString().split('');
      }
      return list;
    },
    /**
     * 补0
     * @param {*} num 
     */
    addZero(num) {
      return num < 10 ? "0" + num : num;
    },
  
    onUnload() {
      if (this.data.timer) {
        console.log('销毁计时器')
        clearInterval(this.data.timer)
      }
    }, 
    
})

发表评论