VUE组件日时分秒倒计时

因为产品说需要取服务器的时间戳，所以nowTime是从服务器取的当前时间戳，没有这个要求可以用new Date().getTime()代替；

组件代码

<template>
  <div class="DayDown">
    <span>{{ dayString }}</span>
    <span>{{ hourString }}</span>
    <span>{{ minuteString }}</span>
    <span>{{ secondString }}</span>
  </div>
</template>
<script>
export default {
  data () {
    return {
      day: '',
      hour: '',
      minute: '',
      second: '',
      promiseTimer: ''
    };
  },
  props: {
    endTime: {
      default: ''
    },
    nowTime: {
      default: ''
    }
  },
  watch: {
    endTime (val, old) {
      if (val !== old) {
        this.DayDown();
      }
    }
  },
  mounted () {
    this.DayDown();
  },
  methods: {
    DayDown () {
      clearInterval(this.promiseTimer);
      this.promiseTimer = setInterval(() => {
        const remainTime = this.endTime - this.nowTime;
        if (remainTime >= 0) {
          this.day = Math.floor(remainTime / (60 * 60 * 24));
          this.hour = Math.floor(remainTime / 60 / 60 % 24);
          this.minute = Math.floor((remainTime % 3600) / 60);
          this.second = Math.floor((remainTime % 3600) % 60);
          this.$emit('subtract');
        } else {
          this.day = 0;
          this.hour = 0;
          this.minute = 0;
          this.second = 0;
          this.$emit('end');
          clearInterval(this.promiseTimer);
        }
      }, 1000);
    },
    formatNum (num) {
      if (num) {
        return num < 10 ? '0' + num : '' + num;
      } else {
        return '00';
      }
    }
  },
  computed: {
    dayString () {
      return this.formatNum(this.day);
    },
    hourString () {
      return this.formatNum(this.hour);
    },
    minuteString () {
      return this.formatNum(this.minute);
    },
    secondString () {
      return this.formatNum(this.second);
    }
  }
};
</script>
<style scoped>
.DayDown span{
  padding: 5px;
  background-color: #000;
  color: #fff;
  border-radius: 4px;
}
</style>

父组件代码

<template>
  <div>
     <<day-down :endTime="info.startTime / 1000" v-if="info.endTime&& nowTime" @end="getSaleDetail" :nowTime="nowTime / 1000" @subtract="subtract"></day-down>
  </div>
</template>

<script>
import DayDown from '../components/DayDown.vue';
export default {
  components: { DayDown },
  data () {
    return {
        nowTime: null,
        info: {}
    };
  },

  mounted () {
  },

  methods: {
      // 传给组件的时间戳是秒
      // getSaleDetail是刷新数据方法
      // 减当前时间戳
      subtract () {
        this.nowTime += 1000;
      },
  }
};
</script>