小程序抢购页面倒计时定时器

小程序抢购页面倒计时定时器

from：我是前端美少女😔

前几天公司要求做一个抢购页面，要求每个产品都需要一个定时器。之前一个页面做一个定时器轻轻松松，现在涉及多个定时器，而且数量还不确定。如果使用土办法每个商品一个函数，这样是行不通的。因此，只能使用一个函数来实现多个定时器。

实现效果

只显示定时器的效果，至于商品信息的布局就不展示

整体思路

将每个商品的结束时间合并到一个数组中
遍历数组，依次计算每个商品的倒计时时间
每秒执行一次并渲染页面

代码实现

一、timer.wxml

// Timer/timer.wxml
<view class="time"  wx:for='{{goodlist}}' wx:for-item="item" wx:key="key">
  <text class="end">距结束</text>
  <span wx:if="{{item.day > 0}}" style="width:auto">{{item.day}}</span><em wx:if="{{item.day > 0}}">天</em><span style="width:auto">{{item.hour}}</span><em>:</em><span>{{item.min}}</span><em>:</em><span>{{item.sec}}</span>
</view>

二、timer.wxss

.time{
  float: left;
  margin-top: 10rpx;
  width: 100%;
  padding: 10rpx 50rpx;
}
.time span{
    color: #fff;
    min-width: 31rpx;
    display: block;
    float: left;
    margin: 2rpx 6rpx;
    border-radius: 8rpx;
    padding: 5rpx;
    height: auto;
    text-align: center;
    font-size: 30rpx;
    background-image: -webkit-gradient(linear,left top,right top,from(#878686),to(#343434));
    background-image: -webkit-linear-gradient(left,#878686,#343434);
    background-image: -moz-linear-gradient(left,#878686,#343434);
    background-image: linear-gradient(to right,#878686,#343434);
    background-color: #343434;
}
.time em{
    float: left;
    font-size: 30rpx;
    margin-top: 8rpx;
}
.list{
  zoom:1;
  overflow:auto;
  width: 92%;
  padding: 30rpx;
  border-bottom: 1rpx solid #e2e2e2 ;
}
.end{
  float: left;
  font-size: 31rpx;
  color: #333333;
  margin-top:8rpx
}

三、timer.js

// pages/Timer/timer.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    // 结束时间数组
    endtime: ['2020-08-19 05:25:00','2020-08-19 18:25:00','2020-08-18 15:25:00','2020-08-15 15:25:00', '2020-08-19 05:25:00','2020-08-19 18:25:00','2020-08-18 15:25:00','2020-08-15 15:25:00'],
    // 倒计时时间数组
    goodlist:[]
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.gotime() // 页面加载时，执行倒计时函数
  },
  // 倒计时函数
  gotime(){
    var nowDate = new Date();//获取当前时间
    var now = nowDate.getTime()// 转换当前时间格式
     var endtime = this.data.endtime // 获取结束时间数组
     var down = []
     endtime.map((item,index)=>{ // 遍历结束时间数组
       var endDate = new Date(item) // 获取结束时间
       var end =endDate.getTime()
        var leftTime = end - now; //时间差
        var d, h, m, s;
        if(leftTime >= 0) {
        d = Math.floor(leftTime / 1000 / 60 / 60 / 24);// 获取天数
        h = Math.floor(leftTime / 1000 / 60 / 60 % 24);// 获取小时
        m = Math.floor(leftTime / 1000 / 60 % 60); // 获取分钟数
        s = Math.floor(leftTime / 1000 % 60); // 获取秒
        if(s < 10) {
            s = "0" + s;
        }
        if(m < 10) {
            m = "0" + m;
        }
        if(h < 10) {
            h = "0" + h;
        }  
        down.push({ // 将每个倒计时合并到一个数组
          day: d,
          hour: h,
          min: m,
          sec: s 
        })
    }else{// 时间差大于等于零
      down.push({
        day: 0,
        hour: '00',
        min: '00',
        sec: '00' 
      })
    }
     })         
   this.setData({
     goodlist: down,
   }) // 渲染页面数据
  setTimeout(this.gotime,1000) // 每秒执行一次函数
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

心得体会

所得思路与方法是通过分析网上大神们的实例所得出，如有侵权请及时联系，进行协商。本代码还存在很多不足，如果可以，希望在评论区一起讨论