组件：时钟

最新推荐文章于 2025-04-15 16:06:44 发布

Gabriel_wei

最新推荐文章于 2025-04-15 16:06:44 发布

阅读量413

点赞数

CC 4.0 BY-SA版权

分类专栏： vue 组件库

本文链接：https://blog.youkuaiyun.com/Gabriel_wei/article/details/105064191

vue 同时被 2 个专栏收录

31 篇文章

订阅专栏

组件库

23 篇文章

订阅专栏

本文介绍了一个使用Vue.js实现的实时日期时间显示组件，通过定时更新DOM元素来展示当前的日期和时间，包括小时、分钟、秒及星期。组件还包含了一个零填充函数，用于保持时间格式的一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果

在这里插入图片描述

代码

<template>
  <div class="this">
      {{ date }} {{ time }}
  </div>
</template>
<script>
export default {
  name: "",
  components: {},
  data() {
    return {
      time: "",
      date: "",
      week: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
    };
  },
  methods: {
    updateTime() {
      var cd = new Date();
      this.time =
        this.zeroPadding(cd.getHours(), 2) +
        ":" +
        this.zeroPadding(cd.getMinutes(), 2) +
        ":" +
        this.zeroPadding(cd.getSeconds(), 2);
      this.date =
        this.zeroPadding(cd.getFullYear(), 4) +
        "-" +
        this.zeroPadding(cd.getMonth() + 1, 2) +
        "-" +
        this.zeroPadding(cd.getDate(), 2) +
        " " +
        this.week[cd.getDay()];
    },
    zeroPadding(num, digit) {
      var zero = "";
      for (var i = 0; i < digit; i++) {
        zero += "0";
      }
      return (zero + num).slice(-digit);
    }
  },
  mounted() {
    // var timerID = setInterval(this.updateTime, 1000);
    setInterval(this.updateTime, 1000);
    // this.updateTime();
  }
};
</script>
<style lang="less" scoped>
@import url("./clock.less");
</style>

html,
body {
    height: 100%;
}
body {
    background: #0f3854;
    background: -webkit-radial-gradient(center ellipse, #0a2e38 0%, #000000 70%);
    background: radial-gradient(ellipse at center, #0a2e38 0%, #000000 70%);
    background-size: 100%;
}
p {
    margin: 0;
    padding: 0;
}
#clock {
    font-family: 'Share Tech Mono', monospace;
    color: #ffffff;
    text-align: center;
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    color: #daf6ff;
    text-shadow: 0 0 20px #0aafe6, 0 0 20px rgba(10, 175, 230, 0);
}
#clock .time {
    letter-spacing: 0.05em;
    font-size: 80px;
    padding: 5px 0;
}
#clock .date {
    letter-spacing: 0.1em;
    font-size: 24px;
}
#clock .text {
    letter-spacing: 0.1em;
    font-size: 12px;
    padding: 20px 0 0;
}