时间管理应用（可复制源码）
创建一个简单的时间管理应用程序，结合 Pomodoro 技术使用 HTML、CSS 和 JavaScript
1. HTML
创建一个基本的 HTML 文件 (index.html)：
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pomodoro 时间管理应用</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">
</head>
<body>
<div class="container">
<h1>Pomodoro 时间管理应用</h1>
<div class="timer">
<span id="timeDisplay">25:00</span>
</div>
<div class="time-settings">
<input type="number" id="workTime" placeholder="工作时间（分钟）" value="25" min="1">
<input type="number" id="breakTime" placeholder="休息时间（分钟）" value="5" min="1">
</div>
<div class="button-group">
<button id="startBtn"><i class="fas fa-play"></i> 开始</button>
<button id="stopBtn"><i class="fas fa-pause"></i> 停止</button>
<button id="resetBtn"><i class="fas fa-refresh"></i> 重置</button>
</div>
<div class="status" id="statusDisplay">状态: 准备开始</div>
<div class="stats" id="statsDisplay">完成的 Pomodoro 数量: <span id="pomodoroCount">0</span></div>
</div>
<audio id="timerEndSound" src="timer-end-sound.mp3" preload="auto"></audio>
<script src="script.js"></script>
</body>
</html>
2. CSS
创建一个简单的 CSS 文件 (styles.css) 来美化界面：
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(to right, #f0f7ff, #e8f0fe);
margin: 0;
padding: 20px;
}
.container {
max-width: 400px;
margin: auto;
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
text-align: center;
}
h1 {
margin-bottom: 20px;
font-size: 24px;
color: #333;
}
.timer {
font-size: 64px;
margin: 20px 0;
color: #28a745;
border: 2px solid #28a745;
border-radius: 10px;
padding: 20px;
background-color: #e9f7ef;
transition: background-color 0.5s ease;
}
.timer.active {
background-color: #d4edda;
}
.time-settings {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
input[type="number"] {
width: 48%;
padding: 10px;
border-radius: 5px;
border: 1px solid #ccc;
font-size: 16px;
transition: border-color 0.3s;
}
input[type="number"]:focus {
border-color: #28a745;
}
.button-group {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 5px;
cursor: pointer;
background-color: #007bff;
color: white;
font-size: 16px;
transition: background-color 0.3s, transform 0.2s;
flex: 1;
}
button:hover {
background-color: #0056b3;
transform: scale(1.05);
}
.status {
margin-top: 20px;
font-size: 18px;
color: #555;
}
.stats {
margin-top: 10px;
font-size: 16px;
color: #888;
}
/* 响应式设计 */
@media (max-width: 500px) {
.timer {
font-size: 48px;
}
button {
padding: 8px;
font-size: 14px;
}
input[type="number"] {
font-size: 14px;
}
}
3. JavaScript
最后，创建一个 JavaScript 文件 (script.js) 来处理计时器逻辑：
let timer;
let isRunning = false;
let timeLeft; // 用于存储剩余时间
let pomodoroCount = 0;
const timeDisplay = document.getElementById("timeDisplay");
const statusDisplay = document.getElementById("statusDisplay");
const pomodoroCountDisplay = document.getElementById("pomodoroCount");
const timerEndSound = document.getElementById("timerEndSound");
function updateDisplay() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
timeDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
function startTimer() {
if (isRunning) return; // 如果已经在运行，则不再启动
isRunning = true;
// 获取用户输入的工作和休息时间
const workTime = parseInt(document.getElementById("workTime").value) || 25;
const breakTime = parseInt(document.getElementById("breakTime").value) || 5;
// 初始化工作时间
timeLeft = workTime * 60; // 设置工作时间
statusDisplay.textContent = "状态: 工作中";
updateDisplay(); // 更新显示
timer = setInterval(() => {
if (timeLeft <= 0) {
clearInterval(timer);
isRunning = false;
pomodoroCount++;
pomodoroCountDisplay.textContent = pomodoroCount;
timerEndSound.play(); // 播放结束声音
statusDisplay.textContent = "状态: 休息时间！";
timeLeft = breakTime * 60; // 设置休息时间
updateDisplay(); // 更新显示
startTimer(); // 休息结束后自动开始下一个Pomodoro
} else {
timeLeft--;
updateDisplay();
}
}, 1000);
}
function stopTimer() {
clearInterval(timer);
isRunning = false;
statusDisplay.textContent = "状态: 停止";
}
function resetTimer() {
clearInterval(timer);
isRunning = false;
const workTime = parseInt(document.getElementById("workTime").value) || 25;
timeLeft = workTime * 60; // 重置为用户输入的工作时间
updateDisplay();
pomodoroCount = 0; // 重置Pomodoro计数
pomodoroCountDisplay.textContent = pomodoroCount;
statusDisplay.textContent = "状态: 准备开始";
}
// 事件监听
document.getElementById("startBtn").addEventListener("click", startTimer);
document.getElementById("stopBtn").addEventListener("click", stopTimer);
document.getElementById("resetBtn").addEventListener("click", resetTimer);
// 初始化显示
resetTimer(); // 初始化时显示默认时间
原文地址：https://blog.csdn.net/wxdzuishaui/article/details/143631295
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！