JavaScript 番茄工作法倒计时器：轻松实现时间管理，新手友好教程前端倒计时设计案例：用 JavaScript 实现番茄工作法，代码全解析从零开始构建番茄工作法倒计时器：JavaScript

编程语言 2024-11-01 18:10:13 阅读次数: 0

效果图：

博客教程：用 JavaScript 构建番茄工作法倒计时器

目录
  1. 项目介绍
  2. 工具与环境准备
  3. 项目结构
  4. HTML 构建页面结构
  5. CSS 美化倒计时页面
  6. JavaScript 实现倒计时与番茄工作法功能
  7. 总结

1. 项目介绍

在本教程中，我们将使用 HTML、CSS 和 JavaScript 创建一个带有番茄工作法的倒计时器。番茄工作法是一种有效的时间管理方法，将工作时间分为 25 分钟的工作时间和 5 分钟的休息时间循环。

你将学习如何：

  • 使用 HTML 搭建倒计时页面结构
  • 使用 CSS 为页面设计美观的样式
  • 使用 JavaScript 实现倒计时和番茄工作法功能

2. 工具与环境准备

你只需要以下开发工具即可：

  • 代码编辑器：如 VSCode、Sublime Text 等
  • 浏览器：如 Chrome、Firefox 等，用于测试项目
  • HTML 基础知识：需要掌握基础的 HTML 结构
  • JavaScript 基础知识：了解 JavaScript 的基本语法和函数使用

3. 项目结构

我们将把所有代码写在一个 HTML 文件中，项目结构如下：

├── index.html

在 index.html 文件中，我们将完成页面的布局、样式设计和交互功能。

4. HTML 构建页面结构

首先，我们创建倒计时器的页面布局，包括显示时间的部分和控制按钮。我们还需要提供一个工作时间和休息时间的设置选项。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>番茄工作法倒计时器</title>
</head>
<body>

  <!-- 番茄工作法倒计时页面 -->
  <div id="app">
    <h1>番茄工作法倒计时器</h1>
    
    <!-- 显示倒计时时间 -->
    <div id="timer">
      <span id="minutes">25</span>:<span id="seconds">00</span>
    </div>

    <!-- 控制按钮 -->
    <div id="controls">
      <button id="start">开始</button>
      <button id="pause">暂停</button>
      <button id="reset">重置</button>
    </div>

    <!-- 设置工作与休息时间 -->
    <div id="settings">
      <label>工作时长（分钟）：</label>
      <input type="number" id="workTime" value="25">
      <label>休息时长（分钟）：</label>
      <input type="number" id="breakTime" value="5">
    </div>
  </div>

</body>
</html>

这个结构包括：

  • 一个显示倒计时的区域
  • “开始”、“暂停”、"重置"三个控制按钮
  • 工作时长和休息时长的设置选项

5. CSS 美化倒计时页面

接下来，为页面添加 CSS 样式，使其看起来更美观。

<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  }

  #app {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    width: 100%;
  }

  h1 {
    color: #333;
  }

  #timer {
    font-size: 48px;
    margin: 20px 0;
    color: #4caf50;
  }

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

  #controls button:hover {
    background-color: #45a049;
  }

  #settings {
    margin-top: 20px;
  }

  #settings label {
    margin-right: 10px;
  }

  #settings input {
    width: 50px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>

样式说明：

  • 使用了渐变背景
  • 倒计时器显示部分使用了大字体，并设置了绿色文本，代表正在倒计时
  • 按钮设置了背景颜色和悬停效果
  • 为输入框和标签添加了适当的间距和样式，使页面整洁

6. JavaScript 实现倒计时与番茄工作法功能

接下来，使用 JavaScript 实现倒计时逻辑，并实现番茄工作法的功能。

<script>
  // 获取页面元素
  const startButton = document.getElementById('start');
  const pauseButton = document.getElementById('pause');
  const resetButton = document.getElementById('reset');
  const minutesDisplay = document.getElementById('minutes');
  const secondsDisplay = document.getElementById('seconds');
  const workTimeInput = document.getElementById('workTime');
  const breakTimeInput = document.getElementById('breakTime');

  let workTime = 25;  // 默认工作时间
  let breakTime = 5;   // 默认休息时间
  let isWorkTime = true;  // 当前是否为工作时间
  let timeRemaining = workTime * 60;  // 剩余时间（秒）
  let timerInterval = null;

  // 启动倒计时
  function startTimer() {
    if (timerInterval) return;  // 防止重复启动
    timerInterval = setInterval(() => {
      timeRemaining--;
      updateDisplay();

      // 当时间归零时，切换工作/休息时间
      if (timeRemaining <= 0) {
        if (isWorkTime) {
          timeRemaining = breakTime * 60;
          isWorkTime = false;
          alert('工作时间结束！现在是休息时间');
        } else {
          timeRemaining = workTime * 60;
          isWorkTime = true;
          alert('休息结束！继续工作');
        }
      }
    }, 1000);
  }

  // 更新倒计时显示
  function updateDisplay() {
    const minutes = Math.floor(timeRemaining / 60);
    const seconds = timeRemaining % 60;
    minutesDisplay.textContent = String(minutes).padStart(2, '0');
    secondsDisplay.textContent = String(seconds).padStart(2, '0');
  }

  // 暂停倒计时
  function pauseTimer() {
    clearInterval(timerInterval);
    timerInterval = null;
  }

  // 重置倒计时
  function resetTimer() {
    pauseTimer();
    isWorkTime = true;
    workTime = parseInt(workTimeInput.value) || 25;
    breakTime = parseInt(breakTimeInput.value) || 5;
    timeRemaining = workTime * 60;
    updateDisplay();
  }

  // 初始化页面交互
  startButton.addEventListener('click', startTimer);
  pauseButton.addEventListener('click', pauseTimer);
  resetButton.addEventListener('click', resetTimer);

  // 页面加载时更新显示
  resetTimer();
</script>

代码说明：

  • 倒计时逻辑：每秒减少一次倒计时。当倒计时归零时，判断当前是工作时间还是休息时间，切换状态并弹出提示框。
  • 启动、暂停和重置功能：通过按钮控制倒计时的开始、暂停和重置。
  • 时间显示更新：使用 updateDisplay 函数更新倒计时显示，确保分钟

和秒显示两位数。

7.完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>番茄工作法倒计时器</title>
	<style>
  body {
    font-family: Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background: linear-gradient(135deg, #ff9a9e, #fad0c4);
  }

  #app {
    text-align: center;
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    max-width: 300px;
    width: 100%;
  }

  h1 {
    color: #333;
  }

  #timer {
    font-size: 48px;
    margin: 20px 0;
    color: #4caf50;
  }

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

  #controls button:hover {
    background-color: #45a049;
  }

  #settings {
    margin-top: 20px;
  }

  #settings label {
    margin-right: 10px;
  }

  #settings input {
    width: 50px;
    padding: 5px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
</style>

</head>
<body>

  <!-- 番茄工作法倒计时页面 -->
  <div id="app">
    <h1>番茄工作法倒计时器</h1>
    
    <!-- 显示倒计时时间 -->
    <div id="timer">
      <span id="minutes">25</span>:<span id="seconds">00</span>
    </div>

    <!-- 控制按钮 -->
    <div id="controls">
      <button id="start">开始</button>
      <button id="pause">暂停</button>
      <button id="reset">重置</button>
    </div>

    <!-- 设置工作与休息时间 -->
    <div id="settings">
      <label>工作时长（分钟）：</label>
      <input type="number" id="workTime" value="25">
      <label>休息时长（分钟）：</label>
      <input type="number" id="breakTime" value="5">
    </div>
  </div>
<script>
  // 获取页面元素
  const startButton = document.getElementById('start');
  const pauseButton = document.getElementById('pause');
  const resetButton = document.getElementById('reset');
  const minutesDisplay = document.getElementById('minutes');
  const secondsDisplay = document.getElementById('seconds');
  const workTimeInput = document.getElementById('workTime');
  const breakTimeInput = document.getElementById('breakTime');

  let workTime = 25;  // 默认工作时间
  let breakTime = 5;   // 默认休息时间
  let isWorkTime = true;  // 当前是否为工作时间
  let timeRemaining = workTime * 60;  // 剩余时间（秒）
  let timerInterval = null;

  // 启动倒计时
  function startTimer() {
    if (timerInterval) return;  // 防止重复启动
    timerInterval = setInterval(() => {
      timeRemaining--;
      updateDisplay();

      // 当时间归零时，切换工作/休息时间
      if (timeRemaining <= 0) {
        if (isWorkTime) {
          timeRemaining = breakTime * 60;
          isWorkTime = false;
          alert('工作时间结束！现在是休息时间');
        } else {
          timeRemaining = workTime * 60;
          isWorkTime = true;
          alert('休息结束！继续工作');
        }
      }
    }, 1000);
  }

  // 更新倒计时显示
  function updateDisplay() {
    const minutes = Math.floor(timeRemaining / 60);
    const seconds = timeRemaining % 60;
    minutesDisplay.textContent = String(minutes).padStart(2, '0');
    secondsDisplay.textContent = String(seconds).padStart(2, '0');
  }

  // 暂停倒计时
  function pauseTimer() {
    clearInterval(timerInterval);
    timerInterval = null;
  }

  // 重置倒计时
  function resetTimer() {
    pauseTimer();
    isWorkTime = true;
    workTime = parseInt(workTimeInput.value) || 25;
    breakTime = parseInt(breakTimeInput.value) || 5;
    timeRemaining = workTime * 60;
    updateDisplay();
  }

  // 初始化页面交互
  startButton.addEventListener('click', startTimer);
  pauseButton.addEventListener('click', pauseTimer);
  resetButton.addEventListener('click', resetTimer);

  // 页面加载时更新显示
  resetTimer();
</script>

</body>
</html>

8. 总结

在本教程中，我们使用 HTML、CSS 和 JavaScript 从零构建了一个带有番茄工作法功能的倒计时器。这是一个简单的项目，但它展示了如何结合页面布局、样式设计和 JavaScript 交互功能。通过这个项目，你可以轻松上手 JavaScript 计时器的实现，同时学习时间管理工具的设计方法。

希望这篇教程对你有所帮助，如果你有任何疑问或想法，欢迎留言讨论！

猜你喜欢

转载自blog.csdn.net/qq_22182989/article/details/143225334
今日推荐
周排行
win7之session理解
如何快速上手 AB Testing ？阿里技术专家秘方公开
数据库自助查询平台
【CCF 2017-12-2】游戏问题
Fire!(BFS)
修复GRUB引导故障
老倪祖膏药分销系统
MySQL慢查询日志-捕获慢SQL
批归一化(Batch Normalization)
ssm整合问题-------一
每日归档
更多
2025-03-02(0)
2025-03-01(0)
2025-02-28(0)
2025-02-27(0)
2025-02-26(0)
2025-02-25(0)
2025-02-24(0)
2025-02-23(0)
2025-02-22(0)
2025-02-21(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022