创建一个简单的时间管理应用程序，结合 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>
12345678910111213141516171819202122232425262728293031 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; } }
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108 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(); // 初始化时显示默认时间
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172
