vue倒計時（天時分秒）

直接上代碼，複製可用。

1、html部分

<p style="line-height: 1.5rem;" v-html="countTxt"></p>

2、script部分

import { formateTimeStamp } from '@/util/tools.js'
export default {
  props: {
    infos: { type: [Array, Object] }
  },
  data () {
    return {
      times: {},
      countTxt: ''
    }
  },
  methods: {
    // 獲得距離活動開始還剩餘的時間
    mistiming () {
      var timeStamp = this.infos.activity.end_at - this.infos.activity.start_at;
      this.times = formateTimeStamp(timeStamp);
      const str = `<span>${this.times.day}</span>天<span>${this.times.hour}</span>時<span>${this.times.min}</span>分<span>${this.times.seconds}</span>秒`
      this.countTxt = str;
      var TimeDown = setInterval(() => {
        if (timeStamp > 0) {
          timeStamp--;
          const newTime = formateTimeStamp(timeStamp);
          const str = `<span>${newTime.day}</span>天<span>${newTime.hour}</span>時<span>${newTime.min}</span>分<span>${newTime.seconds}</span>秒`
          this.countTxt = str;
        } else {
          this.countTxt = '活動已開始'
          clearInterval(TimeDown);
        }
      }, 1000)
    }
  }，
  mounted () {
    this.$nextTick(() => {
      this.mistiming();
    })
  }
}

3、tools.js

// 計算出時間戳的具體數據：比如將85400轉化爲 n天n時n分n秒
export function formateTimeStamp (timeStamp) {
  var day;
  var hour;
  var min;
  var seconds;

  day = parseInt(timeStamp / (24 * 60 * 60)) // 計算整數天數
  var afterDay = timeStamp - day * 24 * 60 * 60 // 取得算出天數後剩餘的秒數
  hour = parseInt(afterDay / (60 * 60)) // 計算整數小時數
  var afterHour = timeStamp - day * 24 * 60 * 60 - hour * 60 * 60 // 取得算出小時數後剩餘的秒數
  min = parseInt(afterHour / 60) // 計算整數分
  seconds = parseInt(timeStamp - day * 24 * 60 * 60 - hour * 60 * 60 - min * 60) // 取得算出分後剩餘的秒數

  if (day < 10) {
    day = '0' + day;
  }

  if (hour < 10) {
    hour = '0' + hour
  };

  if (min < 10) {
    min = '0' + min;
  }

  if (seconds < 10) {
    seconds = '0' + seconds;
  }

  const restStamp = {
    day: day,
    hour: hour,
    min: min,
    seconds: seconds
  }
  return restStamp
}

效果：