微信小程序实现活动倒计时

1.实现效果

指定时间倒计时.gif

2.实现步骤

1.获取指定截止时间与当前时间的毫秒，即为剩余毫秒值，若剩余毫秒值小于0则返回0。

2.格式化当前毫秒，自动补0，转换成一个数组，格式为['天'，'时', '分', '秒']。

eg:

[364,11,30,07]

3.可进一步将['天'，'时', '分', '秒']拆分成[[,,,.]，'[,,]', '[,,]', '[,,]']。

eg:

[[3,6,4],[1,1],[3,0],[0,7]]

3.实现代码

  {{left_time_list[0]}}天
  {{left_time_list[1]}}时
  {{left_time_list[2]}}分
  {{left_time_list[3]}}秒


  
    
      {{item}}
    
    天
  
  
    
      {{item}}
    
    时
  
  
    
      {{item}}
    
    分
  
  
    
      {{item}}
    
    秒
  

/* pages/actualPage/countdown/index.wxss */
.time-box {
  font-size: 26rpx;
  color: #EAA81B;
  margin-bottom: 40rpx;
  border-radius: 20rpx;
  padding: 20px;
  background: #fff;
  margin: 20rpx;
}

.time-item {
  width: 60rpx;
  height: 40rpx;
  background: linear-gradient(90deg, #FFEBB1 0%, #FFDB8F 100%);
  border-radius: 4rpx;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  margin: 0 20rpx;
}

.time-item1 {
  width: 30rpx;
  height: 40rpx;
  background: linear-gradient(90deg, #FFEBB1 0%, #FFDB8F 100%);
  border-radius: 4rpx;
  font-size: 24rpx;
  text-align: center;
  line-height: 40rpx;
  margin: 0 10rpx;
}

Page({
  data: {
    left_time: '', //活动剩余时间的秒数
    timer: '', //倒计时定时器
    left_time_list: [], //剩余秒数转换 天，小时 分 秒
    left_time_list_date: []
  },
  onShow: function () {
    this.getLeftTime('2023/08/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)
    }
  }
})

4.更多小程序相关，关注公众号 苏苏的bug，更多小程序demo，尽在苏苏的码云如果对你有帮助，欢迎你的star+订阅！