倒计时

<template>

  <div class="countDown">

    <div v-if="!isCountDownOver">

      <span class="time">{{ countDownD }}</span>

      <span class="time">{{ countDownHour }}</span>

      <span class="time">{{ countDownMinutes }}</span>

      <span class="time">{{ countDownSeconds }}</span>

    </div>

    <div v-else class="timeOver">{{ LANG.test1.desc271 }}</div>

  </div>

</template>

 

<script>

export default {

  name: "countDown",

  data() {

    return {

      isCountDownOver: false,

      countDownD: "00",

      countDownHour: "00",

      countDownMinutes: "00",

      countDownSeconds: "00",

    };

  },

  mounted() {

    this.timer();

  },

  methods: {

    //  时间格式化

    timeFormat(param) {

      return param < 10 ? "0" + param : param;

    },

    //  倒计时功能

    timer() {

      // new Date() 可自定义为抢购时间

      let failTime = new Date("2021-12-25 00:00:00").getTime() + 1 * 60 * 1000; //到期时间

      let nowTime = new Date().getTime(); // 当前时间

      let leftTime = failTime - nowTime;//剩余时间

      let interval = setInterval(() => {

        let timeObj = {};

        leftTime = leftTime - 1000;

        if (leftTime > 0) {

          let d= parseInt(leftTime / 1000 / 60 / 60 / 24);

          let hour = parseInt((leftTime / 1000 / 60 / 60) % 24);

          let minutes = parseInt((leftTime / 1000 / 60) % 60);

          let seconds = parseInt((leftTime / 1000) % 60);

          timeObj = {

            d: this.timeFormat(d),

            hour: this.timeFormat(hour),

            minutes: this.timeFormat(minutes),

            seconds: this.timeFormat(seconds),

          };

        } else {

          this.isCountDownOver = true;

          clearInterval(interval); // 清除定时器

        }

        this.countDownD=timeObj.d;

        this.countDownHour = timeObj.hour;

        this.countDownMinutes = timeObj.minutes;

        this.countDownSeconds = timeObj.seconds;

      }, 1000);

    },

  },

};

</script>

 

<style lang="less" scoped>

.countDown {

  width:100%;

  font-size: .25rem;

  margin: .1rem auto;

}

.countDown .title {

  font-weight: 700;

  color: #ffffff;

  margin-right: .05rem;

}

.countDown .time {

  background-color: #2d67a3;

  color: #fff;

  margin: 0 .02rem;

  padding: 0 .05rem;

  border-radius: .03rem;

}

.timeOver {

  text-align: center;

  font-weight: 700;

  color: #ffffff;

}

</style>