Skip to content

Commit b24a517

Browse files
ZebinGaoZebinGao
committed
add pomodoro timer
1 parent 993e95a commit b24a517

4 files changed

Lines changed: 704 additions & 0 deletions

File tree

‎source/pomodoro/index.html‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
---
2+
layout: false
3+
---
4+
<!DOCTYPE html>
5+
<html lang="zh-CN">
6+
<head>
7+
<meta charset="UTF-8">
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
9+
<title>番茄工作计时器</title>
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
<body>
13+
<div class="container">
14+
<div class="header">
15+
<h1>番茄工作计时器</h1>
16+
<div class="theme-toggle">
17+
<button id="theme-toggle" class="theme-btn">🌙</button>
18+
</div>
19+
</div>
20+
21+
<div class="timer-display">
22+
<div id="time">25:00</div>
23+
<div id="mode">专注时间</div>
24+
</div>
25+
26+
<div class="controls">
27+
<button id="start-btn" class="btn">开始</button>
28+
<button id="pause-btn" class="btn" disabled>暂停</button>
29+
<button id="reset-btn" class="btn">重置</button>
30+
</div>
31+
32+
<div class="session-count">
33+
<p>已完成番茄钟: <span id="count">0</span></p>
34+
</div>
35+
36+
<div class="mode-selector">
37+
<button id="work-mode" class="mode-btn active">专注时间</button>
38+
<button id="short-break-mode" class="mode-btn">短休息</button>
39+
<button id="long-break-mode" class="mode-btn">长休息</button>
40+
</div>
41+
42+
<div class="settings">
43+
<h3>自定义时间设置</h3>
44+
<div class="setting-group">
45+
<label for="work-time">专注时间:</label>
46+
<input type="number" id="work-time" min="1" max="60" value="25"> 分钟
47+
</div>
48+
<div class="setting-group">
49+
<label for="short-break-time">短休息时间:</label>
50+
<input type="number" id="short-break-time" min="1" max="30" value="5"> 分钟
51+
</div>
52+
<div class="setting-group">
53+
<label for="long-break-time">长休息时间:</label>
54+
<input type="number" id="long-break-time" min="1" max="60" value="15"> 分钟
55+
</div>
56+
<button id="save-settings" class="btn save-btn">保存设置</button>
57+
</div>
58+
</div>
59+
<script src="script.js"></script>
60+
</body>
61+
</html>

‎source/pomodoro/readme.md‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
2+
## 该应用包含以下特性：
3+
4+
1. 三个核心文件：
5+
6+
- `index.html` - 应用的主页面结构
7+
- `style.css` - 响应式样式设计
8+
- `script.js` - 完整的JavaScript逻辑实现
9+
10+
2. 功能特点：
11+
12+
- 三种模式：专注时间（25分钟）、短休息（5分钟）、长休息（15分钟）
13+
- 开始、暂停、重置控制按钮
14+
- 自动循环模式切换（专注→短休息→专注→短休息→专注→长休息）
15+
- 番茄钟计数器
16+
- 响应式设计，适配移动设备
17+
- 提示音和浏览器通知功能
18+
- 现代化的用户界面设计
19+
20+
3. 技术实现：
21+
22+
- 使用原生JavaScript，无需外部依赖
23+
- 面向对象编程结构
24+
- Web Audio API实现提示音
25+
- HTML5 Notifications API实现桌面通知
26+
- CSS3动画和过渡效果
27+
28+
## 修改番茄工作计时器web应用，增加了以下功能：
29+
30+
1. __自定义定时时间__：
31+
32+
- 用户现在可以在界面上设置专注时间、短休息时间和长休息时间（以分钟为单位）。
33+
- 设置的时间会保存到浏览器的 `localStorage` 中，以便下次访问时自动加载。
34+
- 计时器会根据用户设置的时间进行倒计时。
35+
36+
2. __深色/浅色主题模式__：
37+
38+
- 应用顶部新增了一个主题切换按钮（🌙/☀️）。
39+
- 用户可以点击按钮在深色主题和浅色主题之间切换。
40+
- 主题偏好也会保存到 `localStorage` 中，以便下次访问时自动应用。
41+

0 commit comments

Comments
 (0)