【前端】js 小项目，todolist 网页

最新推荐文章于 2024-04-24 19:49:08 发布

竹一笔记

最新推荐文章于 2024-04-24 19:49:08 发布

阅读量387

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端文章标签：前端 javascript css

本文链接：https://blog.youkuaiyun.com/qq_49150070/article/details/129570375

前端专栏收录该内容

4 篇文章

订阅专栏

该文章展示了一个使用HTML、CSS和jQuery编写的TodoList应用。通过监听键盘事件实现文本输入，利用localStorage存储和加载待办事项，以及处理已完成任务的状态切换。应用具有简单的UI设计和交互功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

主要是 jQuery，css 部分没难点
在这里插入图片描述
一共3个文件，html，index.css，index.js
目录结构

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="css/index.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/index.js"></script>

</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo">
        </section>
    </header>

    <section>
        <h2>正在进行<span id="todocount" class="todocount">0</span></h2>
        <ol id="todolist" class="box">

        </ol>

        <h2>已经完成<span id="donecount" class="todocount">0</span></h2>
        <ul id="donelist">

        </ul>

    </section>

    <footer>
        Copyright &copy; 2014 todolist.cn
    </footer>
</body>

</html>

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background-color: #CDCDCD;
}

li {
    list-style: none;
}

header {
    height: 50px;
    color: white;
    background-color: rgba(47, 47, 47, .98);
}

header section {
    width: 600px;
    margin: auto;
}

header label {
    width: 100px;
    height: 50px;
    line-height: 50px;
    font-size: 24px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #DDD;
    display: inline-block;
}

header input {
    width: 60%;
    height: 24px;
    float: right;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    border: none;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.24), 0 1px 6px inset rgba(0, 0, 0, .45);
    outline: none;
}

section {
    width: 600px;
    padding: 0 10px;
    margin: 0 auto;
}

section h2 {
    position: relative;
}

span.todocount {
    height: 20px;
    color: #666;
    background-color: #E6E6FA;
    position: absolute;
    line-height: 22px;
    top: 2px;
    right: 5px;
    border-radius: 20px;
    display: inline-block;
    text-align: center;
    padding: 0 5px;
    font-size: 14px;
}

footer {
    font-size: 14px;
    color: #666;
    text-align: center;
}

ol,
ul {
    padding: 0;
}

section li {
    height: 32px;
    line-height: 32px;
    background-color: #fff;
    margin-top: 10px;
    padding: 0 45px;
    border-radius: 3px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
    position: relative;
}

li input {
    width: 22px;
    height: 22px;
    position: absolute;
    top: 2px;
    left: 10px;
}

li a {
    width: 14px;
    height: 12px;
    position: absolute;
    top: 2px;
    right: 5px;
    border-radius: 14px;
    border: 6px double #fff;
    display: inline-block;
    background-color: #ccc;
}

ol#todolist li {
    border-left: 5px solid #629A9C;
}

ul#donelist li {
    opacity: 0.5;
    border-left: 5px solid #999;
}

$(function() {
    // 文本框部分
    $("input#title").on('keydown', function(event) {
        if (event.key == "Enter") {
            if ($(this).val() == "") {
                alert("请输入您要的操作");
            } else {
                // 调用 localStorage
                var data = getDate();
                data.push({ "title": $(this).val(), "done": false });
                saveDate(data);
                $(this).val("");
                load();
            }
        }
    })

    // 删除操作
    $("ol, ul").on("click", "a", function() {
        // 获取 index
        var index = $(this).prop("id");
        // 删除
        var data = getDate();
        data.splice(index, 1);
        saveDate(data);
        load();
    })

    // 点击 checkbox 修改事项状态
    $("ol, ul").on("click", "input", function() {
        // index
        var index = $(this).siblings("a").prop("id");
        var data = getDate();
        data[index]["done"] = !data[index]["done"];
        saveDate(data);
        load();
    })

    load();

    // 获取 localStorage
    function getDate() {
        var data = window.localStorage.getItem("todo");
        if (data == null) {
            return [];
        }
        return JSON.parse(data);
    }

    // 保存 localStorage
    function saveDate(obj) {
        var data = window.localStorage.setItem("todo", JSON.stringify(obj));
    }

    // 加载
    function load() {
        // 先把原来的数据清空
        $("ol#todolist").html("");
        $("ul#donelist").html("");
        var data = getDate();
        var count = 0,
            done = 0,
            nodone = 0;
        $.each(data, function(index, obj) {
            var li = $('<li><input type="checkbox"><p>' + obj.title + '</p><a href="javascript:;" id = ' + count++ + '></a></li>');
            if (!obj.done) {
                $("ol#todolist").prepend(li);
                nodone++;
            } else {
                li.find("input").prop("checked", "checked");
                $("ul#donelist").prepend(li);
                done++;
            }
        })

        // 设置数量
        $("span#todocount").html(nodone);
        $("span#donecount").html(done);
    }
})