JS实现待办事项列表 | 豆包MarsCode AI刷题

用户681515132985
110 阅读2分钟

下面是一个完整的项目实例，演示如何使用JavaScript实现一个简单的**待办事项列表（Todo List）**应用。这个应用允许用户添加、删除和标记待办事项为完成。我们将使用HTML、CSS和JavaScript来构建这个项目。

项目结构

todo-app/
├── index.html
├── styles.css
└── script.js

1. index.html

首先，我们需要创建一个基本的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="styles.css">
</head>
<body>
    <div class="container">
        <h1>待办事项列表</h1>
        <input type="text" id="todo-input" placeholder="添加新的待办事项...">
        <button id="add-btn">添加</button>
        <ul id="todo-list"></ul>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. styles.css

接下来，我们为应用添加一些基本的样式，使其看起来更美观。

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

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

h1 {
    text-align: center;
}

input {
    width: calc(100% - 100px);
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

button {
    padding: 10px;
    border: none;
    background-color: #28a745;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

button:hover {
    background-color: #218838;
}

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

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

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

3. script.js

最后，我们编写JavaScript代码来实现待办事项的添加、删除和标记功能。

document.addEventListener('DOMContentLoaded', function() {
    const todoInput = document.getElementById('todo-input');
    const addBtn = document.getElementById('add-btn');
    const todoList = document.getElementById('todo-list');

    // 添加待办事项
    addBtn.addEventListener('click', function() {
        const todoText = todoInput.value.trim();
        if (todoText === '') {
            alert('请输入待办事项！');
            return;
        }

        const li = document.createElement('li');
        li.textContent = todoText;

        // 添加完成按钮
        const completeBtn = document.createElement('button');
        completeBtn.textContent = '完成';
        completeBtn.addEventListener('click', function() {
            li.classList.toggle('completed');
        });

        // 添加删除按钮
        const deleteBtn = document.createElement('button');
        deleteBtn.textContent = '删除';
        deleteBtn.addEventListener('click', function() {
            todoList.removeChild(li);
        });

        li.appendChild(completeBtn);
        li.appendChild(deleteBtn);
        todoList.appendChild(li);

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

功能说明

  1. 添加待办事项：

    • 用户在输入框中输入待办事项，点击“添加”按钮后，待办事项会显示在列表中。

  2. 完成待办事项：

    • 每个待办事项旁边有一个“完成”按钮，点击后会将该事项标记为完成（文本划线）。

  3. 删除待办事项：

    • 每个待办事项旁边还有一个“删除”按钮，点击后会将该事项从列表中移除。

运行项目

将上述代码分别保存到相应的文件中，然后在浏览器中打开 index.html 文件即可运行这个简单的待办事项列表应用。

总结

这个项目展示了如何使用HTML、CSS和JavaScript构建一个基本的待办事项列表应用。通过这个实例，您可以了解到如何处理DOM操作、事件监听以及简单的用户交互。您可以在此基础上进一步扩展功能，例如添加本地存储、编辑待办事项等。

avatar
文章
阅读
粉丝