JQ实现 todolist案例（记事本）

最新推荐文章于 2022-07-20 15:21:17 发布

imsopoor

最新推荐文章于 2022-07-20 15:21:17 发布

阅读量405

点赞数

分类专栏：前端文章标签： jquery

本文链接：https://blog.csdn.net/imsopoor/article/details/116402994

版权

前端专栏收录该内容

39 篇文章 0 订阅

订阅专栏

这篇博客展示了如何使用HTML、CSS和JavaScript创建一个TodoList应用程序。通过监听键盘事件，当用户按下Enter键时，待办事项被添加到正在进行的任务列表中。已完成的任务可以通过勾选复选框转移到已完成列表，并可通过点击'X'删除。博客还使用事件委托处理新添加节点的交互。代码中包含了样式布局和计数函数，用于显示任务数量。

摘要由CSDN通过智能技术生成

在这里插入图片描述

HTML

 <header>
        <section>
            <label for="title">ToDoList</label>
            <input autofocus type="text" id="title" name="title" placeholder="添加ToDo" required>
        </section>
    </header>
    <section>
        <h3>正在进行 <span id="todocount">123</span></h3>
        <ol id="todolist" class="demo-box">

        </ol>
        <h3>已经完成 <span id="donecount">3</span></h3>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        Copyright &copy; 2021 JiJiKing.cn
    </footer>

CSS

 * {
            padding: 0;
            margin: 0;
            list-style: none;
            box-sizing: border-box;
        }

        body {
            background-color: rgb(198, 200, 196);
        }

        header {
            padding: 10px 0;
            overflow: hidden;
            background-color: grey;
        }

        header section {
            width: 40%;
            margin: 0 auto;
        }

        header label {
            float: left;
            font-size: 20px;
            color: white;
        }

        header input {
            float: right;
            width: 300px;
            border: none;
            outline: none;
            padding: 5px 3px;
            border-radius: 10px;
        }



        body>section h3 {
            width: 40%;
            margin: 15px auto;
        }

        body>section h3 span {
            float: right;
            padding: 0 7px;
            font-size: 16px;
            font-weight: 500;
            border-radius: 50%;
            background-color: rgb(229, 229, 249);
        }

        #todolist,
        #donelist {
            width: 40%;
            margin: 0 auto;
        }

        li {
            display: flex;
            align-items: center;
            margin: 5px 0;
            padding: 3px 7px;
            border-left: 5px solid rgb(85, 141, 147);
            background-color: white;
            border-radius: 3px;
        }

        li>input {
            zoom: 140%;
            margin: 0 8px;
        }

        li>p {
            flex: 7;
        }

        li>a {
            display: inline-block;
            color: teal;
            text-decoration: none;
        }

        #donelist>li {
            opacity: .6;
            border-left: 5px solid rgb(171, 173, 169);

        }

        footer {
            margin-top: 20px;
            color: rgb(152, 150, 146);
            text-align: center;
        }

JS

 $("#title").keypress(function (e) {
            var listVal = $(this).val()
            if (e.which == 13) {//当按键为13（enter）时，把要进行的是添加进正在进行中
                var $liList = $('<li><input type="checkbox"><p>' + listVal + '</p><a href="#">X</a></li>')//创建一个节点
                $(".demo-box").append($liList)//添加进正在进行中
                $(this).val("")//enter后清空输入框
            }
            count()//在按键事件最后调用计数事项函数
        })
        $("#todolist").on("change", "li>input", function () {
            $(this).parent().appendTo($("#donelist"))//将正在进行事件移入到已经完成中
            $("#donelist").on("change", "li>input", function () {//完成事件按钮点击，把点击项目移动到正在进行中
                $(this).parent().appendTo("#todolist")//将已经完成事件移入到正在进行
                count()//在单击事件最后调用计数事项函数
            })
            count()//在单击事件最后调用计数事项函数
        })
        $("#todolist,#donelist").on("click", "li>a", function () {//点击x删除相关对应的事项
            $(this).parent().remove()
            count()//删除事件后在调用计数事件函数
        })
        count()//在加载页面调用计数事项函数
        function count() {//计事项个数的函数
            var tcount = $("#todolist").children("li").length//获取正在进行事项个数
            var dcount = $("#donelist").children("li").length//获取完成事项个数
            $("#todocount").text(tcount)
            $("#donecount").text(dcount)
        }