【Vue3学习日记】实战篇：如何在页面展示系统时间

在现代 Web 应用中，实时显示系统时间是一个常见的需求。本文将详细介绍如何使用 Vue.js 实现一个简单的实时时间显示组件，从基础的 HTML 结构到 Vue.js 的数据绑定和方法调用，一步步带你了解整个实现过程。

为什么选择 Vue.js？ Vue.js 是一个轻量级的前端框架，以其简洁的语法和高效的性能受到广泛欢迎。Vue.js 的响应式系统使得数据绑定变得非常简单，我们可以轻松地将数据变化反映到视图中。此外，Vue.js 的组件化设计使得代码更加模块化和可复用，非常适合构建复杂的单页应用。

代码展示如下↓

整个组件的代码如下

/**
 * 日期和时间组件
 */
<template >
    <div style="padding: 30px;font-size: 30px;">
        <span class="time" id="time">
            今天是：<span class="date">{{ nowTime }}</span>
            <span class="hour" style="margin-left: 5px;">{{time.hour}}</span>
            <a class="split">:</a>
            <span class="minutes">{{time.minutes}}</span>
            <a class="split">:</a>
            <span class="seconds">{{time.seconds}}</span>
        </span>
    </div>
</template>

<script>
    export default {
        name: "DateUtils",
        props: ["s"],
        data() {
            /**
             * 初始化数据
             * @returns {Object} 初始化数据对象
             */
            return {
                time: {
                    hour: "",
                    minutes: "",
                    seconds: ""
                },
                nowTime: "",
                week: [
                    "星期天",
                    "星期一",
                    "星期二",
                    "星期三",
                    "星期四",
                    "星期五",
                    "星期六"
                ]
            };
        },
        mounted() {
            /**
             * 组件挂载后调用dateTime方法
             */
            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.minutes = 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()];
            },
            /**
             * 在数字前补全零
             * @param {number} num - 需要补全的数字
             * @param {number} digit - 补全的位数
             * @returns {string} 补全后的字符串
             */
            getIncrease(num, digit) {
                var increase = "";
                for (var i = 0; i < digit; i++) {
                    increase += "0";
                }
                return (increase + num).slice(-digit);
            }
        }
    }
</script>

<style scoped>
    /* 时间样式 
    选择所有在 .txt-data 元素内部的 .time 元素。
    将这些元素的字体大小设置为 1rem。
    将这些元素的右边距设置为 0.5rem。*/
    .txt-data .time {
        font-size: 1rem;
        margin-right: 0.5rem;
    }

    /* .split用于实现冒号闪烁动画 */
    .split {
        animation: shark 1s step-end infinite;
        vertical-align: center;
        margin-left: 2px;
        margin-right: 2px;
    }
    /* 动画效果
    为冒号设计闪烁效果
    0% 和 100%：在动画的开始和结束时，元素是完全不透明的。
    50%：在动画的中间点，元素是完全透明的。 */
    @keyframes shark {
        0%,
        100% {
            opacity: 1;
        }
        50% {
            opacity: 0;
        }
    }
</style>

实现的页面效果如图

那么，这些代码是如何获取并展示系统时间的呢？

1. 组件结构

其模板和脚本部分如下所示：

模板部分

<template>
  <div style="padding: 30px; font-size: 30px;">
    <span class="time" id="time">
      今天是：<span class="date">{{ nowTime }}</span>
      <span class="hour" style="margin-left: 5px;">{{ time.hour }}</span>
      <a class="split">:</a>
      <span class="minutes">{{ time.minutes }}</span>
      <a class="split">:</a>
      <span class="seconds">{{ time.seconds }}</span>
    </span>
  </div>
</template>

脚本部分

<script>
export default {![时钟图例](C:\Users\Administrator\Desktop\时钟图例.png)
  name: "DateUtils",
  data() {
    return {
      time: {
        hour: "",
        minutes: "",
        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.minutes = 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()];
    },
    getIncrease(num, digit) {
      var increase = "";
      for (var i = 0; i < digit; i++) {
        increase += "0";
      }
      return (increase + num).slice(-digit);
    }
  }
};
</script>

2. 获取系统时间的步骤

2.1 初始化数据

在 data 函数中，我们定义了组件的初始状态：

data() {
  return {
    time: {
      hour: "",
      minutes: "",
      seconds: ""
    },
    nowTime: "",
    week: [
      "星期天",
      "星期一",
      "星期二",
      "星期三",
      "星期四",
      "星期五",
      "星期六"
    ]
  };
}

• time 对象包含 hour、minutes 和 seconds 属性，用于存储当前的时间。
• nowTime 用于存储当前的日期和星期。
• week 数组包含一周的中文表示。

2.2 组件挂载时调用 dateTime 方法

在 mounted 生命周期钩子中，我们调用了 dateTime 方法：

mounted() {
  this.dateTime();
}

• mounted 钩子在组件挂载到 DOM 后被调用。
• this.dateTime() 调用 dateTime 方法，启动时间更新循环。

2.3 dateTime 方法

dateTime 方法负责调用 timeFormate 方法并设置定时器：

methods: {
  dateTime() {
    this.timeFormate();
    setTimeout(() => {
      this.dateTime();
    }, 1000);
  },
  // 其他方法...
}

• this.timeFormate() 调用 timeFormate 方法，获取并格式化当前时间。
• setTimeout(() => { this.dateTime(); }, 1000); 设置一个定时器，每秒钟调用一次 dateTime 方法，实现时间的动态更新。

2.4 timeFormate 方法

timeFormate 方法获取当前时间并格式化：

timeFormate() {
  const newtime = new Date();
  this.time.hour = this.getIncrease(newtime.getHours(), 2);
  this.time.minutes = 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()];
}

• const newtime = new Date(); 创建一个新的 Date 对象，表示当前的系统时间。
• this.time.hour = this.getIncrease(newtime.getHours(), 2); 获取当前的小时数，并使用 getIncrease 方法确保小时数始终显示为两位数。
• this.time.minutes = this.getIncrease(newtime.getMinutes(), 2); 获取当前的分钟数，并使用 getIncrease 方法确保分钟数始终显示为两位数。
• this.time.seconds = this.getIncrease(newtime.getSeconds(), 2); 获取当前的秒数，并使用 getIncrease 方法确保秒数始终显示为两位数。
• this.nowTime 组合当前的年、月、日和星期，并使用 getIncrease 方法确保年、月、日始终显示为指定的位数。

2.5 getIncrease 方法

getIncrease 方法用于在数字前补足零，确保数字的长度达到指定的位数：

getIncrease(num, digit) {
  var increase = "";
  for (var i = 0; i < digit; i++) {
    increase += "0";
  }
  return (increase + num).slice(-digit);
}

• var increase = ""; 初始化一个空字符串 increase，用于存储补足的零。
• for (var i = 0; i < digit; i++) { increase += "0"; } 使用一个 for 循环，将 digit 个零添加到 increase 字符串中。
• return (increase + num).slice(-digit); 将 increase 和 num 拼接成一个字符串，然后使用 slice(-digit) 截取最后 digit 个字符。

3. 动态更新页面

通过 this 关键字，组件可以访问和操作数据属性。每当 time.hour、time.minutes、time.seconds 和 nowTime 发生变化时，Vue.js 会自动更新模板中的相应部分，实现时间的动态显示。

总结

1. 初始化数据：在 data 函数中定义组件的初始状态。
2. 组件挂载时调用 dateTime 方法：在 mounted 钩子中调用 dateTime 方法，启动时间更新循环。
3. dateTime 方法：调用 timeFormate 方法并设置定时器，每秒钟调用一次 dateTime 方法。
4. timeFormate 方法：获取当前时间并格式化，更新 time 和 nowTime 属性。
5. getIncrease 方法：在数字前补足零，确保数字的长度达到指定的位数。
6. 动态更新页面：Vue.js 自动更新模板中的相应部分，实现时间的动态显示。

通过这些步骤，组件能够每秒钟获取并显示当前的系统时间。