一个基本的待办事项应用。这个项目涵盖了前端开发的主要概念，并且实现起来相对简单，非常适合用来练习基本的前端技能。
项目概述
待办事项应用允许用户添加、查看、标记为完成和删除待办事项。用户可以在页面上管理自己的待办事项列表。
技术栈
- HTML：结构化页面内容
- CSS：样式化页面
- JavaScript：实现交互功能
- 本地存储（Local Storage）：保存用户的待办事项数据（可选）
目录结构
todo-app/
│
├── index.html
├── style.css
└── script.js
1. index.html
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置文档的字符编码为UTF-8 -->
<meta charset="UTF-8">
<!-- 设置视口，以便在移动设备上正确显示 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 页面标题 -->
<title>待办事项应用</title>
<!-- 引入外部CSS样式表 -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- 页面主体内容容器 -->
<div class="container">
<!-- 主标题 -->
<h1>待办事项</h1>
<!-- 输入框，用于输入新的待办事项 -->
<input type="text" id="todo-input" placeholder="添加新的待办事项">
<!-- 按钮，用于添加新的待办事项 -->
<button id="add-btn">添加</button>
<!-- 待办事项列表 -->
<ul id="todo-list"></ul>
</div>
<!-- 引入外部JavaScript脚本 -->
<script src="script.js"></script>
</body>
</html>
注释解释
<!DOCTYPE html>: 声明文档类型为 HTML5，以确保浏览器以标准模式渲染页面。<html lang="en">: 开始 HTML 文档，并指定语言为英语。<head>部分:<meta charset="UTF-8">: 设置字符编码为 UTF-8，支持多语言字符。<meta name="viewport" content="width=device-width, initial-scale=1.0">: 配置视口设置，确保页面在不同设备上的响应式布局和缩放。<title>待办事项应用</title>: 设置页面的标题，会显示在浏览器标签页上。<link rel="stylesheet" href="style.css">: 引入外部 CSS 文件style.css，用于页面样式的定义。
<body>部分:<div class="container">: 页面内容的容器，应用 CSS 样式时使用。<h1>待办事项</h1>: 主标题，显示为“待办事项”。<input type="text" id="todo-input" placeholder="添加新的待办事项">: 输入框，用于用户输入新的待办事项。placeholder属性提供输入提示。<button id="add-btn">添加</button>: 按钮，用于触发添加待办事项的操作。<ul id="todo-list"></ul>: 无序列表，用于显示待办事项列表。
<script src="script.js"></script>: 引入外部 JavaScript 文件script.js，用于处理页面的交互逻辑和功能。
2. style.css
/* 基本样式重置 */
body, h1, input, button, ul {
margin: 0; /* 去掉默认的外边距 */
padding: 0; /* 去掉默认的内边距 */
box-sizing: border-box; /* 确保内边距和边框不影响元素的宽度和高度 */
}
/* 设置页面的字体和背景 */
body {
font-family: Arial, sans-serif; /* 使用无衬线字体 */
background-color: #f4f4f4; /* 设置背景颜色 */
display: flex; /* 使用 flexbox 布局 */
justify-content: center; /* 水平居中对齐 */
align-items: center; /* 垂直居中对齐 */
height: 100vh; /* 设置高度为视口高度 */
}
/* 容器样式 */
.container {
background: #fff; /* 设置背景颜色 */
border-radius: 8px; /* 设置圆角 */
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 添加阴影效果 */
padding: 20px; /* 设置内边距 */
width: 300px; /* 设置固定宽度 */
text-align: center; /* 内容居中对齐 */
}
/* 主标题样式 */
h1 {
color: #333; /* 设置字体颜色 */
margin-bottom: 20px; /* 设置下边距 */
}
/* 输入框样式 */
#todo-input {
width: calc(100% - 20px); /* 设置宽度，减去内边距 */
padding: 10px; /* 设置内边距 */
border: 1px solid #ddd; /* 设置边框 */
border-radius: 4px; /* 设置圆角 */
font-size: 16px; /* 设置字体大小 */
margin-bottom: 10px; /* 设置下边距 */
}
/* 按钮样式 */
#add-btn {
width: 100%; /* 设置宽度为 100% */
padding: 10px; /* 设置内边距 */
background-color: #28a745; /* 设置背景颜色 */
color: #fff; /* 设置字体颜色 */
border: none; /* 去掉边框 */
border-radius: 4px; /* 设置圆角 */
font-size: 16px; /* 设置字体大小 */
cursor: pointer; /* 鼠标悬停时显示手形光标 */
transition: background-color 0.3s; /* 设置背景颜色变化过渡效果 */
}
/* 按钮悬停效果 */
#add-btn:hover {
background-color: #218838; /* 悬停时背景颜色变暗 */
}
/* 待办事项列表样式 */
#todo-list {
list-style-type: none; /* 去掉列表项的默认标记 */
padding: 0; /* 去掉内边距 */
}
/* 列表项样式 */
#todo-list li {
background: #f9f9f9; /* 设置背景颜色 */
border-bottom: 1px solid #ddd; /* 设置底部边框 */
padding: 10px; /* 设置内边距 */
font-size: 16px; /* 设置字体大小 */
}
/* 最后一项去掉底部边框 */
#todo-list li:last-child {
border-bottom: none; /* 去掉底部边框 */
}
注释解释
-
基本样式重置:
- 对
body、h1、input、button和ul设置margin和padding为0，以及box-sizing为border-box，确保一致的样式基础。
- 对
-
页面基本样式:
body: 设置字体、背景颜色和布局方式。使用 flexbox 实现页面居中对齐，设置视口高度。
-
容器样式:
.container: 设定容器的背景、圆角、阴影、内边距和宽度，使内容更具视觉层次感。
-
主标题样式:
h1: 设置标题的颜色和下边距，使标题与其他元素有合适的间距。
-
输入框样式:
#todo-input: 设置输入框的宽度、内边距、边框、圆角和字体大小，增加用户输入的舒适性。
-
按钮样式:
#add-btn: 设置按钮的宽度、内边距、背景颜色、字体颜色、边框、圆角、字体大小、光标样式和过渡效果，提供良好的用户交互体验。#add-btn:hover: 设置按钮悬停时的背景颜色变化效果。
-
待办事项列表样式:
#todo-list: 去掉列表项的默认标记和内边距，使其与输入框和按钮对齐。
-
列表项样式:
#todo-list li: 设置每个列表项的背景颜色、底部边框、内边距和字体大小。#todo-list li:last-child: 去掉最后一项的底部边框，使列表看起来更整洁。
3. script.js
// 当DOM内容加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
// 获取输入框、添加按钮和待办事项列表的DOM元素
const input = document.getElementById('todo-input');
const addButton = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
// 渲染待办事项列表
function renderTodos() {
// 从本地存储中获取待办事项，如果没有则初始化为空数组
const todos = JSON.parse(localStorage.getItem('todos')) || [];
// 清空当前待办事项列表
todoList.innerHTML = '';
// 遍历所有待办事项
todos.forEach((todo, index) => {
// 创建一个新的列表项（li）并设置其文本内容
const li = document.createElement('li');
li.textContent = todo.text;
// 如果待办事项已完成，给列表项添加完成样式
if (todo.completed) {
li.classList.add('completed');
}
// 创建一个删除按钮并设置其文本
const removeButton = document.createElement('button');
removeButton.textContent = '删除';
removeButton.classList.add('remove-btn');
// 为删除按钮添加点击事件处理函数
removeButton.addEventListener('click', () => {
// 从待办事项数组中删除该项
todos.splice(index, 1);
// 更新本地存储中的待办事项数据
localStorage.setItem('todos', JSON.stringify(todos));
// 重新渲染待办事项列表
renderTodos();
});
// 将删除按钮添加到列表项中
li.appendChild(removeButton);
// 为列表项添加点击事件处理函数，切换待办事项的完成状态
li.addEventListener('click', () => {
todo.completed = !todo.completed;
// 更新本地存储中的待办事项数据
localStorage.setItem('todos', JSON.stringify(todos));
// 重新渲染待办事项列表
renderTodos();
});
// 将列表项添加到待办事项列表中
todoList.appendChild(li);
});
}
// 为添加按钮添加点击事件处理函数
addButton.addEventListener('click', () => {
// 获取输入框中的文本，并去掉首尾空格
const text = input.value.trim();
// 如果文本不为空，添加新的待办事项
if (text) {
// 从本地存储中获取待办事项数组，如果没有则初始化为空数组
const todos = JSON.parse(localStorage.getItem('todos')) || [];
// 将新的待办事项添加到数组中
todos.push({ text, completed: false });
// 更新本地存储中的待办事项数据
localStorage.setItem('todos', JSON.stringify(todos));
// 清空输入框
input.value = '';
// 重新渲染待办事项列表
renderTodos();
}
});
// 初次加载时渲染待办事项列表
renderTodos();
});项目功能概述
- 添加待办事项：用户输入待办事项内容并点击“添加”按钮，将事项添加到列表中。
- 查看待办事项：待办事项显示在页面上。
- 标记为完成：点击待办事项可切换其完成状态（加删除线）。
- 删除待办事项：点击“删除”按钮从列表中移除待办事项。
- 本地存储：待办事项数据保存在浏览器的本地存储中，即使页面刷新数据也不会丢失。
这个项目虽然简单，但涵盖了前端开发中常用的技术和功能，非常适合用来练习和展示你的前端技能。如果需要进一步扩展，可以考虑添加更多功能，比如编辑待办事项、使用服务器存储数据等。
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
