[JavaScript知识库]vue实时显示当前时间

<!--时间-->
<template>
  <span class="time" id="time">
    <span class="date">{{ nowTime }}</span>
    <span class="hour"></span>
    <a class="split">:</a>
    <span class="minitus"></span>
    <a class="split">:</a>
    <span class="seconds"></span>
  </span>
</template>
<script>
export default {
  data() {
    return {
      nowTime: "",
      timeId: ""
    };
  },
  created() {},
  mounted() {
    this.showTime();
  },
  methods: {
    sitTime() {
      const d = new Date();
      const h = d.getHours();
      const m = d.getMinutes();
      const s = d.getSeconds();
      time.style.setProperty("--ds", s);
      time.style.setProperty("--dm", m + s / 60);
      time.style.setProperty("--dh", h + m / 60 + s / 3600);
    },
    // 显示当前时间
    timeFormate(timeStamp) {
      let year = new Date(timeStamp).getFullYear();
      let month =
        new Date(timeStamp).getMonth() + 1 < 10
          ? "0" + (new Date(timeStamp).getMonth() + 1)
          : new Date(timeStamp).getMonth() + 1;
      let date =
        new Date(timeStamp).getDate() < 10
          ? "0" + new Date(timeStamp).getDate()
          : new Date(timeStamp).getDate();

      let week = new Date(timeStamp).getDay();
      let weeks = ["日", "一", "二", "三", "四", "五", "六"];
      let getWeek = "星期" + weeks[week];
      this.nowTime = year + "年" + month + "月" + date + "日 " + getWeek;
    },
    showTime() {
      this.timeFormate(new Date());
      this.sitTime();
      this.timeId = setInterval(this.showTime, 1000 * 60 * 60 * 24);
    },
    beforeDestroy() {
      //实例销毁前清除定时器
      if (this.timeId) {
        clearInterval(this.timeId);
      }
    }
  }
};
</script>

<style lang="scss" scoped>
@property --h {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --m {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}
@property --s {
  syntax: "<integer>";
  inherits: false;
  initial-value: 0;
}

.time {
  display: flex;
  align-items: center;
  justify-content: center;
  --step: 60s;
  font-family: Consolas, Monaco, monospace;
  font-size: 1rem;
  .date {
    margin-right: 0.5rem;
  }
}
.split {
  animation: shark 1s step-end infinite;
}

.hour::after {
  counter-reset: hour var(--h);
  content: counter(hour, decimal-leading-zero);
  animation: hour calc(var(--step) * 60 * 24) infinite steps(24);
  animation-delay: calc(-1 * var(--step) * var(--dh) * 60);
}
.minitus::after {
  counter-reset: minitus var(--m);
  content: counter(minitus, decimal-leading-zero);
  animation: minitus calc(var(--step) * 60) infinite steps(60);
  animation-delay: calc(-1 * var(--step) * var(--dm));
}
.seconds::after {
  counter-reset: seconds var(--s);
  content: counter(seconds, decimal-leading-zero);
  animation: seconds var(--step) infinite steps(60);
  animation-delay: calc(-1 * var(--step) * var(--ds) / 60);
}
@keyframes hour {
  to {
    --h: 24;
  }
}
@keyframes minitus {
  to {
    --m: 60;
  }
}
@keyframes seconds {
  to {
    --s: 60;
  }
}
@keyframes shark {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
</style>

参考：

vue实时显示当前时间和天气

还在使用定时器吗？CSS 也能实现电子时钟 - 掘金

JS框架_(Vue.js)带有星期日期的数字时钟