当前位置：首页 > news >正文

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

news 2025/7/17 0:34:32

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