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: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
#todo-container {
background-color: rgba(255, 255, 255, 0.9);
border-radius: 10px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 30px;
width: 350px;
}
h1 {
text-align: center;
color: #2c3e50;
margin-bottom: 20px;
}
#task-input, #note-input {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ddd;
border-radius: 5px;
box-sizing: border-box;
}
#add-task {
width: 100%;
padding: 10px;
background-color: #2ecc71;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s;
}
#add-task:hover {
background-color: #27ae60;
}
ul {
list-style-type: none;
padding: 0;
}
li {
background-color: #f9f9f9;
border-radius: 5px;
margin-bottom: 10px;
padding: 10px;
display: flex;
align-items: center;
transition: background-color 0.3s;
}
li:hover {
background-color: #f1f1f1;
}
.task-text {
flex-grow: 1;
margin-left: 10px;
}
.delete-btn {
background-color: #e74c3c;
color: white;
border: none;
border-radius: 3px;
padding: 5px 10px;
cursor: pointer;
transition: background-color 0.3s;
}
.delete-btn:hover {
background-color: #c0392b;
}
.completed {
text-decoration: line-through;
color: #7f8c8d;
}
</style>
</head>
<body>
<div id="todo-container">
<h1>待办事项列表</h1>
<input type="text" id="task-input" placeholder="添加新任务...">
<input type="text" id="note-input" placeholder="添加备注...">
<button id="add-task">添加任务</button>
<ul id="task-list"></ul>
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const taskInput = document.getElementById('task-input');
const noteInput = document.getElementById('note-input');
const addTaskButton = document.getElementById('add-task');
const taskList = document.getElementById('task-list');
// 从本地存储加载任务
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
function saveTasks() {
localStorage.setItem('tasks', JSON.stringify(tasks));
}
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.innerHTML = `
<input type="checkbox" ${task.completed ? 'checked' : ''}>
<span class="task-text ${task.completed ? 'completed' : ''}">${task.text}</span>
<button class="delete-btn">删除</button>
`;
if (task.note) {
li.innerHTML += `<p class="note">${task.note}</p>`;
}
const checkbox = li.querySelector('input[type="checkbox"]');
checkbox.addEventListener('change', () => {
tasks[index].completed = checkbox.checked;
saveTasks();
renderTasks();
});
const deleteBtn = li.querySelector('.delete-btn');
deleteBtn.addEventListener('click', () => {
tasks.splice(index, 1);
saveTasks();
renderTasks();
});
taskList.appendChild(li);
});
}
addTaskButton.addEventListener('click', () => {
const text = taskInput.value.trim();
const note = noteInput.value.trim();
if (text !== '') {
tasks.push({ text, note, completed: false });
saveTasks();
renderTasks();
taskInput.value = '';
noteInput.value = '';
}
});
renderTasks();
});
</script>
</body>
</html>
Page updated
Google Sites
Report abuse