我们以一个简单的待办事项列表为例，实现添加、删除和标记完成的功能。
首先，我们需要一个HTML文件来创建页面结构。在文件中添加以下代码：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>待办事项列表</title>
</head>
<body>
<h1>待办事项列表</h1>
<input type="text" id="todo-input" placeholder="请输入任务">
<button id="add-btn">添加</button>
<ul id="todo-list"></ul>
<script src="main.js"></script>
</body>
</html>
接下来，在同一目录下创建一个名为 main.js 的JavaScript文件，并在文件中添加以下代码：
// 获取页面中的元素
const todoInput = document.getElementById('todo-input');
const addBtn = document.getElementById('add-btn');
const todoList = document.getElementById('todo-list');
// 绑定添加按钮的点击事件
addBtn.addEventListener('click', addTodo);
// 声明待办事项列表数组
let todos = [];
// 添加待办事项函数
function addTodo() {
const todoText = todoInput.value.trim();
if (todoText) {
const todo = {
id: Date.now(),
text: todoText,
completed: false
};
todos.push(todo);
renderTodos();
todoInput.value = '';
}
}
// 删除待办事项函数
function deleteTodo(id) {
todos = todos.filter(todo => ![]()todo.id !== id);
renderTodos();
}
// 标记完成/未完成状态函数
function toggleCompleted(id) {
todos = todos.map(todo => {
if (![]()todo.id === id) {
return {
...todo,
completed: !todo.completed
};
}
return todo;
});
renderTodos();
}
// 渲染待办事项函数
function renderTodos() {
todoList.innerHTML = '';
todos.forEach(todo => {
const li = document.createElement('li');
const checkbox = document.createElement('input');
const text = document.createElement('span');
const deleteBtn = document.createElement('button');
checkbox.setAttribute('type', 'checkbox');
checkbox.checked = todo.completed;
checkbox.addEventListener('change', () => toggleCompleted(![]()todo.id));
text.innerText = todo.text;
deleteBtn.innerText = '删除';
deleteBtn.addEventListener('click', () => deleteTodo(![]()todo.id));
li.appendChild(checkbox);
li.appendChild(text);
li.appendChild(deleteBtn);
todoList.appendChild(li);
});
}
以上代码中，我们首先获取需要页面元素，并绑定按钮的点击事件。然后声明一个数组 todos 来存放待办事项列表。
在添加添加待办事项时，将用户输入的内容保存为一个 todo 对象，包含 id、text 和 completed 属性，并加入到 todos 数组中。之后调用 renderTodos 函数重新渲染待办事项列表，并清空输入框。
删除待办事项函数 deleteTodo 会根据传入的 id，使用 filter 方法来过滤出待删除的事项，并重新渲染。
标记完成/未完成状态函数 toggleCompleted 会根据传入的 id，使用 map 方法来更新指定事项的 completed 属性，并重新渲染。
最后，渲染待办事项函数 renderTodos 会先清空原有列表，然后根据 todos 数组中的每个事项，创建相应的 DOM 元素，并添加到页面中。
保存以上代码并在浏览器中打开HTML文件，你将看到一个简单的待办事项列表应用。通过输入内容并点击添加按钮，即可实现添加待办事项的功能。点击复选框可以标记事项为已完成或未完成。点击删除按钮可以删除对应的事项。
这就是一个基于JavaScript实现的简单待办事项列表功能。这是一个非常经典的功能，你可以在这个设计的基础上根据自己的需求进行扩展和优化，实现更多样化的设计，并应用到其他方面。
