时间管理应用（可复制源码）

创建一个简单的时间管理应用程序，结合 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) 来美化界面：

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(); // 初始化时显示默认时间