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

1.实现效果

2.实现步骤

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

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

eg:

[364,11,30,07]

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

eg:

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

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

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