分享一个封装好的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>