javascript项目实例 | 青训营项目概述我们将使用HTML、CSS和JavaScript来创建一个基本的任务管

项目概述

我们将使用HTML、CSS和JavaScript来创建一个基本的任务管理应用，具有以下功能：

显示任务列表。
添加新任务。
编辑任务。
删除任务。

项目步骤

步骤 1: 设置 HTML 结构和样式

首先，我们需要创建基本的 HTML 结构和样式。在 index.html 文件中添加以下内容：

htmlCopy code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Task Manager</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Task Manager</h1>
        <input type="text" id="taskInput" placeholder="Enter task...">
        <button id="addTaskBtn">Add Task</button>
        <ul id="taskList"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

然后，创建一个名为 styles.css 的文件，并添加以下样式：

cssCopy code
body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
}

input[type="text"] {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
}

button {
    background-color: #007bff;
    color: #fff;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
}

button:hover {
    background-color: #0056b3;
}

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

li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ccc;
}

步骤 2: 编写 JavaScript 功能

接下来，我们将在 script.js 文件中编写 JavaScript 功能。首先，我们需要在文档加载完成后添加事件监听器和功能函数：

javascriptCopy code
document.addEventListener('DOMContentLoaded', function () {
    const taskInput = document.getElementById('taskInput');
    const addTaskBtn = document.getElementById('addTaskBtn');
    const taskList = document.getElementById('taskList');

    addTaskBtn.addEventListener('click', addTask);
    taskList.addEventListener('click', handleTaskActions);

    function addTask() {
        const taskText = taskInput.value.trim();
        if (taskText !== '') {
            const taskItem = createTaskItem(taskText);
            taskList.appendChild(taskItem);
            taskInput.value = '';
        }
    }

    function createTaskItem(text) {
        const li = document.createElement('li');
        li.innerHTML = `
            <span>${text}</span>
            <button class="edit-btn">Edit</button>
            <button class="delete-btn">Delete</button>
        `;
        return li;
    }

    function handleTaskActions(event) {
        const target = event.target;
        if (target.classList.contains('edit-btn')) {
            editTask(target);
        } else if (target.classList.contains('delete-btn')) {
            deleteTask(target);
        }
    }

    function editTask(editBtn) {
        const taskText = editBtn.previousElementSibling.textContent;
        const newText = prompt('Edit task:', taskText);
        if (newText !== null) {
            editBtn.previousElementSibling.textContent = newText;
        }
    }

    function deleteTask(deleteBtn) {
        const listItem = deleteBtn.parentNode;
        taskList.removeChild(listItem);
    }
});

在这段代码中，我们首先获取了页面中的各个元素，然后添加了事件监听器来处理添加、编辑和删除任务的操作。我们使用 createTaskItem 函数来创建任务项的 HTML 结构，并使用事件委托方式来处理任务的编辑和删除操作。

项目运行

将以上代码保存为相应的文件，并将它们放在同一个文件夹中。然后通过浏览器打开 index.html 文件，您将看到一个简单的任务管理应用界面。您可以通过输入任务并点击“Add Task”按钮来添加任务，通过点击“Edit”按钮来编辑任务，以及通过点击“Delete”按钮来删除任务。