小程序商品秒杀

思路:

  1. 获取当前时间,同时得到活动结束时间数组;
  2. 循环活动结束时间数组,计算每个商品活动结束时间的倒计时天、时、分、秒;
  3. 用 setData 方法刷新数据;
  4. 每个一秒执行一次倒计时函数 setInterval(this.countTime,1000)

wxml

<view class='goods-box' wx:for="{
   
   {goodsData}}" wx:key="index">

<view class='time-txt'>距离开始还剩:{
   
   {item.now}}</view>

</view>

js

    data{
        goodsData:[
        { id: 1, status: 0, endtime: '2019-05-29 15:06:00', now:'' },
        { id: 2, status: 1, endtime: '2019-05-31 15:06:00', now:'' },
        { id: 3, status: 2, endtime: '2019-06-01 15:06:00', now:'' },
        { id: 4, status: 3, endtime: '2019-05-31 19:06:00', now:'' }
        ],
    }

  onLoad: function (options) {
    this.countTime()
    setInterval(this.countTime,1000)
  },

  // 倒计时
  countTime(){
    let now = new Date().getTime()
    let endList = this.data.goodsData

    endList.forEach(v=>{
      let end = new Date(v.endtime).getTime()
      //时间差
      let diftime = end - now 
      let h, m, s;
      if (diftime > 0){
        h = Math.floor(diftime / 1000 / 60 / 60 % 24);
        m = Math.floor(diftime / 1000 / 60 % 60);
        s = Math.floor(diftime / 1000 % 60);

        s = s < 10 ? "0" + s : s
        m = m < 10 ? "0" + m : m
        h = h < 10 ? "0" + h : h
        v.now = h + "时" + m + "分" + s + "秒"
        //递归每秒调用countTime方法,显示动态时间效果
        // setTimeout(this.countTime, 1000)
      }else{
        //已结束
        v.now = '00时00分00秒'
      }  
    })
    this.setData({
      goodsData: endList
    })
  },

猜你喜欢

转载自blog.csdn.net/weixin_42215897/article/details/90718855
今日推荐