• 小程序或者vue商品秒杀倒计时


    最近做小程序商城。列表秒杀倒计时这个坑死了。还是借鉴网上大佬的方法

    let goodsList = [{
      actEndTime: '2018-06-24 10:00:43'
    }]
    
    let endTimeList = [];
    // 将活动的结束时间参数提成一个单独的数组,方便操作
     this.data.mydata.rush.forEach(o => {
          endTimeList.push(o.actEndTime)
    })
     this.setData({
          actEndTimeList: endTimeList
    });
     // 执行倒计时函数
     this.countDown();
    timeFormat(param) { //小于10的格式化函数
        return param < 10 ? '0' + param : param;
      },
      countDown(it) { //倒计时函数
        // 获取当前时间,同时得到活动结束时间数组
        let newTime = new Date().getTime();
        let endTimeList = this.data.actEndTimeList;
        let countDownArr = [];
    
        // 对结束时间进行处理渲染到页面
        endTimeList.forEach(o => {
    
          let endTime = new Date(o).getTime();
          let obj = null;
          // 如果活动未结束,对时间进行处理
          if (endTime - newTime > 0) {
            let time = (endTime - newTime) / 1000;
            // 获取天、时、分、秒
            let day = parseInt(time / (60 * 60 * 24));
            let hou = parseInt(time % (60 * 60 * 24) / 3600);
            let min = parseInt(time % (60 * 60 * 24) % 3600 / 60);
            let sec = parseInt(time % (60 * 60 * 24) % 3600 % 60);
            obj = {
              day: this.timeFormat(day),
              hou: this.timeFormat(hou),
              min: this.timeFormat(min),
              sec: this.timeFormat(sec)
            }
          } else { //活动已结束,全部设置为'00'
            obj = {
              day: '00',
              hou: '00',
              min: '00',
              sec: '00'
            }
          }
          countDownArr.push(obj);
        })
        // 渲染,然后每隔一秒执行一次倒计时函数
        this.setData({
          countDownList: countDownArr
        })
        setTimeout(this.countDown, 1000);
      },
    <view class='item-money-name'>
                  <view class='item-money'>¥{{item.money}}</view>
                  <view class="tui-countdown-content {{(countDownList[index].day && countDownList[index].hou && countDownList[index].min && countDownList[index].sec) == 0?'tibg':''}}">
                    <text>剩余</text>
                    <text class='tui-conutdown-box'>{{countDownList[index].day}}</text>
                    <text></text>
                    <text class='tui-conutdown-box'>{{countDownList[index].hou}}:</text>
                    <text class='tui-conutdown-box'>{{countDownList[index].min}}:</text>
                    <text class='tui-conutdown-box'>{{countDownList[index].sec}}</text>
                  </view>
                </view>
    countDownList: []
    主要是将获取到的时间循环出来单独存一个数组。然后再倒计时。获取的时间和计算机的时间对比。
    然后再每个商品的index下便可获取到每个倒计时了
  • 相关阅读:
    oc kvc的模式:匹配搜索模式(模式匹配)、装包解包
    编程语言的多态与动态
    swift的@objc总结
    swift函数的调用约定
    PHP实现微信退款的分析与源码实现
    【MySQL】20个经典面试题,全部答对月薪10k+
    redis面试题总结
    【Redis缓存机制】1.Redis介绍和使用场景
    php四种文件加载语句
    做网站-mysql表字段设计
  • 原文地址:https://www.cnblogs.com/baifubin/p/9329645.html
Copyright © 2020-2023  润新知