方向三：实践记录以及工具使用选题（5）

饮水弄冰弦
81 阅读5分钟

使用 JavaScript 实现一个任务管理系统

在本项目中，我们将通过创建一个简单的 任务管理系统 来演示如何使用 JavaScript 实现功能和解决问题。任务管理系统允许用户添加、删除、标记任务为完成、以及查看所有任务的状态。通过这个例子，我们可以展示如何在浏览器中使用 JavaScript 编写一个交互式的前端应用。

项目概述

我们将创建一个 Web 应用，用户可以：

  • 添加任务：用户能够输入任务名称并添加到任务列表中。
  • 删除任务：用户可以删除已添加的任务。
  • 标记任务为完成/未完成：用户可以通过点击任务来标记任务为已完成或未完成。
  • 查看任务列表：用户可以查看所有已添加的任务及其状态（未完成或已完成）。

技术栈

  • HTML：用来构建应用的基本结构。
  • CSS：用来设计界面，使应用更加美观。
  • JavaScript：用来实现应用的功能。

项目文件结构

task-manager/
│
├── index.html
├── style.css
└── script.js

1. 创建 HTML 结构

我们首先创建 HTML 文件 index.html，它将包含任务管理系统的基本布局和必要的元素，如输入框、按钮和任务列表。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理系统</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="task-manager">
        <h1>任务管理系统</h1>
        
        <!-- 任务输入框和添加按钮 -->
        <div class="task-input">
            <input type="text" id="task-input" placeholder="输入新任务">
            <button id="add-task-btn">添加任务</button>
        </div>
        
        <!-- 任务列表 -->
        <ul id="task-list"></ul>
    </div>

    <script src="script.js"></script>
</body>
</html>
解释：
  • <input> 元素是任务输入框，用户可以在其中输入任务的名称。
  • <button> 元素是添加任务的按钮，用户点击它后，任务会被添加到任务列表中。
  • <ul> 元素是任务列表，我们将在 JavaScript 中动态添加任务列表项。

2. 添加 CSS 样式

为了让应用界面更加美观，我们为任务管理系统添加一些基本的 CSS 样式。我们在 style.css 中定义样式。

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f9;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.task-manager {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    width: 400px;
}

h1 {
    text-align: center;
    margin-bottom: 20px;
}

.task-input {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
}

#task-input {
    width: 75%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

#add-task-btn {
    width: 20%;
    padding: 10px;
    border: none;
    background-color: #5cb85c;
    color: white;
    border-radius: 4px;
    cursor: pointer;
}

#add-task-btn:hover {
    background-color: #4cae4c;
}

#task-list {
    list-style-type: none;
}

.task-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
}

.task-item.completed {
    text-decoration: line-through;
    color: #999;
}

button.delete-btn {
    background-color: #d9534f;
    color: white;
    border: none;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 4px;
}

button.delete-btn:hover {
    background-color: #c9302c;
}
解释：
  • 使用 display: flex 对任务输入框和按钮进行布局，使它们水平排列。
  • 为每个任务项设置 task-item 类，任务完成后加上 completed 类，改变文字样式。
  • 删除按钮设置了红色背景，并在鼠标悬停时改变颜色。

3. 编写 JavaScript 功能

现在，我们进入最重要的部分：使用 JavaScript 实现应用的功能。我们将编写代码来管理任务的添加、删除、标记完成等操作。

document.addEventListener("DOMContentLoaded", () => {
    const addTaskBtn = document.getElementById('add-task-btn');
    const taskInput = document.getElementById('task-input');
    const taskList = document.getElementById('task-list');

    // 添加任务
    addTaskBtn.addEventListener('click', () => {
        const taskText = taskInput.value.trim();
        
        if (taskText === '') {
            alert('任务内容不能为空');
            return;
        }

        // 创建新的任务元素
        const taskItem = document.createElement('li');
        taskItem.classList.add('task-item');
        
        // 任务文本
        const taskTextElement = document.createElement('span');
        taskTextElement.textContent = taskText;

        // 完成/未完成的功能
        taskTextElement.addEventListener('click', () => {
            taskItem.classList.toggle('completed');
        });

        // 删除任务的功能
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '删除';
        deleteBtn.classList.add('delete-btn');
        deleteBtn.addEventListener('click', () => {
            taskItem.remove();
        });

        // 将文本和删除按钮添加到任务项
        taskItem.appendChild(taskTextElement);
        taskItem.appendChild(deleteBtn);

        // 将任务项添加到任务列表中
        taskList.appendChild(taskItem);

        // 清空输入框
        taskInput.value = '';
    });

    // 允许用户按回车键添加任务
    taskInput.addEventListener('keypress', (e) => {
        if (e.key === 'Enter') {
            addTaskBtn.click();
        }
    });
});
解释：

  1. 任务添加：

    • 当点击 "添加任务" 按钮时，获取输入框的内容。
    • 如果输入内容为空，则弹出提示信息。
    • 创建一个新的 <li> 元素作为任务项，并在其中添加任务文本和删除按钮。
    • 将任务项添加到任务列表中。

  2. 任务标记为完成：

    • 当点击任务文本时，切换 completed 类，表示任务已完成。
    • completed 类会使文本样式变为删除线，并将颜色更改为灰色。

  3. 删除任务：

    • 每个任务项旁边有一个删除按钮，点击它时，该任务项会从任务列表中删除。

  4. 支持回车键：

    • 用户可以在输入框中按回车键来触发任务的添加操作，类似于点击 "添加任务" 按钮。

4. 总结与优化

通过这个简单的任务管理系统，我们展示了如何使用 JavaScript 来实现基本的前端交互功能。项目包含了以下关键点：

  • DOM 操作：动态地添加、删除和更新任务。
  • 事件监听：处理用户的点击和输入事件。
  • 状态管理：通过添加和删除类来管理任务的状态（未完成或已完成）。

未来的优化方向可能包括：

  • 将任务保存在本地存储中，以便在页面刷新后仍然保持任务列表。
  • 添加更多的任务属性，如设置任务的截止日期、优先级等。
  • 提供任务编辑功能，允许用户编辑已添加的任务内容。

通过这样的项目，我们能够深入理解 JavaScript 的核心概念，包括 DOM 操作、事件处理、类和样式的动态应用等。这是前端开发中常见的应用场景之一，也是任何 Web 开发人员都需要掌握的基础技能。

avatar
文章
阅读
粉丝