Embedded Files
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>时间管理工具</title>
<style>
body {
font-family: Arial, sans-serif;
background: linear-gradient(45deg, #3498db, #8e44ad);
margin: 0;
padding: 20px;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
max-width: 400px;
width: 100%;
}
h1 {
text-align: center;
color: #333;
}
.task-input {
display: flex;
margin-bottom: 20px;
}
input[type="text"] {
flex-grow: 1;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px 0 0 4px;
}
button {
padding: 10px 15px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
#addTask {
border-radius: 0 4px 4px 0;
}
#taskList {
list-style-type: none;
padding: 0;
}
.task-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
background-color: #f9f9f9;
border-radius: 4px;
margin-bottom: 10px;
}
.task-item button {
background-color: #f44336;
margin-left: 10px;
}
.task-item button:hover {
background-color: #d32f2f;
}
#timerDisplay {
font-size: 2em;
text-align: center;
margin: 20px 0;
}
.timer-controls {
display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>时间管理工具</h1>
<div class="task-input">
<input type="text" id="taskInput" placeholder="输入任务...">
<button id="addTask">添加任务</button>
</div>
<ul id="taskList"></ul>
<div id="timerDisplay">25:00</div>
<div class="timer-controls">
<button id="startTimer">开始</button>
<button id="pauseTimer">暂停</button>
<button id="resetTimer">重置</button>
</div>
</div>
<script>
const taskInput = document.getElementById('taskInput');
const addTaskBtn = document.getElementById('addTask');
const taskList = document.getElementById('taskList');
const timerDisplay = document.getElementById('timerDisplay');
const startTimerBtn = document.getElementById('startTimer');
const pauseTimerBtn = document.getElementById('pauseTimer');
const resetTimerBtn = document.getElementById('resetTimer');
let tasks = [];
let timer;
let timeLeft = 25 * 60; // 25 minutes in seconds
addTaskBtn.addEventListener('click', addTask);
startTimerBtn.addEventListener('click', startTimer);
pauseTimerBtn.addEventListener('click', pauseTimer);
resetTimerBtn.addEventListener('click', resetTimer);
function addTask() {
const taskText = taskInput.value.trim();
if (taskText) {
tasks.push(taskText);
renderTasks();
taskInput.value = '';
}
}
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.className = 'task-item';
li.innerHTML = `
<span>${task}</span>
<button onclick="removeTask(${index})">删除</button>
`;
taskList.appendChild(li);
});
}
function removeTask(index) {
tasks.splice(index, 1);
renderTasks();
}
function startTimer() {
if (!timer) {
timer = setInterval(() => {
if (timeLeft > 0) {
timeLeft--;
updateTimerDisplay();
} else {
clearInterval(timer);
alert('时间到！');
}
}, 1000);
}
}
function pauseTimer() {
clearInterval(timer);
timer = null;
}
function resetTimer() {
clearInterval(timer);
timer = null;
timeLeft = 25 * 60;
updateTimerDisplay();
}
function updateTimerDisplay() {
const minutes = Math.floor(timeLeft / 60);
const seconds = timeLeft % 60;
timerDisplay.textContent = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
}
updateTimerDisplay();
</script>
</body>
</html>
Page updated
Google Sites
Report abuse