构建一个待办事项列表应用是一个常见的Web开发项目。以下是一个基于HTML、CSS和JavaScript的示例,可以让用户添加、删除和标记任务完成:
<!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-color: #f2f2f2;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: white;
text-align: center;
padding: 20px;
}
.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
background-color: white;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
padding: 10px;
border: 1px solid #ddd;
background-color: #fff;
}
.completed {
text-decoration: line-through;
}
input[type="text"] {
padding: 10px;
font-size: 18px;
width: 100%;
margin-bottom: 10px;
}
input[type="button"] {
padding: 10px;
font-size: 18px;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}
</style>
</head>
<body>
<header>
<h1>待办事项列表</h1>
</header>
<div class="container">
<input type="text" id="task" placeholder="添加新任务">
<input type="button" value="添加任务" onclick="addTask()">
<ul id="taskList">
<!-- 任务列表将在JavaScript中动态添加 -->
</ul>
</div>
<script>
function addTask() {
const taskInput = document.getElementById('task');
const taskText = taskInput.value.trim();
if (taskText === '') return;
const taskList = document.getElementById('taskList');
const listItem = document.createElement('li');
listItem.innerHTML = `
<span>${taskText}</span>
<input type="checkbox" onchange="toggleTaskComplete(this)">
<button onclick="deleteTask(this)">删除</button>
`;
taskList.appendChild(listItem);
taskInput.value = '';
}
function deleteTask(button) {
const listItem = button.parentElement;
listItem.remove();
}
function toggleTaskComplete(checkbox) {
const taskText = checkbox.previousElementSibling;
if (checkbox.checked) {
taskText.classList.add('completed');
} else {
taskText.classList.remove('completed');
}
}
</script>
</body>
</html>
在这个示例中,用户可以在输入框中输入任务,然后点击“添加任务”按钮将任务添加到列表中。任务列表中的每个任务都包括一个任务文本、一个复选框(用于标记任务完成),以及一个删除按钮。
要创建你自己的待办事项列表应用,你需要按照以下步骤进行:
- 复制上面的HTML代码到一个文本编辑器中。
- 根据需要自定义样式,或者添加更多功能,如编辑任务、保存任务到本地存储等。
- 保存文件并命名为
index.html
。 - 使用浏览器打开这个HTML文件,查看你的待办事项列表应用。