用JavaScript实现一个简单的待办事项应用

介绍

在日常生活中，我们经常会有各种各样的任务需要完成，为了更好地管理这些任务，我们可以使用一个待办事项应用来记录和跟踪任务的进度。本文将通过一个完整的项目实例，演示如何使用JavaScript实现一个简单的待办事项应用。

功能需求

我们的待办事项应用需要具备以下功能：

添加新的待办事项
标记已完成的待办事项
删除已完成的待办事项
查看所有待办事项

技术选型

为了实现这个应用，我们将使用以下技术：

HTML：用于构建应用的用户界面
CSS：用于美化用户界面
JavaScript：用于实现应用的逻辑功能

项目结构

我们的项目结构如下：

- index.html
- style.css
- script.js

HTML结构

我们的HTML文件主要包含一个输入框、一个按钮和一个用于展示待办事项的列表。代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>待办事项应用</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <h1>待办事项应用</h1>
    <input type="text" id="taskInput" placeholder="请输入待办事项">
    <button id="addButton">添加</button>
    <ul id="taskList"></ul>
    <script src="script.js"></script>
</body>
</html>

CSS样式

我们使用CSS来美化应用的用户界面，使其更加友好和易用。代码如下：

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 20px;
}

h1 {
    text-align: center;
}

input[type="text"] {
    width: 300px;
    padding: 10px;
    font-size: 16px;
}

button {
    padding: 10px 20px;
    font-size: 16px;
}

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

li {
    margin-bottom: 10px;
}

.completed {
    text-decoration: line-through;
}

JavaScript逻辑

我们使用JavaScript来实现应用的逻辑功能。代码如下：

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

// 添加新的待办事项
addButton.addEventListener('click', function() {
    const taskText = taskInput.value;
    if (taskText !== '') {
        const li = document.createElement('li');
        li.innerText = taskText;
        taskList.appendChild(li);
        taskInput.value = '';
    }
});

// 标记已完成的待办事项
taskList.addEventListener('click', function(event) {
    const target = event.target;
    if (target.tagName === 'LI') {
        target.classList.toggle('completed');
    }
});

// 删除已完成的待办事项
taskList.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    const target = event.target;
    if (target.tagName === 'LI' && target.classList.contains('completed')) {
        target.remove();
    }
});

总结

通过这个项目实例，我们学习了如何使用JavaScript实现一个简单的待办事项应用。我们通过HTML构建了应用的用户界面，使用CSS美化了界面的样式，然后使用JavaScript实现了应用的逻辑功能。这个项目可以帮助我们更好地管理和跟踪待办事项，提高工作效率。

用JavaScript实现一个简单的待办事项应用 ｜ 青训营