vue 3.0项目天时分秒倒记计时功能

Posted 2021-06-24 自律者更自由

废话不多说，先来上图，看看需求和你们的一样不，可以用的话，一键三连，谢谢

 

 

<template>
  <div class="iss-count">
    <div class="count-title">距离直播开始</div>
    <div class="count-time">
      <div class="time-number">{{ day }}</div>
      <span>天</span>
      <div class="time-number">{{ hour }}</div>
      <span>时</span>
      <div class="time-number">{{ minute }}</div>
      <span>分</span>
      <div class="time-number">{{ second }}</div>
      <span>秒</span>
    </div>
    <a-button class="count-btn" type="primary" @click="goTo">
      立即注册 >>
    </a-button>
  </div>
</template>

<script>
import { reactive, toRefs } from \'vue\';

export default {
  props: [\'time\', \'url\'],
  setup(props, context) {
    const state = reactive({
      day: \'00\',
      hour: \'00\',
      minute: \'00\',
      second: \'00\',
    });

    const openTime = new Date(props.time).getTime();

    let timer = setInterval(() => {
      const now = new Date().getTime();
      if (now > openTime) {
        clearInterval(timer);
        timer = null;
        context.emit(\'fnFinish\');
      } else {
        const diff = openTime - now;
        state.day = Math.floor(diff / 1000 / 60 / 60 / 24)
          .toString()
          .padStart(2, \'0\');
        state.hour = (Math.floor(diff / 1000 / 60 / 60) % 24)
          .toString()
          .padStart(2, \'0\');
        state.minute = (Math.floor(diff / 1000 / 60) % 60)
          .toString()
          .padStart(2, \'0\');
        state.second = (Math.floor(diff / 1000) % 60)
          .toString()
          .padStart(2, \'0\');
      }
    }, 1000);

    return { ...toRefs(state), gotTo: () => window.open(props.url) };
  },
};
</script>

<style lang="less" scoped>
.iss-count {
  padding: 10px;
  text-align: center;
  .count-title {
    font-size: 20px;
  }
  .count-time {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    margin: 50px 0 70px 0;
    .time-number {
      width: 35px;
      height: 40px;
      line-height: 40px;
      font-size: 22px;
      font-weight: bold;
      color: #fff;
      background-color: #595959;
    }
    span {
      margin: 0 8px 0 4px;
    }
  }
  .count-btn {
    padding: 0 40px;
  }
}
</style>