zoukankan      html  css  js  c++  java
  • 列表秒杀倒计时-vue

    HTML:

    <div v-for="(i,index) in mydata" :key="index">{{countDownList[index].day}}天{{countDownList[index].hou}}时{{countDownList[index].min}}分{{countDownList[index].sec}}秒</div>

    script:

    export default {

      data() {
        return {
          mydata: [{
            actEndTime: '2018-10-19 18:50:00'
          }, {
            actEndTime: '2018-11-20 01:00:00'
          }, {
            actEndTime: '2018-12-20 02:00:00'
          }],
          actEndTimeList: [],
          countDownList: []
        };
      },

      created() {
        this.dataName();
      },

      methods: {

        dataName() {
          let endTimeList = [];
          // 将活动的结束时间参数提成一个单独的数组,方便操作
          this.mydata.forEach(o => {
            endTimeList.push(o.actEndTime);
          });
          this.actEndTimeList = endTimeList;
          this.countDown();
        },

        timeFormat(param) {

          return param < 10 ? '0' + param : param;
        },

        countDown(it) {
          // 获取当前时间,同时得到活动结束时间数组
          let newTime = new Date().getTime();
          let endTimeList = this.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.countDownList = countDownArr;
          setTimeout(this.countDown, 1000);
        }

      }

    }

  • 相关阅读:
    ccf-集合竞价-201412-3
    ccf-命令行选项-201403-3
    ccf-路径解析201604-3
    ccf-炉石传说-201609-3
    CCF-权限查询-201612-3
    10个顶级的CSS UI开源框架
    移动端前端UI库—Frozen UI、WeUI、SUI Mobile
    @RenderBody、@RenderSection、@RenderPage、Html.RenderPartial、Html.RenderAction的作用和区别
    对比其它软件方法评估敏捷和Scrum
    SQL SERVER 2008 中三种分页方法与总结
  • 原文地址:https://www.cnblogs.com/CMing/p/9818187.html
Copyright © 2011-2022 走看看