分享一個封裝好的vue組件 ---- 倒計時

用法看文件註釋部分

<!-- 
  本組件使用方式：

     在需要使用 本組件 的  頁面  的操作 如下   

      import Daojishi from "./daojishi";  // 此處引入 本組件 的 路徑 自行配置
      export default {
        data() {
          return {
            aim_time: "2019-10-21 18:08:21"   //此處自行從後端獲取需要的目的時間，也可自己寫一個  ， 即該倒計時功能到 這個時間 則終止
          };
        },
        components: {
          Daojishi    // 註冊引入的組件
        },
      };

     本組件採用props傳參 方式，看具體情況也可以改成用vuex獲取。

     在 【該頁面】 需要顯示本組件的地方，放入該組件，假如下面這樣                    PS：該頁面 指的是：在需要使用 本組件 的  頁面  

            <Daojishi :msg=this.aim_time />
    
     本組件只有功能，因爲要用於不同的項目，故而沒有設定樣式，下面的div和span結構簡單，如有需要，可以自己改變樣式。
 -->
<template>
  <div>
    <div class="time">
      <span>{{this.day}}</span>天
      <span>{{this.hour}}</span> 時
      <span>{{this.min}}</span> 分
      <span>{{this.sec}}</span> 秒
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // aim_time: String,
      day: 0,
      hour: 0,
      min: 0,
      sec: 0
    };
  },
  props: {
    msg: String
  },
  created() {
    this.intervalId = setInterval(() => {
      this.countDown(this.msg);
    }, 50);
  },
  methods: {
    //參數爲 目的時間   即該倒計時功能到 這個時間 終止
    countDown(aim_time) {
      var myTime = new Date();
      var now = myTime.getTime();
      var end = new Date(Date.parse(aim_time.replace(/-/g, "/"))).getTime();
      var leftTime = end - now;
      var day, hour, min, sec, ms;
      if (leftTime >= 0) {
        day = Math.floor(leftTime / 1000 / 60 / 60 / 24);

        hour = Math.floor((leftTime / 1000 / 60 / 60) % 24); //需要顯示天數 則用這一行  11天 10 時 41 分 14 秒
        // hour = Math.floor(((leftTime / 1000 / 60 / 60) % 24) + day * 24);     //如果不需要顯示天數 則用這一行     243 時 41 分 14 秒

        min = Math.floor((leftTime / 1000 / 60) % 60);
        sec = Math.floor((leftTime / 1000) % 60);
        ms = Math.floor(leftTime % 1000);
        if (day < 10) {
          day = "0" + day;
        }
        if (ms < 100) {
          ms = "0" + ms;
        }
        if (sec < 10) {
          sec = "0" + sec;
        }
        if (min < 10) {
          min = "0" + min;
        }
        if (hour < 10) {
          hour = "0" + hour;
        }
      } else {
        alert("已截止");
      }
      this.day = day;
      this.hour = hour;
      this.min = min;
      this.sec = sec;
      // document.getElementById('millisec').innerHTML = ms    //毫秒
    }
  },
  beforeDestroy() {
    //退出頁面前關閉定時器
    clearInterval(this.intervalId);
  }
};
</script>
<style lang='scss' scoped>

</style>