活动倒计时的做法

Posted 2021-03-09 ympjsc

此篇用vue项目作为例子

首先再页面加载的时候拿到活动的当前时间、截止时间。

第二步贴代码

<template>
  <div class="countdown">
    <div class="countdown-time">
      <span class="countdown-word">{{countdownDateNow.days|splitTime(0)}}</span>
      <span class="countdown-word">{{countdownDateNow.days|splitTime(1)}}</span>
    </div>
    <div class="countdown-time">
      <span class="countdown-word">{{countdownDateNow.hours|splitTime(0)}}</span>
      <span class="countdown-word">{{countdownDateNow.hours|splitTime(1)}}</span>
    </div>
    <div class="countdown-time">
      <span class="countdown-word">{{countdownDateNow.minutes|splitTime(0)}}</span>
      <span class="countdown-word">{{countdownDateNow.minutes|splitTime(1)}}</span>
    </div>
    <div class="countdown-time">
      <span class="countdown-word">{{countdownDateNow.seconds|splitTime(0)}}</span>
      <span class="countdown-word">{{countdownDateNow.seconds|splitTime(1)}}</span>
    </div>
  </div>
</template>
<script>
const moment = require(‘moment‘);

export default {
  // props: {
  //   countdownDate: {
  //     type: Object,
  //     default() {
  //       return {};
  //     },
  //   },
  // },
  data() {
    return {
      // 本来countdownDate是在props中传递过来的

      countdownDate: {
        currentTime: "2020-02-15 13:39:45",
        days: "00",
        endTime: "2020-02-16 00:00:00",
        hours: 10,
        minutes: 18,
        seconds: 25
      },
      // countdownDateNow: this.countdownDate,
      countdownDateNow: {}, // 本来直接用countdownDateNow: this.countdownDate,  现在是在mounted中获取
    };
  },
  filters: {
    splitTime(str, pos) {
      return String(str).charAt(pos);
    },
  },  
  methods: {
    countdown() {
      const activityTime = moment(this.countdownDate.endTime).format(‘YYYY-MM-DD HH:mm:ss‘);
      const currentTime = moment(this.countdownDate.currentTime).format(‘YYYY-MM-DD HH:mm:ss‘);
      let countDown = moment(activityTime).diff(currentTime);
      console.log(countDown, ‘countDown‘);
      const _second = 1000;
      const _minute = _second * 60;
      const _hour = _minute * 60;
      const _day = _hour * 24;
      let timer;
      timer = setInterval(() => {
        countDown -= 1000;
        if (countDown < 0) {
          clearInterval(timer);
          this.countdownDateNow.timeOut = true;
          return;
        }
        // 向下取整
        let days = Math.floor(countDown / _day);
        let hours = Math.floor((countDown % _day) / _hour);
        let minutes = Math.floor((countDown % _hour) / _minute);
        let seconds = Math.floor((countDown % _minute) / _second);
        const addZero = (val) => (val >= 10 ? val : `0${val}` ); // 补0函数
        this.countdownDateNow.days = addZero(days);
        this.countdownDateNow.hours = addZero(hours);
        this.countdownDateNow.minutes = addZero(minutes);
        this.countdownDateNow.seconds = addZero(seconds);
      }, 1000);
    },
  },
  mounted() {
    this.countdownDateNow = this.countdownDate;
    this.countdown();
    console.log(this.countdownDateNow, ‘day‘);
  },
};
</script>
<style lang="less" type="text/less">
.countdown {
  background: url("./../img/top-countdown.png") no-repeat center;
  background-size: contain;
  margin: 0 auto;
  height: 35px;
  width: 310px;
  color: #08e7fc;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  padding-left: 111px;
  display: flex;
  .countdown-time {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    margin-right: 25px;
    &:nth-child(3) {
      margin-right: 22px;
    }
    &:nth-child(4) {
      margin-right: 0;
    }
  }
  .countdown-word {
    margin-right: 2px;
  }
}
</style>

效果图：