vue 倒计时功能

@vue 倒计时功能

vue 倒计时功能

<template>
  <div class="index">
   <span   :class="[this.showTimeDown ? '' : 'red']"  style="margin-right:10px;float:left"   v-if="timeShow"  >
     剩余时间：{{ dayNum + "天" +hourNum + "小时" + minuteNum + "分钟" + secondNum + "秒" }}
   </span>
  </div>
</template>

<script>
import { getToken } from "@/utils/public";
import dayjs from "dayjs";
import duration from "dayjs/plugin/duration";
dayjs.extend(duration);
import "dayjs/locale/zh-cn";
dayjs.locale("zh-cn");
let refrushFlag = 0;
export default {
  name: "index",
  components: {
    skeleton
  },
  data() {
    return {
      menus: [],
      hour: "",
      days: 0,
      hours: 0,
      minutes: 0,
      seconds: 0,
      timeSetInterval: null,
      showTimeDown: false,
      showOver: false,
      startTime: "",
      timeShow: false
    };
  },
  computed: {
 
    dayNum() {
      if (this.days < 10) return "0" + this.days;
      return this.days;
    },
    hourNum() {
      if (this.hours < 10) return "0" + this.hours;
      return this.hours;
    },
    minuteNum() {
      if (this.minutes < 10) return "0" + this.minutes;
      return this.minutes;
    },
    secondNum() {
      if (this.seconds < 10) return "0" + this.seconds;
      return this.seconds;
    }
  },

  methods: {
    //倒计时
    timeDown() {
      this.timeSetInterval = setInterval(() => {
        if (this.dayjs(this.startTime).isBefore(this.dayjs())) {
          this.showTimeDown = false;
          clearInterval(this.timeSetInterval);//清除定时器
        }
        let mss = this.startTime - this.dayjs().valueOf();
        this.days = parseInt(mss / (1000 * 60 * 60 * 24));
        this.hours = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
        this.minutes = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
        this.seconds = parseInt((mss % (1000 * 60)) / 1000);
      }, 1000);
    },
  
  
  created() {
    clearInterval(this.timeSetInterval);
    this.$_api
      .getTime({
        workId: JSON.parse(sessionStorage.getItem(`qif-userInfo`)).createBy
      })
      .then(res => {
        if (res.data) {
          this.startTime = res.data;
          this.timeShow = true;
          if (this.dayjs().isBefore(this.startTime)) {
            this.showTimeDown = true;
            this.timeDown();
          }
        } else {
          this.timeShow = false;
        }
      })
      .catch(err => {
        this.exportListDetailLoading = false;
      });


  },

};
</script>
<style lang="scss">

</style>