Wechat applet implements event countdown

1. Realize the effect

 

2. Implementation steps
1. Get the milliseconds between the specified deadline and the current time, which is the remaining milliseconds value. If the remaining milliseconds value is less than 0, return 0.

2. Format the current millisecond, automatically fill in 0, and convert it into an array in the format ['day', 'hour', 'minute', 'second'].

3. Implement the code
 

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