sonicmaster123 · sonicmaster123 · Apr 16, 2026 · Apr 16, 2026 · Apr 16, 2026
diff --git a/index.html b/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>番茄钟计时器</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <div class="container">
+        <div class="mode-indicator" id="modeIndicator">工作模式</div>
+        <div class="timer" id="timer">25:00</div>
+        <div class="controls">
+            <button id="modeBtn" class="btn btn-mode">切换到休息</button>
+            <button id="startBtn" class="btn btn-start">开始</button>
+            <button id="pauseBtn" class="btn btn-pause">暂停</button>
+            <button id="resetBtn" class="btn btn-reset">重置</button>
+        </div>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,106 @@
+const timerDisplay = document.getElementById('timer');
+const modeIndicator = document.getElementById('modeIndicator');
+const modeBtn = document.getElementById('modeBtn');
+const startBtn = document.getElementById('startBtn');
+const pauseBtn = document.getElementById('pauseBtn');
+const resetBtn = document.getElementById('resetBtn');
+
+const WORK_MINUTES = 25;
+const BREAK_MINUTES = 5;
+let isWorkMode = true;
+let totalSeconds = WORK_MINUTES * 60;
+let timerInterval = null;
+let isRunning = false;
+
+function formatTime(seconds) {
+    const mins = Math.floor(seconds / 60);
+    const secs = seconds % 60;
+    return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
+}
+
+function updateDisplay() {
+    timerDisplay.textContent = formatTime(totalSeconds);
+}
+
+function updateModeUI() {
+    if (isWorkMode) {
+        document.body.classList.remove('break-mode');
+        modeIndicator.textContent = '工作模式';
+        modeBtn.textContent = '切换到休息';
+    } else {
+        document.body.classList.add('break-mode');
+        modeIndicator.textContent = '休息模式';
+        modeBtn.textContent = '切换到工作';
+    }
+}
+
+function setButtonsDisabled(disabled) {
+    modeBtn.disabled = disabled;
+    startBtn.disabled = disabled;
+    pauseBtn.disabled = disabled;
+    resetBtn.disabled = disabled;
+}
+
+function toggleMode() {
+    if (isRunning) {
+        clearInterval(timerInterval);
+        isRunning = false;
+    }
+
+    isWorkMode = !isWorkMode;
+
+    if (isWorkMode) {
+        totalSeconds = WORK_MINUTES * 60;
+    } else {
+        totalSeconds = BREAK_MINUTES * 60;
+    }
+
+    updateModeUI();
+    updateDisplay();
+}
+
+function startTimer() {
+    if (isRunning) return;
+
+    isRunning = true;
+    timerInterval = setInterval(() => {
+        if (totalSeconds > 0) {
+            totalSeconds--;
+            updateDisplay();
+        } else {
+            clearInterval(timerInterval);
+            isRunning = false;
+            setButtonsDisabled(true);
+            alert('时间到');
+            setButtonsDisabled(false);
+        }
+    }, 1000);
+}
+
+function pauseTimer() {
+    if (!isRunning) return;
+
+    clearInterval(timerInterval);
+    isRunning = false;
+}
+
+function resetTimer() {
+    clearInterval(timerInterval);
+    isRunning = false;
+
+    if (isWorkMode) {
+        totalSeconds = WORK_MINUTES * 60;
+    } else {
+        totalSeconds = BREAK_MINUTES * 60;
+    }
+
+    updateDisplay();
+}
+
+modeBtn.addEventListener('click', toggleMode);
+startBtn.addEventListener('click', startTimer);
+pauseBtn.addEventListener('click', pauseTimer);
+resetBtn.addEventListener('click', resetTimer);
+
+updateModeUI();
+updateDisplay();
diff --git a/style.css b/style.css
@@ -0,0 +1,131 @@
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    min-height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    transition: background 0.5s ease;
+}
+
+body.break-mode {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+}
+
+.container {
+    background: white;
+    padding: 40px 60px;
+    border-radius: 20px;
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
+    text-align: center;
+}
+
+.mode-indicator {
+    font-size: 1.5em;
+    font-weight: 500;
+    color: #667eea;
+    margin-bottom: 20px;
+    transition: color 0.5s ease;
+}
+
+body.break-mode .mode-indicator {
+    color: #11998e;
+}
+
+.timer {
+    font-size: 6em;
+    font-weight: 100;
+    color: #667eea;
+    margin: 40px 0;
+    letter-spacing: 5px;
+    font-variant-numeric: tabular-nums;
+    transition: color 0.5s ease;
+}
+
+body.break-mode .timer {
+    color: #11998e;
+}
+
+.controls {
+    display: flex;
+    gap: 15px;
+    justify-content: center;
+    flex-wrap: wrap;
+}
+
+.btn {
+    padding: 15px 40px;
+    font-size: 1.1em;
+    border: none;
+    border-radius: 50px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+    font-weight: 500;
+}
+
+.btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    transform: none !important;
+    box-shadow: none !important;
+}
+
+.btn-mode {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+body.break-mode .btn-mode {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+}
+
+.btn-mode:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+}
+
+body.break-mode .btn-mode:hover {
+    box-shadow: 0 5px 20px rgba(17, 153, 142, 0.4);
+}
+
+.btn-start {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    color: white;
+}
+
+body.break-mode .btn-start {
+    background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
+}
+
+.btn-start:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 20px rgba(102, 126, 234, 0.4);
+}
+
+body.break-mode .btn-start:hover {
+    box-shadow: 0 5px 20px rgba(17, 153, 142, 0.4);
+}
+
+.btn-pause {
+    background: #f0f0f0;
+    color: #666;
+}
+
+.btn-pause:hover {
+    background: #e0e0e0;
+}
+
+.btn-reset {
+    background: #f0f0f0;
+    color: #666;
+}
+
+.btn-reset:hover {
+    background: #e0e0e0;
+}