微信小程序实现倒计时

2023-09-27 13:22:52

效果图是这样的

实现思路一、

求出发起拼团时间与拼团结束时间的时间差
时间每秒递减使用了 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

微信小程序实现倒计时

码农公寓

相关文章