效果图
Vue2 倒计时计时器工具教程
在本教程中，我们将一步步实现一个 Vue2 倒计时计时器工具。这个工具允许用户在工作和休息模式之间切换，并设置倒计时时间。倒计时结束时，系统会发出提醒，提示用户切换工作或休息状态。非常适合初学者练习 Vue 的数据绑定、计算属性和事件处理等基础知识。
目录
项目介绍
本项目旨在使用 Vue2 实现一个简单的倒计时计时器，用户可以设置计时器的模式（工作模式或休息模式），并根据倒计时结果进行提示。项目主要包括时间的倒计时逻辑、模式切换以及倒计时结束时的提醒功能。
需求分析
- 工作模式与休息模式：用户可以选择工作模式（25分钟）或休息模式（5分钟），每种模式都会有相应的默认时间设置。
- 倒计时功能：当用户设置好时间并点击“开始”按钮时，倒计时开始并每秒递减，直到倒计时结束。
- 提醒功能：当倒计时结束时，系统会弹出提示，提醒用户该开始休息或继续工作。
- 重置功能：用户可以随时点击“重置”按钮将计时器恢复到默认的时间设置。
搭建步骤
1. 搭建基础页面结构
首先，我们需要为倒计时计时器工具创建一个基本的页面结构，页面包含：
- 标题显示。
- 用户选择模式的单选按钮（工作模式或休息模式）。
- 输入框用于设置分钟数。
- 显示倒计时的区域。
- “开始”和“重置”按钮。
HTML 结构如下：
<div id="app">
<div class="container">
<h2>倒计时计时器</h2>
<div class="timer-mode">
<label>
<input type="radio" value="work" v-model="timerMode"> 工作模式
</label>
<label>
<input type="radio" value="break" v-model="timerMode"> 休息模式
</label>
</div>
<input
type="number"
v-model.number="minutes"
placeholder="设置分钟"
/>
<div class="timer-display">{{ formattedTime }}</div>
<button @click="startTimer" :disabled="isActive">开始</button>
<button @click="resetTimer">重置</button>
<p>{{ message }}</p>
</div>
</div>
2. 实现倒计时逻辑
倒计时通过 Vue 的 setInterval 来实现，使用 minutes 和 seconds 来管理时间的递减。每秒钟递减一秒，当秒数为 0 且分钟也为 0 时，倒计时结束，并触发提醒。
startTimer() {
if (this.isActive) return;
this.isActive = true;
this.timer = setInterval(() => {
if (this.seconds === 0) {
if (this.minutes === 0) {
clearInterval(this.timer);
this.isActive = false;
this.alertUser();
return;
}
this.minutes--;
this.seconds = 59;
} else {
this.seconds--;
}
}, 1000);
}
3. 处理模式切换
我们提供了两个模式：工作模式（25分钟）和休息模式（5分钟）。当用户选择模式时，倒计时会自动调整到相应的时间，使用 watch 监视模式的变化来触发时间重置。
watch: {
timerMode(newMode) {
if (newMode === 'work') {
this.minutes = 25;
this.seconds = 0;
} else if (newMode === 'break') {
this.minutes = 5;
this.seconds = 0;
}
this.resetTimer();
}
}
4. 实现提醒功能
当倒计时结束时，系统会弹出一个提醒框，告知用户当前模式下时间已结束。提醒使用浏览器的 alert() 函数来实现。
alertUser() {
this.message = this.timerMode === 'work'
? "工作时间结束了！请休息一下。"
: "休息时间结束了！准备开始工作。";
alert(this.message);
}
详细代码实现
完整的 Vue2 倒计时计时器工具代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue2 倒计时计时器工具</title>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f0f0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 400px;
text-align: center;
}
input {
width: 100px;
padding: 10px;
margin: 10px;
border-radius: 5px;
border: 1px solid #ccc;
text-align: center;
}
button {
margin: 5px;
padding: 10px 20px;
border: none;
border-radius: 5px;
background-color: #4CAF50;
color: white;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}
.timer-mode {
margin: 10px 0;
}
.timer-display {
font-size: 2em;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="app">
<div class="container">
<h2>倒计时计时器</h2>
<div class="timer-mode">
<label>
<input type="radio" value="work" v-model="timerMode"> 工作模式
</label>
<label>
<input type="radio" value="break" v-model="timerMode"> 休息模式
</label>
</div>
<input
type="number"
v-model.number="minutes"
placeholder="设置分钟"
/>
<div class="timer-display">{{ formattedTime }}</div>
<button @click="startTimer" :disabled="isActive">开始</button>
<button @click="resetTimer">重置</button>
<p>{{ message }}</p>
</div>
</div>
<script>
new Vue({
el: '#app',
data() {
return {
timerMode: 'work', // 'work' 为工作模式，'break' 为休息模式
minutes: 25, // 默认工作模式下设置25分钟
seconds: 0,
timer: null,
isActive: false,
message: ""
};
},
computed: {
// 格式化显示时间
formattedTime() {
let mins = String(this.minutes).padStart(2, '0');
let secs = String(this.seconds).padStart(2, '0');
return `${mins}:${secs}`;
}
},
methods: {
startTimer() {
if (this.isActive) return;
this.isActive = true;
this.timer = setInterval(() => {
if (this.seconds === 0) {
if (this.minutes === 0) {
clearInterval(this.timer);
this.isActive = false;
this.alertUser();
return;
}
this.minutes--;
this.seconds = 59;
} else {
this.seconds--;
}
}, 1000);
},
resetTimer() {
clearInterval(this.timer);
this.isActive = false;
this.seconds = 0;
this.minutes = this.timerMode === 'work' ? 25 : 5; // 重置工作为25分钟，休息为5分钟
this.message = "";
},
alertUser() {
this.message = this.timerMode === 'work'
? "工作时间结束了！请休息一下。"
: "休息时间结束了！准备开始工作。";
alert(this.message);
}
},
watch: {
// 当用户切换计时模式时，自动设置时间
timerMode(newMode) {
if (newMode === 'work') {
this.minutes = 25;
this.seconds = 0;
} else if (newMode === 'break') {
this.minutes = 5;
this.seconds = 0;
}
this.resetTimer(); // 切换模式时重置计时器
}
}
});
</script>
</body>
</html>
扩展功能建议
- 自定义时间设置：让用户能够自定义工作时间和休息时间，而不仅仅是默认的 25 分钟和 5 分钟。
- 长休息模式：每完成 4 个工作周期后，提供一个长时间休息（如 15 分钟）的模式。
- 声音提醒：倒计时结束时，除了弹窗提醒，可以加入音效提醒功能。
- 自动循环模式：工作模式与休息模式可以自动循环切换，减少用户手动操作。
标签：seconds,模式,倒计时,计时器,Vue2,minutes,休息 From： https://blog.csdn.net/qq_22182989/article/details/143170683