todolist增，删，改，查的效果的实现

最新推荐文章于 2023-03-20 19:53:26 发布

柠檬boy

最新推荐文章于 2023-03-20 19:53:26 发布

阅读量450

点赞数 1

文章标签： jquery css3 css

本文链接：https://blog.csdn.net/qq_60891094/article/details/125280212

版权

这个博客展示了如何使用HTML、CSS和JavaScript实现一个动态的待办事项列表。通过CSS滤镜、动画和Bootstrap插件，创建了背景颜色模糊效果和圆圈动画。此外，还实现了添加、删除、切换任务状态和搜索功能，以及模态框进行内容修改。这是一个学习前端交互设计的实践案例。

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

效果实现

CSS

* {
    padding: 0;
    margin: 0;
}

li {
    list-style: none;
}

a {
    text-decoration: none;
}

body {
    background-color: #CDCDCD!important;
}

.box {
    width: 1000px;
    position: relative;
    margin: 0 auto;
}

.color {
    position: absolute;
    /* 高斯模糊 */
    filter: blur(200px);
}

.color:nth-child(1) {
    top: -350px;
    width: 600px;
    height: 600px;
    background: #5cafb7;
}

.color:nth-child(2) {
    bottom: -150px;
    left: 100px;
    width: 500px;
    height: 500px;
    background: #6da76c;
}

.color:nth-child(3) {
    bottom: 50px;
    right: 100px;
    width: 500px;
    height: 500px;
    background: #00d2ff;
}

.circle {
    position: absolute;
    background: rgba(255, 255, 255, 0.1);
    /* backdrop-filter属性为一个元素后面区域添加模糊效果 */
    backdrop-filter: blur(5px);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-right: 1px solid rgba(255, 255, 255, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    /* 使用filter(滤镜) 属性，改变颜色。
    hue-rotate(deg)  给图像应用色相旋转 
    calc() 函数用于动态计算长度值 
    var() 函数调用自定义的CSS属性值x*/
    filter: hue-rotate(calc(var(--x) * 70deg));
    /* 调用动画animate，需要10s完成动画，
    linear表示动画从头到尾的速度是相同的，
    infinite指定动画应该循环播放无限次*/
    animation: animate 10s linear infinite;
    /* 动态计算动画延迟几秒播放 */
    animation-delay: calc(var(--x) * -1s);
}

@keyframes animate {
    0%,
    100% {
        transform: translateY(-50px);
    }
    50% {
        transform: translateY(50px);
    }
}

.box div:nth-child(4) {
    top: 20px;
    right: 20px;
    width: 100px;
    height: 100px;
}

.circle:nth-child(5) {
    top: 150px;
    left: -29px;
    width: 120px;
    height: 120px;
}

.circle:nth-child(6) {
    bottom: 50px;
    right: -60px;
    width: 80px;
    height: 80px;
}

.circle:nth-child(7) {
    bottom: -80px;
    left: 400px;
    width: 60px;
    height: 60px;
}

.circle:nth-child(8) {
    top: 13px;
    left: 176px;
    width: 60px;
    height: 60px;
}

.cont {
    position: relative;
    min-height: 500px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 25px 45px rgba(0, 0, 0, 0.1);
}

header {
    height: 50px;
    background-color: rgba(155 188 247 / 70%);
    border-radius: 7px;
}

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

header section {
    position: relative;
}

header label {
    position: absolute;
    left: 37px;
    top: -8px;
    float: left;
    color: #ea98b6;
    font-size: 24px;
    margin-top: 12px;
}

header input {
    float: right;
    width: 60%;
    height: 30px;
    border-radius: 8px;
    margin-top: 12px;
    border: none;
    outline: none;
    padding-left: 8px;
    background-color: rgba(155 188 247 / 70%);
}

.check {
    width: 100%;
    height: 36px;
    line-height: 36px;
    margin-top: 20px;
}

.check div {
    padding-left: 35px;
    float: left;
    color: #72d876;
    font-weight: 600;
    font-size: 28px;
}

.check input {
    float: right;
    width: 60%;
    height: 30px;
    line-height: 30;
    border-radius: 8px;
    border: none;
    outline: none;
    background: rgba(255, 255, 255, 0.1);
    padding-left: 8px;
}

.list .jinxing {
    position: relative;
}

.list .wan {
    position: relative;
}

.list h2 {
    padding-left: 35px;
    margin: 20px 0;
    font-weight: 600;
    font-size: 28px;
}

section span {
    position: absolute;
    top: 5px;
    left: 170px;
    height: 20px;
    background-color: rgba(88 185 214 / 70%);
    border-radius: 40%;
    line-height: 20px;
    color: #666;
    font-size: 18px;
}

li {
    height: 32px;
    width: 90%;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin: 0 auto;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, rgb(113, 208, 195), rgb(75, 221, 138));
    opacity: .8;
}

.doneList li {
    opacity: 0.5;
}

li input {
    position: absolute;
    top: 1px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

li .resize {
    position: absolute;
    top: 8px;
    right: 50px;
    display: inline-block;
    font-size: 11px;
    width: 25px;
    height: 12px;
    line-height: 14px;
    text-align: center;
    color: black;
    font-weight: bold;
    cursor: pointer;
}

li .remove {
    position: absolute;
    top: 8px;
    right: 12px;
    display: inline-block;
    font-size: 11px;
    width: 25px;
    height: 12px;
    line-height: 14px;
    text-align: center;
    color: black;
    font-weight: bold;
}

.modal-body input {
    width: 100%;
    height: 22px;
    border: none;
    outline: none;
}

HTML代码

注意这里追加了jquery，bootstrap插件的使用

<!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="../../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="样式.css">
    <script src="../../bootstrap/js/jquery-3.6.0.js"></script>
    <script src="../../bootstrap/js/bootstrap.min.js"></script>
    <script src="todolist.js"></script>
</head>

<body>
    <div class="box">
        <!-- 颜色 -->
        <div class="color"></div>
        <div class="color"></div>
        <div class="color"></div>
        <!-- 圆圈 -->
        <div class="circle" style="--x:0"></div>
        <div class="circle" style="--x:1"></div>
        <div class="circle" style="--x:2"></div>
        <div class="circle" style="--x:3"></div>
        <div class="circle" style="--x:4"></div>
        <section class="cont">
            <header>
                <section>
                    <label for="">我的任务</label>
                    <input type="text" placeholder="添加ToDo" class="txt">
                </section>
            </header>
            <section class="list">
                <div class="check">
                    <div>查找任务</div>
                    <input type="text" placeholder="查找" id="check">
                </div>
                <div class="jinxing">
                    <h2>
                        任务目录
                        <span id="toDoCount">0</span>
                    </h2>
                    <div class="toDoList">
                        <ul></ul>
                    </div>
                </div>
                <div class="wan">
                    <h2>
                        已经完成
                        <span id="doneCount">0</span>
                    </h2>
                    <div class="doneList">
                        <ul></ul>
                    </div>
                </div>


            </section>
            <!-- bootstrap插件运用,模态框 -->
            <div class="modal fade" tabindex="-1" role="dialog" id="myModal">
                <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" placeholder="请填写修改内容">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">修改</button>
                        </div>
                    </div>
                </div>
            </div>
        </section>

    </div>




</body>

</html>

js代码

$(function() {
    load();
    $(".txt").on("keydown", function(e) {
        if (e.keyCode === 13) {
            if ($(this).val() === "") {
                alert("请输入内容")
            } else {
                var local = getDate();
                //数组添加方法
                local.push({ title: $(this).val(), done: false });
                saveDate(local);
                $(this).val("");
                load();

            }
        }
    });
    //删除功能
    $(".toDoList,.doneList").on("click", ".remove", function() {
        var date = getDate();
        //自定义id获取方法
        var index = $(this).attr("id");
        //数组的删除方法splice(从索引号,删除个数)
        date.splice(index, 1);
        saveDate(date);
        load();
    });
    //todo与done之间的切换
    $(".toDoList,.doneList").on("click", "input", function() {
        var date = getDate();
        var index = $(this).siblings(".remove").attr("id");

        //固有属性的获取用prop
        date[index].done = $(this).prop("checked");
        saveDate(date);
        load();
    });
    //修改内容
    $(".toDoList,.doneList").on("click", ".resize", function() {
        $("#myModal").modal();
        var index = $(this).siblings(".remove").attr("id");
        $(".btn-default").on("click", function() {
            var date = getDate();
            var input = $(".modal-body input").val();
            if (input !== '') {
                date[index].title = input;
                saveDate(date);
                load();
                $(".modal-body input").val("");
            }

        });
    });


    //加载在toDoList中
    function load() {
        var date = getDate();
        //清空方法empty()
        var toDoCount = 0;
        var doneCount = 0;
        $(".toDoList ul").empty();
        $(".doneList ul").empty();
        $.each(date, function(i, ele) {
            if (ele.done == true) {
                doneCount++;
                $(".doneList ul").append("<li><input type='checkbox' checked='checked'> <p >" + ele.title + "</p><a data-toggle='modal' date-target='#myModal' class='resize'>修改</a><a href='javascript:;' id=" + i + " class='remove'>删除</a></li>");
            } else {
                toDoCount++;
                $(".toDoList ul").append("<li><input type='checkbox' > <p >" + ele.title + "</p> <a  data-toggle='modal' date-target='#myModal' class='resize'>修改</a> <a href='javascript:;' id=" + i + " class='remove'>删除</a></li>");
            }

        });
        $("#toDoCount").html(toDoCount);
        $("#doneCount").html(doneCount);
    }
    //检查功能
    $("#check").on("keyup", function() {
        var date = getDate();
        var checkTxt = $(this).val();
        $.each(date, function(i, ele) {
            if (ele.title.indexOf(checkTxt) == -1) {
                $(".list ul li").eq(i).hide();
            } else {
                $(".list ul li").eq(i).show();
            }
        });
    })

    //读取本地存储函数
    function getDate() {
        var date = localStorage.getItem("toDoList");
        if (date !== null) {
            return JSON.parse(date);
        } else {
            return [];
        }
    }
    //保存本地数据
    function saveDate(local) {
        localStorage.setItem("toDoList", JSON.stringify(local));
    }
})

本次作品为自己学习时的案例笔记，其中可能有些代码不太严谨

学习是为了掌握知识点，此篇文章用于记录自己的学习进度，以后会常回来看

同时也会修改提升代码的性能