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

1.实现效果

 

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

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

3.实现代码
 

<view class="flex-row time-box j_c">
  <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>
<view class="flex-row time-box j_c ">
  <view class="flex-row">
    <block wx:for="{{left_time_list_date[0]}}" wx:key="list">
      <view class="time-item1">{{item}}</view>
    </block>
    <text>天</text>
  </view>
  <view class="flex-row">
    <block wx:for="{{left_time_list_date[1]}}" wx:key="list">
      <view class="time-item1">{{item}}</view>
    </block>
    <text>时</text>
  </view>
  <view class="flex-row">
    <block wx:for="{{left_time_list_date[2]}}" wx:key="list">
      <view class="time-item1">{{item}}</view>
    </block>
    <text>分</text>
  </view>
  <view class="flex-row">
    <block wx:for="{{left_time_list_date[3]}}" wx:key="list">
      <view class="time-item1">{{item}}</view>
    </block>
    <text>秒</text>
  </view>
</view>

/* 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)
    }
  }
})