vue倒计时

文件名：downTime.vue

<template>
  <div class="countDownClass">
<!--    <span>{{countDownText}}</span>-->
    <img style="height: 5vw" src="@/assets/imgs/icon/time_icon.png" />
    <span>
      <span>{{hhssmm.hou?hhssmm.hou:0}}</span>
      <span>时</span>
      <span>{{hhssmm.min?hhssmm.min:0}}</span>
      <span>分</span>
      <span>{{hhssmm.sec?hhssmm.sec:0}}秒</span>
    </span>

  </div>
</template>

<script>

import moment from 'moment'

export default {
  name: "CountDown",
  props: {
    startTime: {
      type: [Number, String],
      required: true,
    },
    endTime: {
      type: [Number, String],
      required: true,
    }
  },
  data() {
    return {
      countDownText: '',
      hhssmm:{},
    }
  },
  computed: {
  },
  async created() {
    this.updateState();
    this.timeInterval=setInterval(()=>{
      this.updateState()
    },1000)
  },
  updated(){
    if(this.end||this.done){
      clearInterval(this.timeInterval)
    }
  },
  methods: {

    /**
     * 时间小于10补零
     * */
    timeFormat(param) {
      return param < 10 ? "0" + param : param;
    },

    /**
     * 时间格式化HHmmss
     * */
    formateHHmmss(time){
      let day = parseInt(time /1000 / (60 * 60 * 24));
      let hou = parseInt((time  /1000 % (60 * 60 * 24)) / 3600) + day * 24;
      let min = parseInt(((time /1000  % (60 * 60 * 24)) % 3600) / 60);
      let sec = parseInt(((time /1000 % (60 * 60 * 24)) % 3600) % 60);
      let HHmmss = {
        hou: this.timeFormat(hou),
        min: this.timeFormat(min),
        sec: this.timeFormat(sec)
      };
      return HHmmss;
    },

    /**
     * 更新倒计时状态
     */
    updateState() {
      console.log(this.startTime);

      let starTime = new Date(moment(this.startTime).format("YYYY/MM/DD HH:mm:ss")).getTime();
      console.log(moment(this.startTime).format("YYYY/MM/DD HH:mm:ss"))
      let endTime = new Date(moment(this.endTime).format("YYYY/MM/DD HH:mm:ss")).getTime();
      var test = new Date(endTime);
      //console.log(test.getFullYear() + "-" + this.timeFormat(test.getMonth()) + "-" + this.timeFormat(test.getDate()) + " " + this.timeFormat(test.getHours()) + ":" + this.timeFormat(test.getMinutes()) + ":" + this.timeFormat(test.getSeconds()))
      let nowTime = new Date().getTime();
      let beginTime = starTime - nowTime;
      let finishTime = endTime - nowTime;
      let hhmmss = null;
      if (beginTime >= 0) {
        let hou = this.formateHHmmss(beginTime).hou;
        let min = this.formateHHmmss(beginTime).min;
        let sec = this.formateHHmmss(beginTime).sec;
        hhmmss = {
          hou: hou,
          min: min,
          sec: sec
        };
        this.hhssmm = hhmmss;
        this.start=true;
        this.countDownText="秒杀已开始";
      } else if (finishTime >= 0) {
        let hou = this.formateHHmmss(finishTime).hou;
        let min = this.formateHHmmss(finishTime).min;
        let sec = this.formateHHmmss(finishTime).sec;
        hhmmss = {
          hou: hou,
          min: min,
          sec: sec
        };
        this.hhssmm = hhmmss;
        this.countDownText=`距离活动结束`;
      } else {
        hhmmss = {
          hou: "00",
          min: "00",
          sec: "00"
        };
        this.end=true;
        this.countDownText="活动已结束";
      }
    }
  },
  beforeDestroy() {
    clearInterval(this.timeInterval)
  }
}
</script>

<style scoped>
/* 秒杀 */
.countDownClass {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin: 0 0 0.1rem 0;
  color: #999999;
  font-size: 4vw;
}
.countDownClass > span:last-child {
  margin-left: 0.1rem;
}
.countDownClass > span:last-child span:nth-child(odd) {
  color: #999999;
  display: inline-block;
  border-radius: 0.1rem;
  padding: 0.05rem 0.05rem 0.05rem 0.05rem;
}
</style>

调用：

import downTime from '@/components/downTime'

export default {
   components: {downTime },
}


<downTime :startTime="'2012-11-11 11:11:11'" :endTime="'2022-11-11 11:11:11'"></downTime>

https://blog.csdn.net/chenqunjian/article/details/102805369