vue 倒计时

仅供参考
创建js文件 showTime.js

// 倒计时
var day = 0
var hour = '00'
var min = '00'
var second = '00'
function countTime(timeSrt) {
  // 获取当前时间
  const date = new Date()
  const now = date.getTime()
  // 设置截止时间
  const endDate = new Date(timeSrt) // 需要倒计时的日期
  const end = endDate.getTime()
  // 时间差
  const leftTime = end - now
  // 定义变量 d,h,m,s保存倒计时的时间

  if (leftTime >= 0) {
    // 天
    day = Math.floor(leftTime / 1000 / 60 / 60 / 24)
    // 时
    const h = Math.floor(leftTime / 1000 / 60 / 60 % 24)
    hour = h < 10 ? '0' + h : h
    // 分
    const m = Math.floor(leftTime / 1000 / 60 % 60)
    min = m < 10 ? '0' + m : m
    // 秒
    const s = Math.floor(leftTime / 1000 % 60)
    second = s < 10 ? '0' + s : s
  } else {
    day = 0
    hour = '00'
    min = '00'
    second = '00'
  }
  // 等于0的时候不调用
  if (Number(hour) === 0 && Number(day) === 0 && Number(min) === 0 && Number(second) === 0) {
    return
  } else {
    // 递归每秒调用countTime方法，显示动态时间效果,

    setTimeout(countTime, 1000)
  }

  return { day,
    hour,
    min,
    second }
}

export default function countTimeFun(ck, t) {
  setInterval((t) => {
    const x = countTime(t)
    // console.log(x);
    ck(x)
  },
  1000,
  t
  )
}

创建公用的vue页面

<template>
  <div class="viewallItem_top_l_b_time">
    {{ dataTime.day }}天
    <span class="viewallItem_top_l_b_timesty">{{ dataTime.hour }}</span>
    :
    <span class="viewallItem_top_l_b_timesty">{{ dataTime.min }}</span>
    :
    <span class="viewallItem_top_l_b_timesty">{{ dataTime.second }}</span>
  </div>
</template>
<script>
import countTimeFun from '@/utils/showTime'
export default {
  props: {
    itemTime: {
      type: String
    }
  },
  data() {
    return {
      dataTime: {}
    }
  },

  mounted() {
    countTimeFun(this.TimeNum, this.itemTime)
  },
  methods: {
    // 时间计算
    TimeNum(val) {
      this.dataTime = val
      // console.log(val,"倒计时组件时间计算");
      return val
    }
  }
}
</script>

<style lang="scss" scoped>
	.viewallItem_top_l_b_time {
		color:#606266;
		font-size: 14px;
	}
	.viewallItem_top_l_b_timesty {
		text-align: center;
		border-radius: 4px;
		color: #606266;
		display: inline-block;
	}
</style>

在相对应的页面进行引用

import timeCon from '@/components/timeCon'
  components: {timeCon },

传值进入子组件， 是一个日期格式就可以，时间戳也行

 <timeCon :item-time="2021-01-05 23:59:59t"></timeCon>```