Vue數據列表倒計時展示

 

 

 

 

 

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<template>
   <div class="all" ref="providall">
        <el-table stripe height="calc(100vh - 240px)" class="mt-10" v-for="(item) in iconlistall" >
          <el-table-column>
            <div v-if="item.pre_at > 0">計時：{{time(item.pre_at)}}</div>
            <div v-else>計時: 已超時</div>
          </el-table-column>
        </el-table>
   </div>
</template>

<script>
export default {
  data() {
    return {
      iconlist: [],
      ticker: null,
      d: "",
      h: "",
      m: "",
      s: ""
    };
  },
  computed:{ //這里是監聽自定義數組的變化 因為有一個計時器每秒都會減去數組中字段的時間 所以 數組是每秒更新的
    iconlistall:{
      get(){
        return this.iconlist
      }
    }
  },
  methods: {
    createds() {
    //這里是假的數據
      let list = [
        {
          pre_at: "2020-06-03 11:18:23",
          address:"測試1",
        },
        {
          pre_at: "2020-06-01 16:18:35",
          address:"測試2",
        },
        {
          pre_at: "2020-06-04 6:14:42",
          address:"測試3",
        }
      ];
      //首先循環數組 在 正常的情況下這個數組是后台傳遞過來的 然后將這個數組中的最后截止時間減去當前時間獲得時間戳
      for (let i = 0, len = list.length; i < len; i++) {
        const item = list[i];
        item.pre_at = new Date(item.pre_at).getTime() - new Date().getTime();
      }
      this.iconlist = list; //將改變后的數組賦值給自定義的數組 然后調用計時器 每秒減去指定字段的時間戳 -1000毫秒
      if (this.ticker) { //這一段是防止進入頁面出去后再進來計時器重復啟動
        clearInterval(this.ticker);
      }
      this.beginTimer(); //啟動計時器減指定字段的時間
    },
    beginTimer() { //這個計時器是每秒減去數組中指定字段的時間
      this.ticker = setInterval(() => {
        for (let i = 0, len = this.iconlist.length; i < len; i++) {
          const item = this.iconlist[i];
          if (item.pre_at > 0) {
            item.pre_at = item.pre_at - 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+'秒';
      }
    },
  },

  mounted() {
    this.createds()
  },
  destroyed() {}
};
</script>