diff --git a/index.html b/index.html new file mode 100644 index 0000000..e51c312 --- /dev/null +++ b/index.html @@ -0,0 +1,22 @@ + + + + + + 番茄钟计时器 + + + +
+
工作模式
+
25:00
+
+ + + + +
+
+ + + diff --git a/script.js b/script.js new file mode 100644 index 0000000..eeb591c --- /dev/null +++ b/script.js @@ -0,0 +1,97 @@ +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 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; + alert('时间到'); + } + }, 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 new file mode 100644 index 0000000..2584b7d --- /dev/null +++ b/style.css @@ -0,0 +1,124 @@ +* { + 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-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; +}