vue倒计时

一、基础倒计时

html部分

<div>{{countDownList}}</div>

script部分

export default {
　　data() {
　　　　return {
　　　　　　countDownList: '00天00时00分00秒',
　　　　　　actEndTime: '2018-11-19 18:50:00'
　　　　};
　　},
　　created() {
　　　　this.countDown();

　　},

　　methods: {
　　　　timeFormat(param) {
　　　　　　return param < 10 ? '0' + param : param;
　　　　},
　　　　countDown(it) {
　　　　　　var interval = setInterval(() => {
　　　　　　　　// 获取当前时间，同时得到活动结束时间数组
　　　　　　　　let newTime = new Date().getTime();
　　　　　　　　// 对结束时间进行处理渲染到页面
　　　　　　　　let endTime = new Date(this.actEndTime).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'
　　　　　　　　　　};
　　　　　　　　　　clearInterval(interval);
　　　　　　　　}
　　　　　　　　this.countDownList = obj.day + '天' + obj.hou + '时' + obj.min + '分' + obj.sec + '秒';
　　　　　　}, 1000);
　　　　}
　　}

}

二、数组对象倒计时(多个计时器同时执行)

html部分

 <div class="all" ref="providall">
    <ul>
      <li v-for="(item,index) of iconlistall" :key="index">
        <div class="lileft">
          <p v-if="item.pre_attt > 0">计时：{{time(item.pre_attt)}}</p>
        </div>
      </li>
    </ul>
  </div>

script部分

export default {
  data() {
    return {
      iconlist: [],
      ticker: null,
      d: "",
      h: "",
      m: "",
      s: ""
    };
  },
  computed: {
    //这里是计算自定义数组的变化 因为有一个计时器每秒都会减去数组中字段的时间 所以 数组是每秒更新的
    iconlistall: {
      get() {
        return this.iconlist;
      }
    }
  },
  methods: {
    beginTimer() {
      //这个计时器是每秒减去数组中指定字段的时间
      this.ticker = setInterval(() => {
        for (let i = 0, len = this.iconlist.length; i < len; i++) {
          const item = this.iconlist[i];
          if (item.pre_attt > 0) {
            item.pre_attt = item.pre_attt - 1000;
          }
        }
      }, 1000);
    },
    time(time) {
      //这个函数是每秒把时间重新计算下
      if (time >= 0) {
        let d = Math.floor(time / 1000 / 60 / 60 / 24);
        let h = Math.floor((time / 1000 / 60 / 60) % 24);
        let m = Math.floor((time / 1000 / 60) % 60);
        let s = Math.floor((time / 1000) % 60);
        return d + "天" + h + "时" + m + "分" + s + "秒";
      }
    }
  },
  created() {
    //这里是假的数据
    let list = [
      {
        pre_at: "2020-04-05"
      },
      {
        pre_at: "2020-04-07 16:18:36"
      },
      {
        pre_at: "2020-05-04"
      }
    ];
    //首先循环数组 在 正常的情况下这个数组是后台传递过来的 然后将这个数组中的最后截止时间减去当前时间获得时间戳
    for (let i = 0, len = list.length; i < len; i++) {
      const item = list[i];
      item.pre_attt = new Date(item.pre_at).getTime() - new Date().getTime();
    }
    this.iconlist = list; //将改变后的数组赋值给自定义的数组 然后调用计时器 每秒减去指定字段的时间戳 -1000毫秒
    if (this.ticker) {
      //这一段是防止进入页面出去后再进来计时器重复启动
      clearInterval(this.ticker);
    }
    this.beginTimer(); //启动计时器减指定字段的时间
  },