建立一个番茄计时器网站-css教程-PHP中文网

建立一个番茄计时器网站

王林

发布： 2024-08-25 20:31:36

原创

437 人浏览过

Build a Pomodoro Timer Website

介绍

开发者们大家好！我很高兴向大家介绍我的最新项目：番茄计时器。该项目非常适合任何想要提高时间管理技能或练习前端开发的人。番茄计时器是一款简单但功能强大的工具，旨在帮助您将工作分成几个有重点的时间间隔，提高工作效率并保持全天的专注。

项目概况

番茄计时器是一款基于网络的应用程序，允许用户为集中工作设置计时器，通常为 25 分钟，然后进行短暂休息。该项目演示了如何使用 JavaScript 创建功能计时器，以及使用 HTML 和 CSS 创建干净且响应灵敏的用户界面。

特征

简单的计时器界面：极简设计，显示倒计时器和控件。
启动、停止、重置：用户可以使用易于使用的按钮启动、停止和重置计时器。
通知警报：当计时器达到零时，会触发警报，表示会话结束。

使用的技术

HTML：提供番茄计时器的结构。
CSS：设置计时器的样式，确保简洁、现代的设计。
JavaScript：实现计时器的核心功能，包括倒计时逻辑和用户交互。

项目结构

以下是项目结构的概述：

Pomodoro-Timer/
├── index.html
├── style.css
└── script.js

登录后复制

index.html：包含番茄计时器的 HTML 结构。
style.css：包含 CSS 样式，以实现具有视觉吸引力和响应式设计。
script.js：管理计时器功能，包括倒计时和用户交互。

安装

要开始该项目，请按照以下步骤操作：

克隆存储库：

git clone https://github.com/abhishekgurjar-in/Pomodoro-Timer.git

登录后复制

打开项目目录:
```
cd Pomodoro-Timer
```
登录后复制
运行项目:
- 在网络浏览器中打开index.html文件以使用番茄计时器。

用法

在网络浏览器中打开网站。
点击“开始”按钮启动计时器。
停止或重置根据需要使用“停止”和“重置”按钮来计时。
专注于你的工作直到计时器为零，然后在开始下一个会话之前短暂休息。

代码说明

超文本标记语言

index.html 文件定义了番茄计时器的结构，包括标题、计时器显示和控制按钮。这是一个片段：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Pomodoro Timer</title>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js" defer></script>
  </head>
  <body>
    <div class="container">
      <h1 class="title">Pomodoro Timer</h1>
      <p class="timer" id="timer">25:00</p>
      <div class="button-wrapper">
        <button id="start">Start</button>
        <button id="stop">Stop</button>
        <button id="reset">Reset</button>
      </div>
    </div>
    <div class="footer">
      <p>Made with ❤️ by Abhishek Gurjar</p>
    </div>
  </body>
</html>

登录后复制

CSS

style.css 文件设置番茄计时器的样式，确保其具有视觉吸引力和响应能力。以下是一些关键样式：

.container {
  margin: 0 auto;
  max-width: 400px;
  text-align: center;
  padding: 20px;
  font-family: "Roboto", sans-serif;
}

.title {
  font-size: 36px;
  margin-bottom: 10px;
  color: #2c3e50;
}

.timer {
  font-size: 72px;
  color: #2c3e50;
}

button {
  font-size: 18px;
  padding: 10px 20px;
  margin: 10px;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-transform: uppercase;
  transition: opacity 0.3s ease-in-out;
}

button:hover {
  opacity: 0.7;
}

#start {
  background-color: #27ae60;
}

#stop {
  background-color: #c0392b;
}

#reset {
  background-color: #7f8c8d;
}

.footer {
  margin-top: 250px;
  text-align: center;
}

登录后复制

JavaScript

script.js 文件包含番茄计时器的逻辑，包括倒计时机制和处理用户交互。这是一个片段：

const startEl = document.getElementById("start");
const stopEl = document.getElementById("stop");
const resetEl = document.getElementById("reset");
const timerEl = document.getElementById("timer");

let interval;
let timeLeft = 1500;

function updateTimer() {
  let minutes = Math.floor(timeLeft / 60);
  let seconds = timeLeft % 60;
  let formattedTime = `${minutes.toString().padStart(2, "0")}:${seconds
    .toString()
    .padStart(2, "0")}`;

  timerEl.innerHTML = formattedTime;
}

function startTimer() {
  interval = setInterval(() => {
    timeLeft--;
    updateTimer();
    if (timeLeft === 0) {
      clearInterval(interval);
      alert("Time's up!");
      timeLeft = 1500;
      updateTimer();
    }
  }, 1000);
}

function stopTimer() {
  clearInterval(interval);
}

function resetTimer() {
  clearInterval(interval);
  timeLeft = 1500;
  updateTimer();
}

startEl.addEventListener("click", startTimer);
stopEl.addEventListener("click", stopTimer);
resetEl.addEventListener("click", resetTimer);

登录后复制