用原生 HTML/CSS/JS 手把手带你实现一个美观的 To-Do List 待办清单小Demo

前言

待办清单（To-Do List）是日常生活和工作中常用的工具。本文将详细介绍如何用原生 HTML、CSS 和 JavaScript 实现一个简洁实用的待办清单小Demo。本文内容仅围绕该Demo的实现过程、核心代码和设计思路展开。以下是html网页样式：

一、项目结构概览

本项目包含三个核心文件：

index.html：页面结构
style.css：页面样式
index.js：交互逻辑

目录结构如下：

复制代码

todoList/
├── index.html
├── style.css
└── index.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>我的便签</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="container">
        <div class="heading">
            <h1 class="heading_title">To-Do List</h1>
        </div>
        <form class="form">
            <div>
                <label for="todo" class="form_label">~ Today I want to do ~</label>
                <input type="text" class="form_input" id="todo" size="30" required>
                <button class="button">
                    <span>Submit</span>
                </button>
            </div>
        </form>
        <div>
            <ul class="todo-list">
                <li>chifan</li>
            </ul>
        </div>
    </div>
    <script src="./index.js"></script>
</body>
</html>

结构说明

container：页面的主容器，居中显示，承载所有内容。
heading：标题区域，展示" To-Do List "。
form：表单区域，包含输入框和提交按钮，用户可以输入新的待办事项。
todo-list：待办事项列表，所有添加的事项都会显示在这里。

这种结构简洁明了，便于后续样式美化和功能扩展。

三、样式设计与美化

页面美观离不开精心设计的 CSS。下面我们逐步解析主要样式，重点讲解按钮 .button 的设计。

1. 页面整体风格

css 复制代码

@import url(https://fonts.googleapis.com/css?family=Gochi+Hand);
body{
    background-color:rgb(175, 135, 213);
    min-height: 100vh;
    display: flex;
    justify-content : center;
    align-items: center;
    font-family: 'Gochi Hand',cursive;
    color: #494a4b;
    text-align: center;
    font-size: 130%;
}

使用柔和的紫色作为背景色，营造温馨氛围。
通过 flex 布局让内容垂直水平居中。
字体采用手写风格，提升亲和力。

2. 容器与标题

css 复制代码

.container{
    width: 100%;
    min-width: 250px;
    max-width: 400px;
    min-height: 600px;
    background-color: #f1f5f8;
    box-shadow: 4px 3px 7px 1px #000;
    border-radius: 20px;
    padding: 1rem; 
    box-sizing: border-box;
    background-image: radial-gradient(#849ab1 7.2%, transparent 0);
    background-size: 25px 25px;
}
.heading_title{
    padding: 0.2rem 1.2rem;
    background-color: rgb(106, 197, 228);
    border-radius: 20% 5% 20% 5%/5% 20% 25% 20%;
    transform: rotate(3deg);
    display: inline-block;
}

容器有圆角、阴影和渐变背景，提升层次感。
标题有不规则圆角和轻微旋转，显得活泼有趣。

3. 输入框样式

css 复制代码

.form_input{
    background-color: transparent;
    padding: 0.7rem;
    border: 3px solid transparent;
    border-bottom: dashed 3px #95a9ea;
    font-family: 'Gochi Hand',cursive;
    font-size: 1rem;
    color: rgba(63,62,65,0.7);
    width: 70%;
    margin-bottom: 20px;
}
.form_input:focus{
    outline: none;
    border: 3px solid #95a9ea;
}

输入框采用虚线底边，聚焦时高亮，增强交互感。

4. 按钮样式重点解析（.button）

按钮是整个页面的点睛之笔，样式设计非常用心：

css 复制代码

.button{
    padding: 0;
    border: none;
    font-family: 'Gochi Hand',cursive;
    padding-bottom: 3px;
    background-image: url('data:image/gif;base64,...');
    border-radius: 5px;
    box-shadow: 0 2px 0 #494a4b;
    background-color: #95a9ea;
    transition: all 0.3s cubic-bezier(0.175,0.885,0.32,1.275);
    transform: rotate(4deg);
}
.button span{
    background-color: #f1f5f8;
    display: block;
    padding: 0.5rem 1rem;
    border-radius: 5px;
    border: 2px solid #494a4b;
}
.button:active, .button:focus{
    padding-bottom: 0;
    outline: 0;
    transform: rotate(0deg);
}

解析：

背景与阴影：按钮有淡蓝色背景和下方阴影，立体感强。
圆角与旋转：圆角+轻微旋转，打破呆板，显得俏皮。
过渡动画：点击时旋转归零，带来动感反馈。
内嵌span：按钮文字用span包裹，设置了独立的背景、边框和圆角，层次分明。
背景图片：按钮还嵌入了一个小巧的GIF图片，细节满满。

这种设计让按钮既有手写风格的亲切感，又不失现代网页的精致感。

5. 待办事项列表

css 复制代码

.todo-list{
    text-align: left;
}
.todo-list li{
    padding: 0.5rem;
}
.todo-list li:hover{
    text-decoration: line-through;
}

列表左对齐，条目有内边距。
鼠标悬停时自动加删除线，提示可点击删除。

四、交互逻辑详解

页面的交互逻辑全部由 index.js 实现。主要功能包括：添加待办、渲染列表、点击删除。

1. 变量与元素获取

js 复制代码

// 获取 form 表单元素
const form = document.querySelector('.form');
// 获取用户输入的内容
const input = document.querySelector('.form_input');
// 获取 ul 列表元素
const ul = document.querySelector('.todo-list');
// 存储待办事项的数组
const toDoListArray = [];

获取表单、输入框、列表等DOM元素。
用数组 toDoListArray 存储所有待办事项。

2. 添加待办事项

js 复制代码

form.addEventListener('submit', function (event) {
    // 阻止表单的默认提交行为
    event.preventDefault();

    let itemId = String(Date.now()); // 生成唯一的 id
    let toDoItem = input.value; // 获取用户输入的内容

    addItemToArray(itemId, toDoItem);
    addItemToDom(itemId, toDoItem);

    console.log(input.value);
})

function addItemToArray(id, item) { //将对象推入数组
    itemId: id;
    todoItem: item
}

function addItemToDom(id, item) {
    // 1. 创建 li 元素
    const li = document.createElement('li');
    // 2. 给 li 元素添加内容
    li.textContent = item;
    // 给 li 元素添加 data-id 属性
    li.setAttribute('data-id', id);
    // 3. 将 li 元素添加到 ul 列表中
    ul.appendChild(li);
}

监听表单提交事件，阻止页面刷新。
用时间戳生成唯一ID，保证每个事项可区分。
分别调用 addItemToArray 和 addItemToDom，实现数据和界面同步。

3. 渲染与删除

渲染到页面：

js 复制代码

function addItemToDom(id, item) {
    // 1. 创建 li 元素
    const li = document.createElement('li');
    // 2. 给 li 元素添加内容
    li.textContent = item;
    // 给 li 元素添加 data-id 属性
    li.setAttribute('data-id', id);
    // 3. 将 li 元素添加到 ul 列表中
    ul.appendChild(li);
}

点击删除：

js 复制代码

ul.addEventListener('click', function (event) {
    // 1. 获取被点击的元素
    const target = event.target;
    // 2. 判断被点击的元素是否是 li 元素
    if (target.tagName === 'LI') {
        // 3. 获取被点击的 li 元素的 data-id 属性
        const id = target.getAttribute('data-id');
        // 4. 从数组中移除对应的待办事项
        removeItemFromArray(id);
        // 5. 从 DOM 中移除对应的 li 元素
        removeItemFromDom(target);
    }
})

function removeItemFromArray(id) {
    for (var i = 0; i < toDoListArray.length; i++) {
        if (toDoListArray[i].itemId === id) {
            toDoListArray.splice(i, 1);
            break;
        }
    }
}

function removeItemFromDom(target) {
    target.remove();
}

监听列表点击事件，判断是否点击了 li，如果是则删除对应项。
删除时，既要从数组中移除数据，也要从DOM中移除元素，保证数据和界面一致。

五、总结与扩展

通过本项目，你可以学到：

如何用 HTML 构建清晰的页面结构
如何用 CSS 打造美观、富有交互感的界面（尤其是按钮的细节设计）
如何用 JavaScript 实现表单处理、DOM操作和事件监听

扩展建议：

支持本地存储，刷新页面后数据不丢失
增加编辑、标记完成等功能
优化移动端适配

希望这篇教程能帮助你快速上手前端开发，做出属于自己的 To-Do List！如果觉得有用，欢迎分享给更多朋友～