使用JavaScript实现功能｜青训营待办事项列表应用功能要求：显示当前所有待办事项。可以添加新的待办事项。

待办事项列表应用

功能要求：

显示当前所有待办事项。
可以添加新的待办事项。
可以将待办事项标记为已完成。
可以删除已完成的待办事项。

实现步骤：

创建HTML结构：创建一个HTML文件来构建应用的基本结构，包括一个待办事项列表容器、一个输入框和一个按钮用于添加新任务。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todo List App</title>
</head>
<body>
    <h1>Todo List</h1>
    <input type="text" id="taskInput" placeholder="Add a new task">
    <button id="addButton">Add</button>
    <ul id="taskList"></ul>
</body>
</html>

编写JavaScript代码：使用JavaScript来实现应用的各项功能。

// 获取DOM元素
const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");

// 待办事项数组
const todos = [];

// 添加待办事项函数
function addTodo() {
    const taskText = taskInput.value.trim();
    if (taskText !== "") {
        todos.push({ text: taskText, completed: false });
        taskInput.value = "";
        renderTodos();
    }
}

// 标记待办事项为已完成
function toggleTodo(index) {
    todos[index].completed = !todos[index].completed;
    renderTodos();
}

// 删除已完成的待办事项
function deleteCompleted() {
    for (let i = todos.length - 1; i >= 0; i--) {
        if (todos[i].completed) {
            todos.splice(i, 1);
        }
    }
    renderTodos();
}

// 渲染待办事项列表
function renderTodos() {
    taskList.innerHTML = "";
    todos.forEach((todo, index) => {
        const taskItem = document.createElement("li");
        taskItem.innerHTML = `
            <input type="checkbox" ${todo.completed ? "checked" : ""}>
            <span>${todo.text}</span>
        `;
        taskItem.querySelector("input").addEventListener("change", () => {
            toggleTodo(index);
        });
        taskList.appendChild(taskItem);
    });
}

// 添加按钮点击事件
addButton.addEventListener("click", addTodo);

// 初始化
renderTodos();

添加样式：为应用添加一些基本的样式，使其更加美观和易于使用。你可以使用CSS来实现样式。

body {
    font-family: Arial, sans-serif;
    text-align: center;
    margin: 0;
    padding: 0;
}

h1 {
    margin-bottom: 20px;
}

input[type="text"] {
    padding: 8px;
    width: 60%;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 10px;
}

button {
    padding: 8px 15px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

ul {
    list-style: none;
    padding: 0;
}

li {
    display: flex;
    align-items: center;
    margin: 10px 0;
}

input[type="checkbox"] {
    margin-right: 10px;
}

在这个项目中，我们创建了一个简单的待办事项列表应用。通过HTML、JavaScript和CSS的结合，我们实现了待办事项的添加、标记为已完成和删除功能。用户可以通过输入框添加新的任务，通过勾选复选框标记任务为已完成，通过点击按钮删除已完成的任务。整个过程中，JavaScript负责处理用户交互和更新页面显示，CSS则负责美化页面的外观。

通过这个例子，你可以看到如何使用JavaScript来实现一个功能完整的项目，并与HTML和CSS协同工作，从而构建一个简单但实用的应用。

使用JavaScript实现功能 ｜ 青训营

使用JavaScript实现功能｜青训营