基于vue的倒计时功能

前言
目前在工作中用到的都是以vue框架实现的，本文记录开发中遇到的功能如何实现的。
要求实现一个活动页面的倒计时功能。如图

HTML代码

<template>
  <div class="changeTab">
    <img src="../assets/bg@3x.png" alt="背景图" class="bgImg" />
    <img src="../assets/time@3x.png" alt="计时" class="countDown" />
    <span class="time left">{{decade}}</span>
    <span class="time right">{{unit}}</span>
  </div>
</template>

JS代码

<script>
export default {
  data() {
    return {
      startTime: "2019.11.1 00:00:00"  //设置开始时间
    };
  },
  computed: {
  //decade是计算倒计时的第十位的天数
    decade: function() {
      let time = new Date(this.startTime).getTime();
      let now = new Date();
      let time1 = Math.ceil((time - now) / 86400000);
      let num = parseInt(time1 / 10);
      return num;
    },
    //unit是计算倒计时的第个位数的天数
    unit: function() {
      let time = new Date(this.startTime).getTime();
      let now = new Date();
      let time1 = Math.ceil((time - now) / 86400000);  //一天有86400000毫秒
      let num = parseInt(time1 % 10);
      return num;
    }
  }
};
</script>

getTime() 方法可返回距 1970 年 1 月 1 日之间的毫秒数

CSS代码

用的scss预编译

<style lang='scss' scoped>
.changeTab {
  .bgImg {
    width: 100%;
    height: 100%;
  }
  .countDown {
    width: 7rem;
    height: 8rem;
    position: fixed;
    top: 1rem;
    right: 0;
  }
  .time {
    font-size: 1rem;
    font-family: Source Han Sans SC;
    font-weight: bold;
    color: rgba(255, 110, 134, 1);
    line-height: 1rem;
    text-align: center;
  }
  .left {
    position: fixed;
    top: 6rem;
    right: 4.1rem;
  }
  .right {
    position: fixed;
    top: 6rem;
    right: 3.1rem;
  }
}

结语

若有不足之处，望指出，谢谢！