JavaScript实现一个项目|青训营

ChangeCao
61 阅读4分钟

当涉及到通过JavaScript实现一个项目实例时，一个有趣且常见的项目是创建一个待办事项列表应用。我们将使用HTML、CSS和JavaScript来构建这个应用，让用户能够添加、删除和标记已完成的任务。

项目目标： 创建一个简单的待办事项列表应用，允许用户添加、删除和标记任务为已完成。

实现步骤：

1. HTML 结构： 创建一个基本的 HTML 结构，包括输入框用于添加任务、待办事项列表显示任务和按钮来标记任务为已完成。

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

2. CSS 样式： 创建一个样式文件 styles.css 来美化应用界面。

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

.container {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

h1 {
  text-align: center;
}

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

button {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

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

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

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

.completed {
  text-decoration: line-through;
  color: #777;
}

3. JavaScript 逻辑： 创建一个脚本文件 script.js 来处理用户输入和操作待办事项列表。

const taskInput = document.getElementById("taskInput");
const addButton = document.getElementById("addButton");
const taskList = document.getElementById("taskList");

addButton.addEventListener("click", addTask);

function addTask() {
  const taskText = taskInput.value.trim();
  if (taskText !== "") {
    const taskItem = document.createElement("li");
    taskItem.innerHTML = `
      <span>${taskText}</span>
      <button class="deleteButton">Delete</button>
    `;
    taskList.appendChild(taskItem);
    taskInput.value = "";
    attachDeleteButtonListener(taskItem);
  }
}

function attachDeleteButtonListener(taskItem) {
  const deleteButton = taskItem.querySelector(".deleteButton");
  deleteButton.addEventListener("click", () => {
    taskList.removeChild(taskItem);
  });
}

taskList.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    event.target.classList.toggle("completed");
  }
});

taskInput.addEventListener("keypress", (event) => {
  if (event.key === "Enter") {
    addTask();
  }
});

运行结果： 打开浏览器，加载 HTML 文件，即可看到一个简单的待办事项列表应用。用户可以输入任务，点击 "Add Task" 按钮添加任务，点击任务文本标记任务为已完成，点击任务旁边的 "Delete" 按钮删除任务。

这个项目示例展示了如何使用 HTML、CSS 和 JavaScript 来创建一个基本的待办事项列表应用。当然，这只是一个简单的示例，你可以进一步扩展功能，添加存储功能（如使用浏览器的本地存储或连接到后端数据库）来实现更多的功能，比如保存任务列表，编辑任务等等。 当你创建一个待办事项列表应用时，需要三个主要部分：HTML 结构、CSS 样式和 JavaScript 逻辑。下面我会详细解释每个部分的内容和作用。

1. HTML 结构： HTML 是用于构建页面结构的标记语言。在这个项目中，我们使用了一些基本的 HTML 元素来构建应用的用户界面。

  • <input type="text" id="taskInput" placeholder="Enter a new task">: 这是一个文本输入框，用于用户输入新的任务。
  • <button id="addButton">Add Task</button>: 这是一个按钮，点击它将会将用户输入的任务添加到列表中。
  • <ul id="taskList"></ul>: 这是一个无序列表，用于显示用户添加的任务。

2. CSS 样式： CSS 用于美化和布局网页元素。在这个项目中，我们使用了一些基本的 CSS 样式来让应用看起来更漂亮和易于使用。

  • body: 设置页面的背景颜色和字体。
  • .container: 设置应用的容器样式，包括最大宽度、边距、背景颜色和阴影效果。
  • h1: 设置标题的文本居中。
  • input[type="text"]: 设置输入框的样式，包括宽度、填充和底部边距。
  • button: 设置按钮的样式，包括背景颜色、文本颜色、边框等。
  • ul 和 li: 设置无序列表和列表项的样式，包括去掉默认列表样式、内边距和底部边框。

3. JavaScript 逻辑： JavaScript 用于处理用户交互和动态操作。在这个项目中，我们使用了 JavaScript 来处理用户添加任务、删除任务和标记任务为已完成的操作。

  • addButton.addEventListener("click", addTask);: 给 "Add Task" 按钮添加点击事件监听器，当点击按钮时会调用 addTask 函数。
  • addTask(): 当用户点击 "Add Task" 按钮时，此函数会获取输入框中的文本，创建一个任务列表项，并添加到任务列表中。
  • attachDeleteButtonListener(taskItem): 为每个任务列表项添加删除按钮的点击事件监听器，点击删除按钮时会从任务列表中移除该项。
  • taskList.addEventListener("click", ...: 给任务列表添加点击事件监听器，当用户点击任务列表项时，会切换任务的完成状态（添加或移除 "completed" 类）。
  • taskInput.addEventListener("keypress", ...: 给输入框添加按键事件监听器，当用户按下 Enter 键时，会调用 addTask 函数。

这些步骤一起实现了一个简单的待办事项列表应用。用户可以通过输入框添加新的任务，点击任务来标记为已完成或取消标记，以及点击删除按钮来删除任务。这个示例突出了 HTML、CSS 和 JavaScript 在创建用户友好的 Web 应用中的协作。你可以根据需要进一步扩展应用，添加更多的功能和交互。

avatar
文章
阅读
粉丝