jQuery todolist实现

杰杰坚强

已于 2022-07-17 19:58:42 修改

阅读量529

点赞数 3

分类专栏：作品集文章标签： jquery javascript 前端

于 2022-06-19 20:21:27 首次发布

本文链接：https://blog.youkuaiyun.com/wwwjjjjj666/article/details/125361804

版权

作品集专栏收录该内容

4 篇文章

订阅专栏

效果：

HTML：

<!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>jQuery~TODOList</title>
    <link rel="stylesheet" href="../CSS/todolist.css">
    <link rel="stylesheet" href="/CSS/iconfont.css">
    <link rel="stylesheet" href="../Bootstrap/css/bootstrap.min.css">
    <script src="../JS/jquery.min.js"></script>
    <script src="../Bootstrap/js/bootstrap.min.js"></script>
    <script src="../JS/todolist.js"></script>
</head>

<body>
    <div class="todoList">
        <!-- todolist 头部 -->
        <div class="todoListTop">
            <span class="iconfont icon-flag-full flag"></span>
            <h1 class="today">今日任务</h1>
            <span class="iconfont icon-sousuo big" data-toggle="modal" data-target=".alert2"></span>
        </div>
        <!-- task -->
        <input type="text" class="task" placeholder="添加新的待办事项...">
        <!-- todoItem 代办-->
        <div class="todoItem">
            <ul>

            </ul>
        </div>
        <!-- doneItem 已做-->
        <div class="doneItem">
            <ol>

            </ol>
        </div>
    </div>
    <!-- 改 模态框1 -->
    <div class="container">
        <div class="modal fade alert1" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">请输入内容</h4>
                    </div>
                    <div class="modal-body">
                        <input type="text" class="ipt1">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 查 模态框2 -->
    <div class="container">
        <div class="modal fade alert2" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">请输入内容</h4>
                    </div>
                    <div class="modal-body">
                        <input type="text" class="ipt2">
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

</html>

CSS：

* {
    padding: 0;
    margin: 0;
}

ul,
ol {
    list-style: none;
}

body,
html {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    /* overflow: hidden; */
    background-image: linear-gradient(to right bottom, #ffafbd, #ffc3a0);
    background-repeat: no-repeat;
}


/* todolist样式 */

.todoList {
    /* 主轴纵轴居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: flex-start;
    position: relative;
    width: 530px;
    min-height: 610px;
    max-height: 610px;
    background-color: rgb(255, 255, 255);
    border-radius: 5%;
    box-shadow: -6px -6px 13px 6px rgba(235, 227, 227, 0.7), 6px 6px 13px 6px rgba(0, 0, 0, 0.4);
    overflow-y: auto;
}

.todoList::-webkit-scrollbar {
    /*隐藏滚动条*/
    display: none;
}


/* todoListTop todo头部*/

.todoListTop {
    width: 300px;
    height: 50px;
    margin: 20px auto 20px;
    text-align: center;
    /* background-color: red; */
}


/* flag  today big */

.flag,
.todoListTop .today,
.big {
    height: 50px;
    line-height: 50px;
    color: rgb(80, 165, 255);
}


/* flag and 放大镜 样式 */

.flag {
    font-size: 2em!important;
}

.big {
    color: rgb(238, 132, 115);
    margin-left: 15px;
    font-size: 2.5em!important;
}

.flag,
.big {
    float: left;
    width: 50px;
    border-radius: 25%;
    box-shadow: -3px -3px 8px 2px rgba(237, 243, 248, 0.826), 3px 3px 8px 2px rgba(0, 0, 0, 0.3);
}


/* 头部 text 今日任务 */

.todoListTop .today {
    float: left;
    margin: 0 0 20px 17px!important;
    font-size: 3em;
    /* background-color: green; */
}


/* task输入框 */

.todoList .task,
.ipt1,
.ipt2 {
    width: 400px;
    height: 40px;
    font-size: 25px;
    text-indent: 15px;
    margin-bottom: 25px;
    border: 0;
    outline: none;
    border-radius: 15px;
    box-shadow: 3px 3px 5px 1px rgba(0, 0, 0, 0.3) inset, -3px -3px 5px 1px rgba(237, 243, 248, 0.726) inset;
}


/* todoItem and doneItem li */

.todoItem li,
.doneItem li {
    /* display: flex;
    align-items: center; */
    /* justify-content: space-around; */
    width: 400px;
    height: 50px;
    line-height: 50px;
    margin-bottom: 20px;
    border-radius: 15px;
    font-size: 1.5em;
    color: rgb(177, 182, 194);
    box-shadow: -3px -3px 5px 1px rgba(237, 243, 248, 0.726), 3px 3px 5px 1px rgba(0, 0, 0, 0.3);
}


/* doneItem li 删除线*/

.doneItem li .text {
    text-decoration: line-through;
    /* opacity: 0.5; */
}


/* li中的circle */

.circle {
    margin: 0 10px;
    font-size: 1.3em!important;
    color: rgb(255, 195, 161);
}


/* li中 删除按钮 垃圾桶*/

.bucket {
    /* margin: 0 10px; */
    float: right;
    margin-right: 10px;
    font-size: 1.3em!important;
    color: rgb(255, 195, 161);
    z-index: 2;
}


/* todoListBottom 底部 */

.todoListBottom {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 100%;
    bottom: 50px;
    /* background-color: red; */
}


/* 底部span */

.todoListBottom span {
    padding: 10px 5px!important;
    margin: 0 15px;
    border-radius: 15%;
}


/* span 阴影 */

.box-shadow {
    box-shadow: -3px -3px 5px 1px rgba(237, 243, 248, 0.726), 3px 3px 5px 1px rgba(0, 0, 0, 0.3);
}


/* 模态框 */

.modal-dialog {
    width: 450px!important;
}

JS（jQuery）：

$(function() {
    var num = 0;
    // 渲染
    load();
    // 增
    $(".task").on("keydown", function(e) {

        if (e.keyCode === 13) {
            if ($(this).val() !== "") {
                // 获取本地数据
                var local = getDate();
                // 数组不为空
                if (local.length != 0) {
                    // 获取最后一个元素的id + 1 作为下一个元素的id，保持id连贯
                    num = local[local.length - 1].id + 1;
                }
                // 把表单数据添加到local数组里
                local.push({ id: num, title: $(this).val(), done: false });
                num++;
                // 清空input
                $(this).val("");
                // 更新本地存储
                saveDate(local);
                // 清空页面li
                $("ul,ol").empty();
                // 加载最新数据
                load();
            }
        }
    });
    // 获取本地存储的数据
    function getDate() {
        var data = localStorage.getItem("todolist");
        // 不为空转为对象并返回，否则返回空数组
        if (data != null) {
            return JSON.parse(data);
        } else {
            return [];
        }
    }
    // 存储更新后的数组
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }
    // 渲染数据到页面
    function load() {
        // 获取本地数据
        var data = getDate();
        // 清空页面li
        $("ul,ol").empty();
        // 遍历数据
        $.each(data, function(i, n) {
            // 根据done属性分区，true完成，false代办
            if (n.done) {
                // $("ol").prepend($("<li in=" + i + "><span class='iconfont circle icon-round_check'></span><span class='text'>" + i + ". " + n.title + "</span><span class='iconfont icon-icon bucket'></span></li>"));
                var li = $("<li id=" + n.id + "><span class='iconfont circle icon-round_check'></span><span class='text' data-toggle='modal' data-target='.alert1'>" + i + ". " + n.title + "</span><span class='iconfont icon-icon bucket'></span></li>")
                $("ol").prepend(li);
                li.stop().fadeTo(500, 0.5).css("backgroundColor", "rgb(80,165,255)");
            } else {
                $("ul").prepend($("<li id=" + n.id + "><span class='iconfont circle icon-round'></span><span class='text' data-toggle='modal' data-target='.alert1'>" + i + ". " + n.title + "</span><span class='iconfont icon-icon bucket'></span></li>"));
            }
        })
    }
    // 删
    $("ul,ol").on("click", ".bucket", function() {
            // 获取li id
            var index = parseInt($(this).parent().attr("id"));
            // console.log(index);
            // 获取数据
            var data = getDate();
            // 遍历数据
            $.each(data, function(i, n) {
                    // 如果本地对象的id == 垃圾桶父亲li的id 就删除本地对象nice
                    if (n.id == index) {
                        data.splice(i, 1);
                        // console.log(index)
                        // console.log(data)
                        return false;
                    }
                })
                // 保存数据到本地
            saveDate(data);
            // 清除页面li
            $("ul,ol").empty();
            // 重新渲染
            load();
        })
        // 切换圆圈 nice
    $("ul,ol").on("click", ".circle", function() {
            // 获取
            var data = getDate();
            //  获取对应li的id
            var index = $(this).parent().attr("id");
            // 判断圆圈状态
            if ($(this)[0].className == 'iconfont circle icon-round') {
                $(this).removeClass('icon-round');
                $(this).addClass("icon-round_check");
                // 修改存储中对应的对象的done属性
                $.each(data, function(i, n) {
                    // 改变本地相应id对象的done
                    if (n.id == index) {
                        n.done = true;
                        return false;
                    }
                })

            } else {
                $(this).removeClass('icon-round_check');
                $(this).addClass("icon-round");
                // 修改存储中对应的对象的done属性
                // data[index].done = false;
                $.each(data, function(i, n) {
                    // 改变本地相应id对象的done
                    if (n.id == index) {
                        n.done = false;
                        return false;
                    }
                })
            }
            // 更新本地数据
            saveDate(data);
            // 渲染
            load();
        })
        // 改
    var text;
    $("ul,ol").on("click", ".text", function(e) {
        text = $(this);
    });
    $(".ipt1").on("keyup", function(e) {
            // 按下回车
            if (e.keyCode == 13) {
                // 非空
                if ($(this).val() !== "") {
                    var index;
                    index = parseInt(text.parent("li").attr('id'));
                    // 获取模态框表单值
                    var value = $(this).val();
                    // 置空
                    $(this).val("");
                    // 获取本地数据
                    var data = getDate();
                    // 遍历
                    $.each(data, function(i, n) {
                            // 如果n.id===index则索引对上
                            if (n.id === index) {
                                console.log("本地匹配id " + n.id);
                                // 修改索引对应对象的title
                                n.title = value;
                                return false;
                            }
                        })
                        // 存储修改后的data
                    saveDate(data);
                    // 渲染
                    load();
                }
            }
        })
        // 查 nice
    $(".big").on("click", function() {
        $(".ipt2").on("keyup", function(e) {
            if (e.keyCode == 13) {
                var value = $(this).val();
                // $(this).val("");
                if (value !== "") {
                    var data = getDate();
                    $.each(data, function(i, n) {
                        // 依据本地对象里面的id选取页面中对应id的li
                        var li = $("#" + n.id);
                        // console.log(li);
                        // 判断是否包含
                        if ($(".ipt2").val().includes(n.title)) {
                            // 判断让ul ol 里面的li做效果
                            if (li.parent() == $("ul")) {
                                li.stop().fadeTo(500, 0.5).css("backgroundColor", "rgb(238, 132, 115)")
                            } else {
                                li.stop().fadeTo(500, 0.5).css("backgroundColor", "rgb(238, 132, 115)")
                            }
                        }
                    })
                }
            }
        })
        load();
    })
});