倒计时

js部分：

export default function CalcTime(endtime) {
    var obj = {};
    var endDate = new Date(endtime);
    //当前时间
    var nowDate = new Date();
    //相差的总秒数
    var totalSeconds = parseInt((endDate - nowDate) / 1000);
    //天数
    var days = Math.floor(totalSeconds / (60 * 60 * 24));
    //取模（余数）
    var modulo = totalSeconds % (60 * 60 * 24);
    //小时数
    var hours = Math.floor(modulo / (60 * 60));
    modulo = modulo % (60 * 60);
    //分钟
    var minutes = Math.floor(modulo / 60);
    //秒
    var seconds = modulo % 60;
    if (hours < 10) {
        hours ='0'+hours
    }
     if (minutes < 10) {
        minutes ='0'+minutes
    }
    if (seconds < 10) {
        seconds ='0'+seconds
    }
    obj.days = days;
    obj.hours = hours;
    obj.seconds = seconds;
    obj.minutes = minutes;
    return obj
}

vue部分：

<template>
  <div>
    <!-- 倒计时 -->
    <div class="count-down">
      <span>{{leftTime.hours}}</span>
      <i>时</i>
      <span>{{leftTime.minutes}}</span>
      <i>分</i>
      <span class="last">{{leftTime.seconds}}</span>
      <i>秒</i>
    </div>
  </div>
</template>
<script>
import CalcTime from "@/utils/time";

export default {
  data() {
    return {
      timer: null,
      leftTime: {
        hours: "",
        minutes: "",
        seconds: ""
      },
      endTime: "2019/10/23 24:00"
    };
  },
  created() {
    //一秒执行一次
    this.timer = setInterval(() => {
      //计算时间
      var a = CalcTime(this.endTime);
      this.leftTime.hours = a.hours;
      this.leftTime.minutes = a.minutes;
      this.leftTime.seconds = a.seconds;
    }, 1000);
  },
  //组件销毁时，释放定时器
  destroyed() {
    this.timer = null;
  },
  components: { Bar }
};
</script>
<style lang="less" scoped>
.count-down {
  text-align: center;
  span {
    width: 19px;
    height: 25px;
    line-height: 25px;
    background: #323232;
    color: white;
    display: inline-block;
    border-radius: 5px;
  }
  .last {
    background: #f3344a;
  }
  i {
    font-style: normal;
    padding: 0 5px;
  }
}
</style>