番茄钟番外版：用游戏化元素提高工作效率！

原创

bug菌

发布于 2025-06-06 16:42:24

3220

🏆本文收录于「滚雪球学SpringBoot」专栏(专栏全网一个名)，手把手带你零基础入门Spring Boot，从入门到就业，助你早日登顶实现财富自由🚀；同时，欢迎大家关注&&收藏&&订阅！持续更新中，up！up！up！！

环境说明：Windows 10 + IntelliJ IDEA 2021.3.2 + Jdk 1.8

选题突然有种灵感，便有了如下故事：

下面是一个简单的番茄钟游戏化工具的实现示例，其中包含计时、进度条、奖励系统和幽默反馈元素。使用HTML、CSS和JavaScript实现前端，具体包括计时、任务列表、进度条动态更新和休息反馈的简单逻辑。

1. HTML结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>番茄钟游戏化工具</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>番茄钟</h1>
        <div id="timer">
            <div id="progress-bar"></div>
            <p id="time-left">25:00</p>
        </div>
        <div class="task-container">
            <input type="text" id="task-input" placeholder="输入任务...">
            <button id="add-task">添加任务</button>
            <ul id="task-list"></ul>
        </div>
        <button id="start-btn">开始工作</button>
        <p id="feedback"></p>
        <div id="reward-message"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    text-align: center;
    padding: 50px;
}

.container {
    background-color: #fff;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
    width: 400px;
    margin: 0 auto;
}

#timer {
    position: relative;
    margin-bottom: 20px;
}

#progress-bar {
    background-color: #4caf50;
    height: 10px;
    width: 0;
    border-radius: 5px;
    transition: width 1s linear;
}

#time-left {
    font-size: 36px;
    margin-top: 10px;
}

.task-container {
    margin-bottom: 20px;
}

#task-input {
    padding: 10px;
    margin-bottom: 10px;
    width: 80%;
}

button {
    padding: 10px 20px;
    background-color: #4caf50;
    border: none;
    color: white;
    cursor: pointer;
    border-radius: 5px;
}

button:disabled {
    background-color: #aaa;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    background-color: #f9f9f9;
    padding: 8px;
    margin: 5px 0;
    border-radius: 5px;
}

#reward-message {
    font-size: 24px;
    margin-top: 20px;
    color: #ff5722;
}

3. JavaScript逻辑

// 获取页面元素
const timeLeftDisplay = document.getElementById("time-left");
const progressBar = document.getElementById("progress-bar");
const startBtn = document.getElementById("start-btn");
const taskInput = document.getElementById("task-input");
const addTaskBtn = document.getElementById("add-task");
const taskList = document.getElementById("task-list");
const feedback = document.getElementById("feedback");
const rewardMessage = document.getElementById("reward-message");

let timer;
let secondsLeft = 25 * 60; // 初始为25分钟（1500秒）
let isWorking = false;
let tasks = [];

// 更新显示的倒计时
function updateTimerDisplay() {
    let minutes = Math.floor(secondsLeft / 60);
    let seconds = secondsLeft % 60;
    timeLeftDisplay.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
}

// 开始工作按钮点击事件
startBtn.addEventListener("click", () => {
    if (!isWorking) {
        isWorking = true;
        startBtn.textContent = "暂停";
        feedback.textContent = "集中精力工作！";
        startTimer();
    } else {
        clearInterval(timer);
        isWorking = false;
        startBtn.textContent = "继续工作";
        feedback.textContent = "休息一会儿吧！";
    }
});

// 启动倒计时
function startTimer() {
    timer = setInterval(() => {
        secondsLeft--;
        updateTimerDisplay();
        progressBar.style.width = `${(1 - secondsLeft / (25 * 60)) * 100}%`;

        if (secondsLeft === 0) {
            clearInterval(timer);
            feedback.textContent = "任务完成！休息一下吧！";
            rewardMessage.textContent = "🎉 恭喜你，完成了一个番茄时段！ 🎉";
            isWorking = false;
            startBtn.textContent = "开始工作";
            resetTimer();
        }
    }, 1000);
}

// 重置计时器
function resetTimer() {
    secondsLeft = 25 * 60;
    updateTimerDisplay();
    progressBar.style.width = '0';
}

// 添加任务功能
addTaskBtn.addEventListener("click", () => {
    if (taskInput.value.trim() !== "") {
        tasks.push(taskInput.value);
        updateTaskList();
        taskInput.value = "";
    }
});

// 更新任务列表
function updateTaskList() {
    taskList.innerHTML = "";
    tasks.forEach((task, index) => {
        const li = document.createElement("li");
        li.textContent = task;
        taskList.appendChild(li);
    });
}

4. 代码解析

HTML部分

我们的HTML结构包含了计时器、进度条、任务输入框以及添加任务的按钮。每次用户点击“开始工作”时，番茄钟将开始计时。
任务输入框用于添加用户的任务，任务列表则会展示当前的任务。

CSS部分

通过CSS，我们设置了计时器的样式，使进度条和时间显示更加直观，同时添加了一些简单的动画效果。
还为按钮、任务输入框和任务列表提供了简单的样式。

JavaScript部分

计时与倒计时：通过setInterval()函数每秒更新一次剩余时间，并更新进度条。
任务管理：用户可以添加任务，所有任务都会动态显示在任务列表中。每完成一个番茄时段，系统将展示奖励信息。
游戏化反馈：每个番茄时段结束时，会显示幽默的反馈语和奖励，增强趣味性。

5. 结论

这个简单的番茄钟游戏化工具通过引入进度条、任务管理和幽默反馈，极大地提升了工作时的趣味性与互动性。用户可以在专注工作的同时，享受任务完成后的成就感和奖励，进而更好地维持工作动力。

这种设计不仅能提高用户的工作效率，还能在每天的工作过程中带来更多的快乐，减少疲劳感，使工作变得更加有趣和富有成就感。

☀️建议/推荐你

无论你是计算机专业的学生，还是对编程有兴趣的小伙伴，都建议直接毫无顾忌的学习此专栏「滚雪球学SpringBoot」(专栏全网独家统一名)，bug菌郑重承诺，凡是学习此专栏的同学，均能获取到所需的知识和技能，全网最快速入门Java编程，就像滚雪球一样，越滚越大，指数级提升。

码字不易，如果这篇文章对你有所帮助，帮忙给bug菌来个一键三连(关注、点赞、收藏) ，您的支持就是我坚持写作分享知识点传播技术的最大动力。同时也推荐大家关注我的硬核公众号:「猿圈奇妙屋」；以第一手学习bug菌的首发干货，不仅能学习更多技术硬货，还可白嫖最新BAT大厂面试真题、4000G Pdf技术书籍、万份简历/PPT模板、技术文章Markdown文档等海量资料，你想要的我都有！

📣关于我

我是bug菌(全网一个名)，CSDN | 掘金 | 腾讯云 | 华为云 | 阿里云 | 51CTO | InfoQ 等社区博客专家，历届博客之星Top30，掘金年度人气作者Top40，51CTO年度博主Top12，掘金等平台签约作者，华为云 | 阿里云| 腾讯云等社区优质创作者，全网粉丝合计30w+ ；硬核微信公众号「猿圈奇妙屋」，欢迎你的加入！免费白嫖最新BAT互联网公司面试题、4000G pdf电子书籍、简历模板等海量资料。

-End-

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 [email protected] 删除。

工具软件

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 [email protected] 删除。

工具软件

登录后参与评论

0 条评论

热度