微信小程序實現倒計時

效果圖是這樣的

實現思路 一、

求出發起拼團時間與拼團結束時間的時間差
時間每秒遞減使用了 setTimeout(this.setTimeCount,1000);這個函數，讓這個函數每隔一秒執行一次。

index.wxml

<view class="content">
  <block wx:for="{{listData}}" wx:key="idx" wx:for-item="item" wx:for-index="{{idx}}">
    <view class="tip">
      <view class="dis">
        <view class='dis_time left'>剩余時間：{{item.countDown}}</view>
      </view>
    </view>
  </block>
</view>

index.wxss

page {
  height: 100%;
  background: #fff;
  position: relative;
}

.item {
  height: 4%;
  background: #fff;
  text-align: center;
}

.content {
  border: 1px solid rgb(167, 159, 159);
  background: #F6F8F8;
  margin-bottom: 300rpx;
  border-bottom: none;
}

.no {
  text-align: center;
  position: absolute;
  top: 8%;
  z-index: -11;
}

.tip {
  position: relative;
  background: #fff;
  width: 100%;
  height: 100rpx;
  margin-bottom: 5rpx;
  padding: 20rpx 0;
  border-bottom: 1px solid gainsboro;
}

.isShow {
  /* display: none; */
}

.dis {
  width: 100%;
  font-size: 35rpx;
  color: #009FE5;
  box-sizing: border-box;
}

.dis_time {
  width: 50%;
}

index.js

Page({

  // 頁面的初始數據
  data: {
    pingData: [{
        "time": "3599000",
      }],
  },
   // 生命周期函數--監聽頁面加載
  onLoad: function (options) {
    this.setData({
      listData: this.data.pingData
    })
    this.setCountDown();
  },
  // 倒計時
  setCountDown: function () {
    let time = 1000;
  let { listData } = this.data;
    let list = listData.map((v, i) => {
      if (v.time <= 0) {
        v.time = 0;
      }
      let formatTime = this.getFormat(v.time);
      v.time -= time;
      v.countDown = `${formatTime.mm}分${formatTime.ss}秒`;
      return v;
    })
    this.setData({
      listData: list
    });
    setTimeout(this.setCountDown, time);
  },

   // 格式化時間
  getFormat: function (msec) {
    let ss = parseInt(msec / 1000);
    let mm = 0;
    if (ss > 60) {
      mm = parseInt(ss / 60);
      ss = parseInt(ss % 60);
      if (mm > 60) {
        mm = parseInt(mm % 60);
      }
    }
    ss = ss > 9 ? ss : `0${ss}`;
    mm = mm > 9 ? mm : `0${mm}`;
    return {
      ss,
      mm,
    };
  }
})

 

實現思路 二、

若是要實現單個倒計時如60s發送驗證碼倒不是很難，難的是多條倒計時。

獲取這個時間差time后我們就可以將它處理后放入數組循環。這樣做的好處是前端不用將time作為一個屬性添加到原數組中。

 

效果圖是這樣的

index.wxml

<view class="item">單條倒計時:{{time}}</view>
<view class="item">多條倒計時</view>
<view class='no'>暫無任何記錄</view>
<view class="content">
  <block wx:for="{{listData}}" wx:key="idx" wx:for-item="item" wx:for-index="{{idx}}">
    <view class="tip {{item.time<=0?'isShow':''}}">
      <view class="dis">
        <view class='dis_time left'>剩余時間：{{item.countDown}}</view>
      </view>
    </view>
  </block>
</view>

index.wxss

page {
  height: 100%;
  background: #fff;
  position: relative;
}

.item {
  height: 4%;
  background: #fff;
  text-align: center;
}

.content {
  border: 1px solid rgb(167, 159, 159);
  background: #F6F8F8;
  margin-bottom: 300rpx;
  border-bottom: none;
}

.no {
  text-align: center;
  position: absolute;
  top: 8%;
  z-index: -11;
}

.tip {
  position: relative;
  background: #fff;
  width: 100%;
  height: 100rpx;
  margin-bottom: 5rpx;
  padding: 20rpx 0;
  border-bottom: 1px solid gainsboro;
}

.isShow {
  display: none;
}

.dis {
  width: 100%;
  font-size: 35rpx;
  color: #009FE5;
  box-sizing: border-box;
}

.dis_time {
  width: 50%;
}

index.js

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    pingData: [{
        "id": "1",
        "icon": "../../images/image2.jpg",
        "number": "20",
        "pingTime": "2019-3-28 23:30:00",
        "time": "55267",
        "showList": "false",
      },
      {
        "id": "2",
        "icon": "../../images/image3.jpg",
        "number": "4566",
        "pingTime": "2019-3-28 12:30:00",
        "time": "58934",
        "showList": "false",
      },
      {
        "id": "3",
        "icon": "../../images/image2.jpg",
        "number": "20",
        "pingTime": "2019-3-28 08:30:00",
        "time": "555234",
        "showList": "false",
      }
    ],
    time: "30"
  },
  /**
   * 生命周期函數--監聽頁面加載
   */
  onLoad: function (options) {
    var that = this
    that.setData({
      listData: that.data.pingData
    })
    that.setCountDown();
    that.setTimeCount();
  },
  /**
   * 60s倒計時
   */
  setTimeCount: function () {
    let time = this.data.time
    time--;
    if (time <= 0) {
      time = 0;
    }
    this.setData({
      time: time
    })
    setTimeout(this.setTimeCount, 1000);
  },
  /**
   * 倒計時
   */
  setCountDown: function () {
    let time = 1000;
    let {
      listData
    } = this.data;
    let list = listData.map((v, i) => {
      if (v.time <= 0) {
        v.time = 0;
      }
      let formatTime = this.getFormat(v.time);
      v.time -= time;
      v.countDown = `${formatTime.hh}:${formatTime.mm}:${formatTime.ss}`;
      return v;
    })
    this.setData({
      listData: list
    });
    setTimeout(this.setCountDown, time);
  },
  /**
   * 格式化時間
   */
  getFormat: function (msec) {
    let ss = parseInt(msec / 1000);
    let ms = parseInt(msec % 1000);
    let mm = 0;
    let hh = 0;
    if (ss > 60) {
      mm = parseInt(ss / 60);
      ss = parseInt(ss % 60);
      if (mm > 60) {
        hh = parseInt(mm / 60);
        mm = parseInt(mm % 60);
      }
    }
    ss = ss > 9 ? ss : `0${ss}`;
    mm = mm > 9 ? mm : `0${mm}`;
    hh = hh > 9 ? hh : `0${hh}`;
    return {
      ss,
      mm,
      hh
    };
  }
})

內容參考：https://www.jb51.net/article/163535.htm