vue项目中秒杀倒计时

效果

<!-- home-seckill 秒杀 -->
<template>
  <div class="home-seckill">
    <div class="seckill-time">
      <p>距离2020年还剩：</p>
      <div class="time"><span>{{hour}}</span>: <span>{{time}}</span>: <span>{{sec}}</span></div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  components: {},
  data() {
    return {
      hour: "0",
      time: "0",
      sec: "0",
      timer: null,
    };
  },
  methods: {
    seckill() {
      //获取当前事件
      let now = new Date();
      //设置目标事件
      let newtime = new Date("2022-01-01 00:00:00");
      //时间差
      let timecha = (newtime - now) / 1000;
      //计算小时
      this.hour = Math.floor(timecha / 3600);
      //计算分钟
      this.time = Math.floor((timecha % 3600) / 60);
      //计算秒
      this.sec = Math.floor(timecha % 60);
    },
  },
  computed: {},
  mounted() {
    this.timer = setInterval(this.seckill, 2000);
  },
  destroyed() {
    clearInterval(this.timer);
  },
};
</script>
<style lang='less'>
.home-seckill {
  height: 20rem;
  .seckill-time {
    height: 6rem;
    line-height: 6rem;
    display: flex;
    justify-content: center;
    .time {
      span {
        display: inline-block;
        margin-right: 0.3rem;
        padding: 0.3rem 1rem;
        border-radius: 5rem;
        background-color: black;
        font: normal 700 1.6rem "楷体";
        color: white;
      }
    }
  }
}
</style>

 有人看的话，细讲~