基于Vue 3的计时器应用：实现时间倒计时功能

在本篇文章中，我们将一起实现一个简单的计时器应用。这个应用允许用户设置一个倒计时的时间，并在时间结束时发出提醒。我们将使用Vue 3的setup语法糖构建这个应用，确保代码简洁且易于维护。

项目结构

我们的倒计时应用将包含以下结构：

/timer-app
├── /src
│   ├── App.vue
│   └── main.js
└── index.html
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
1. 设置基础项目

首先，确保你已经安装了Vue CLI。如果没有，可以通过命令行使用以下命令安装：

npm install -g @vue/cli
  • 1.

接下来，创建一个新的Vue项目：

vue create timer-app
  • 1.

选择默认配置，完成后进入项目目录：

cd timer-app
  • 1.

我们将在src目录下编辑App.vue文件，以实现我们的计时器功能。

2. 编写计时器组件

打开src/App.vue文件，并替换其中的内容如下：

<template>
  <div id="app">
    <h1>简单倒计时器</h1>
    <input
      type="number"
      v-model="inputTime"
      placeholder="设置倒计时（秒）"
      min="1"
    />
    <button @click="startTimer" :disabled="isRunning">开始倒计时</button>
    <p v-if="isRunning">{{ remainingTime }}秒</p>
    <p v-if="message" :class="{ 'text-danger': !isRunning }">{{ message }}</p>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const inputTime = ref(0); // 用户输入的倒计时秒数
    const remainingTime = ref(0); // 剩余倒计时秒数
    const isRunning = ref(false); // 计时器是否在运行
    const message = ref(''); // 显示的消息

    let timer;

    const startTimer = () => {
      if (inputTime.value <= 0) {
        message.value = '请输入正确的时间';
        return;
      }
      remainingTime.value = inputTime.value;
      message.value = '';
      isRunning.value = true;

      timer = setInterval(() => {
        if (remainingTime.value > 0) {
          remainingTime.value--;
        } else {
          clearInterval(timer);
          isRunning.value = false;
          message.value = '时间到！';
        }
      }, 1000);
    };

    watch(inputTime, () => {
      if (isRunning.value) {
        clearInterval(timer);
        isRunning.value = false;
        message.value = '请重新开始倒计时';
      }
    });

    return {
      inputTime,
      remainingTime,
      isRunning,
      message,
      startTimer,
    };
  },
};
</script>

<style>
#app {
  text-align: center;
  margin-top: 50px;
}
input {
  padding: 10px;
  font-size: 16px;
}
button {
  padding: 10px 20px;
  font-size: 16px;
  margin-top: 10px;
}
.text-danger {
  color: red;
  font-weight: bold;
}
</style>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 52.
  • 53.
  • 54.
  • 55.
  • 56.
  • 57.
  • 58.
  • 59.
  • 60.
  • 61.
  • 62.
  • 63.
  • 64.
  • 65.
  • 66.
  • 67.
  • 68.
  • 69.
  • 70.
  • 71.
  • 72.
  • 73.
  • 74.
  • 75.
  • 76.
  • 77.
  • 78.
  • 79.
  • 80.
  • 81.
  • 82.
  • 83.
  • 84.
  • 85.
3. 代码解析

在上述代码中，我们使用了Vue 3的setup函数和ref函数来创建响应式的数据。以下是关键部分的解释：

  • 输入处理：用户通过inputTime输入秒数，并且这个值始终保持为响应式。当用户点击“开始倒计时”按钮时，startTimer方法将被调用。
  • 开始计时：在startTimer方法中，我们首先检查输入的有效性（确保大于0），然后将其赋值给remainingTime。接着使用setInterval方法每秒更新剩余时间。
  • 结束计时：当remainingTime降至0时，清除定时器，并更新状态为不在运行，同时显示"时间到！"的消息。
  • 监控输入变化：使用watch监听inputTime变化，如果用户在计时器运行时改变输入内容，计时器会停止，并提醒用户重新开始。
4. 运行应用

完成上述代码后，我们可以开始运行应用。在项目根目录下，使用以下命令启动本地开发服务器：

npm run serve
  • 1.

打开浏览器，访问http://localhost:8080，你将看到我们的计时器应用界面。

5. 后续扩展

这个简单的计时器应用只是一个开端，您可以进一步扩展：

  • 增加暂停和重置功能：允许用户暂停计时并在需要时重置。
  • 声音提醒：时间结束时播放声音。
  • 美化界面：使用CSS或UI框架（如Vuetify或Element Plus）来美化界面。
6. 总结

在这个博客中，我们实现了一个简单但实用的倒计时器应用，利用Vue 3的setup法糖和响应式特性，使得代码结构清晰。

最后问候亲爱的朋友们，并诚挚地邀请你们阅读我的全新著作。 书籍简介

基于Vue 3的计时器应用：实现时间倒计时功能_响应式