使用 JavaScript 制作 To-Do List

本文记录了使用 HTML、CSS 和 JavaScript 制作一个简单的 To-Do List 网页的全过程，包含功能描述、代码实现以及优化方向。

**🎉🎉🎉欢迎来到我的博客,我是一名自学了2年半前端的大一学生,熟悉的技术是JavaScript与Vue.目前正在往全栈方向前进, 如果我的博客给您带来了帮助欢迎您关注我,我将会持续不断的更新文章!!!🙏🙏🙏

文章目录

[使用 JavaScript 制作 To-Do List](#使用 JavaScript 制作 To-Do List)
- 功能描述
- 页面效果
代码实现
- [HTML 部分](#HTML 部分)
- css部分
- js部分
- 最终效果

功能描述

添加任务：用户可以输入任务内容，并将其添加到任务列表中。
删除任务：用户可以删除已完成的任务。
标记任务完成：点击任务可以标记为完成或未完成状态。

页面效果

页面包含以下元素：

一个输入框，用于输入任务内容。
一个按钮，用于将任务添加到列表中。
一个任务列表，用于展示所有任务。

代码实现

HTML 部分

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>To-Do List</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="todo-container">
        <h1>To-Do List</h1>
        <div class="input-section">
            <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>

css部分

css 复制代码

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

.todo-container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    width: 300px;
    text-align: center;
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.input-section {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

#task-input {
    flex: 1;
    padding: 8px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

#add-task-btn {
    padding: 8px 12px;
    background: #5cb85c;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

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

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

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

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

.task-item button {
    background: #d9534f;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    padding: 5px 8px;
}

.task-item button:hover {
    background: #c9302c;
}

js部分

javascript 复制代码

// 获取 DOM 元素
const taskInput = document.getElementById('task-input');
const addTaskBtn = document.getElementById('add-task-btn');
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 taskContent = document.createElement('span');
    taskContent.textContent = taskText;
    taskItem.appendChild(taskContent);

    // 完成按钮
    taskItem.addEventListener('click', () => {
        taskItem.classList.toggle('completed');
    });

    // 删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.addEventListener('click', () => {
        taskList.removeChild(taskItem);
    });
    taskItem.appendChild(deleteBtn);

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

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

最终效果

Hi👋,这里是瑞雨溪一个喜欢JavaScript和Vue的大学生,如果我的文章给你带来的帮助,欢迎您关注我,我会持续不断的更新更多优质文章.你的关注就是我的动力!!!🎉🎉🎉