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

JJCTO袁龙

于 2024-08-19 16:42:47 发布

阅读量1.1k

点赞数 23

分类专栏： Vue 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/yuanlong12178/article/details/141329301

版权

Vue 专栏收录该内容

428 篇文章 5 订阅

订阅专栏

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

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

项目结构

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

/timer-app
├── /src
│   ├── App.vue
│   └── main.js
└── index.html

1. 设置基础项目

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

npm install -g @vue/cli

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

vue create timer-app

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

cd timer-app

我们将在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>

3. 代码解析

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

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