从零搭建现代化Web界面：手把手教你创建优雅的待办事项应用
在当今数字时代，待办事项应用是练习前端技能的经典项目。本文将通过一个完整的技术教程，带你从零开始创建一个功能完善、界面优雅的待办事项应用。你不需要具备高级编程知识，只需基本HTML、CSS和JavaScript基础即可跟随完成。
前置准备：
你需要一个文本编辑器（如Visual Studio Code、Sublime Text或Notepad++）和一个现代浏览器（Chrome或Edge）。本教
在当今数字时代，待办事项应用是练习前端技能的经典项目。本文将通过一个完整的技术教程，带你从零开始创建一个功能完善、界面优雅的待办事项应用。你不需要具备高级编程知识，只需基本HTML、CSS和JavaScript基础即可跟随完成。
前置准备：
你需要一个文本编辑器（如Visual Studio Code、Sublime Text或Notepad++）和一个现代浏览器（Chrome或Edge）。本教程将采用渐进式教学方法，每个步骤都有清晰的代码示例和解释。
步骤1：创建基础HTML结构
首先，我们搭建应用的骨架。打开编辑器，创建一个名为index.html的新文件，并写入以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的待办事项清单</title>
<style>
/* 样式将在步骤2中添加 */
</style>
</head>
<body>
<div class="container">
<h1>今日任务</h1>
<input type="text" id="taskInput" placeholder="输入新任务...">
<button id="addBtn">添加任务</button>
<ul id="taskList">
<!-- 动态任务列表将在此生成 -->
</ul>
</div>
<script>
// JavaScript逻辑将在后续步骤中添加
</script>
</body>
</html>
关键点：注意id属性（如taskInput、addBtn）与JavaScript钩子的关联性，这为后续交互奠定了基础。
步骤2：打造视觉风格
接下来，我们用CSS让界面变得美观。在<style>标签中添加以下代码，实现响应式设计：
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
margin: 0;
padding: 20px;
box-sizing: border-box;
}
.container {
background: white;
padding: 30px;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
max-width: 500px;
width: 100%;
}
h1 {
color: #333;
text-align: center;
margin-bottom: 25px;
font-weight: 300;
}
input[type="text"] {
width: calc(100% - 120px);
padding: 12px;
border: 2px solid #e0e0e0;
border-radius: 25px;
font-size: 16px;
transition: border-color 0.3s ease;
}
input[type="text"]:focus {
outline: none;
border-color: #667eea;
}
button {
width: 100px;
padding: 12px;
background: #667eea;
color: white;
border: none;
border-radius: 25px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s ease;
}
button:hover {
background: #5a67d8;
}
ul {
list-style: none;
padding: 0;
margin-top: 20px;
}
li {
background: #f7f7f7;
padding: 12px 15px;
margin-bottom: 10px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items: center;
transition: transform 0.2s;
word-wrap: break-word;
}
li:hover {
transform: translateX(5px);
}
li .delete {
background: #ff6b6b;
color: white;
border: none;
padding: 5px 10px;
border-radius: 18px;
cursor: pointer;
font-size: 14px;
transition: background 0.3s;
}
li .delete:hover {
background: #ee5a5a;
}
设计思路：渐变背景营造舒适感，圆角边框和阴影提升现代感，悬停效果增加交互反馈。注意响应式单位的运用，确保在移动设备上也能完美显示。
步骤3：实现核心交互逻辑
现在进入重点——使用JavaScript赋予应用生命。在<script>标签中添加以下代码：
// 获取DOM元素
const taskInput = document.getElementById('taskInput');
const addBtn = document.getElementById('addBtn');
const taskList = document.getElementById('taskList');
// 初始化本地存储数据（可选）
let tasks = JSON.parse(localStorage.getItem('tasks')) || [];
// 渲染任务列表的函数
function renderTasks() {
taskList.innerHTML = '';
tasks.forEach((task, index) => {
const li = document.createElement('li');
li.innerHTML = `
<span>${task}</span>
<button class="delete" data-index="${index}">删除</button>
`;
taskList.appendChild(li);
});
// 保存到本地存储
localStorage.setItem('tasks', JSON.stringify(tasks));
}
// 添加新任务
function addTask() {
const taskText = taskInput.value.trim();
if (taskText === '') {
alert('请输入任务内容！');
return;
}
tasks.push(taskText);
taskInput.value = '';
renderTasks();
}
// 删除任务
function deleteTask(index) {
tasks.splice(index, 1);
renderTasks();
}
// 绑定事件
addBtn.addEventListener('click', addTask);
taskInput.addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
addTask();
}
});
// 使用事件委托处理删除按钮
taskList.addEventListener('click', function(e) {
if (e.target.classList.contains('delete')) {
const index = e.target.getAttribute('data-index');
deleteTask(index);
}
});
// 初始渲染（从本地存储加载已有数据）
renderTasks();
代码解析：
1. 本地存储：使用localStorage保存任务列表，关闭页面后数据不会丢失，这是Web应用常用技术。
2. 事件委托：动态生成的删除按钮通过事件委托监听，避免为每个元素单独绑定事件，提升性能。
3. 数据隔离：tasks数组作为唯一数据源（SSOT），所有操作都围绕它进行，再通过renderTasks()更新视图。
步骤4：交互优化与错误处理
为了让应用更健壮，我们添加一些边缘情况处理。在