<!--时间-->
<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 {
  name: "time-untils",
  props: ["s"],
  data() {
    return {
      time: {
        hour: "",
        minitus: "",
        seconds: ""
      },
      nowTime: "",
      week: [
        "星期天",
        "星期一",
        "星期二",
        "星期三",
        "星期四",
        "星期五",
        "星期六"
      ]
    };
  },
  mounted() {
    this.dateTime();
  },
  methods: {
    dateTime() {
      this.timeFormate();
      setTimeout(() => {
        this.dateTime();
      }, 1000);
    },
    timeFormate() {
      const newtime = new Date();
      this.time.hour = this.getIncrease(newtime.getHours(), 2);
      this.time.minitus = this.getIncrease(newtime.getMinutes(), 2);
      this.time.seconds = this.getIncrease(newtime.getSeconds(), 2);
      this.nowTime =
        this.getIncrease(newtime.getFullYear(), 4) +
        "年" +
        this.getIncrease(newtime.getMonth() + 1, 2) +
        "月" +
        this.getIncrease(newtime.getDate(), 2) +
        "日 " +
        this.week[newtime.getDay()];
      return `${this.time.hour}:${this.time.minitus}:${this.time.seconds}`;
    },
    getIncrease(num, digit) {
      var increase = "";
      for (var i = 0; i < digit; i++) {
        increase += "0";
      }
      return (increase + num).slice(-digit);
    }
  }
};
</script>

<style lang="scss" scoped>
.txt-data .time {
  font-size: 1rem;
  margin-right: 0.5rem;
}
.split {
  animation: shark 1s step-end infinite;
}
@keyframes shark {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
</style>

css实现当前时间

<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 = setTimeout(this.showTime, 1000 * 60 * 60 * 24);//对日期实施有限制，设置1000可以避免，但是用css就没意义
    },
    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)带有星期日期的数字时钟 - Cynical丶Gary - 博客园