todos 练习题

哆啦A梦的百宝箱口袋
已于 2022-08-02 21:06:31 修改
阅读量109
点赞数
文章标签： bootstrap html 前端 javascript 经验分享
于 2022-08-02 20:50:32 首次发布
本文链接：https://blog.csdn.net/m0_67658927/article/details/126130150
版权
这是一个使用HTML、CSS和JavaScript实现的简单任务管理器应用，利用了Bootstrap库和本地存储功能。用户可以输入任务，添加到列表中，并通过勾选复选框标记任务状态。此外，应用还提供了全选、显示已完成任务、显示未完成任务和清除已完成任务的功能。
摘要由CSDN通过智能技术生成
<!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" />
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
        <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
            integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu"
            crossorigin="anonymous"
        />

        <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
        <link
            rel="stylesheet"
            href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
            integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ"
            crossorigin="anonymous"
        />

        <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
        <script
            src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
            integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
            crossorigin="anonymous"
        ></script>
        <title>Document</title>
    </head>
    <body>
        <div
            style="
                width: 500px;
                height: 100%;
                background-color: #eaeaea;
                margin: auto;
                font-size: 100px;
                text-align: center;
                color: rgba(175, 47, 47, 0.15);
            "
        >
            <span>todus</span>
        </div>
        <div
            style="
                width: 550px;
                height: 80%;
                margin: 20px auto 0px;
                border-bottom: 2px solid #ccc;
            "
            id="div"
        >
            <div style="padding-top: 50px">
                <input
                    type="checkbox"
                    name=""
                    id="quanxuan"
                    onclick="quanxuan"
                    style="width: 50px; float: left"
                />
                <input
                    type="email"
                    class="form-control"
                    id="input1"
                    placeholder="请输入添加内容"
                    style="width: 450px; float: left"
                />
            </div>

            <ul class="list-inline"></ul>
            <div style="height: 40px">
                <span
                    id="shuliang"
                    style="padding-left: 20px; color: #ccc"
                ></span>

                <button style="background: #fff; border: #fff" onclick="All()">
                    All
                </button>
                <button
                    style="background: #fff; border: #fff"
                    onclick="Acrive()"
                >
                    Acrive
                </button>
                <button
                    style="background: #fff; border: #fff"
                    onclick="Completed()"
                >
                    Completed
                </button>
                <button
                    style="background: #fff; float: right; border: #fff"
                    onclick="allDel()"
                >
                    Clear completed
                </button>
            </div>
        </div>
        <div
            style="
                width: 545px;
                height: 5px;
                background-color: #fff;
                margin: auto;
                border-bottom: 2px solid #ccc;
            "
        ></div>
        <div
            style="
                width: 535px;
                height: 5px;
                background-color: #fff;
                margin: auto;
                border-bottom: 2px solid #ccc;
            "
        ></div>
    </body>
    <script>
        //页面加载函数
        $(function yemianjiazai() {
            //判断有没有本地存储
            if (!localStorage.getItem("obj")) {
                //没有的话创建一个本地存储
                localStorage.setItem("obj", JSON.stringify([]));
            }
            //获取本地存储里面的值
            let data = JSON.parse(localStorage.getItem("obj"));
            //总共有几条数据显示到页面
            $("#shuliang").html(data.length + "&emsp;items left");
            //页面渲染内容
            yemian(data);
        });

        //添加
        $("#input1").keydown(function () {
            //判断是不是点击的回车键
            if (event.keyCode == 13) {
                //获取本地存储的值
                let data = JSON.parse(localStorage.getItem("obj"));
                //追加值
                data.push({ check: false, content: $("#input1").val() });
                //把追加的值保存到本地存储
                localStorage.setItem("obj", JSON.stringify(data));
                //渲染到页面
                yemian(data);
                //清空input里面的值
                $("#input1").val("");
                //总共有几条数据显示到页面
                $("#shuliang").html(data.length + "&emsp;items left");
            }
        });

        //页面渲染
        function yemian(data) {
            var html = "";
            for (i in data) {
                html += `<li>&emsp;<input type="checkbox"name="" class="checked" onclick="che(${i})" ${
                    data[i].check ? "checked" : ""
                }>&emsp;${data[i].check ? "<del class='shanchuxian'>" : ""} ${
                    data[i].content
                }${
                    data[i].check ? "</del>" : ""
                }<button class="cha" onclick="dels(${i})">X</button> </li>`;
            }
            $("ul").html(html);
        }

        //删除数据
        function dels(index) {
            //获取本地存储数据
            let data = JSON.parse(localStorage.getItem("obj"));
            //删除
            data.splice(index, 1);
            //删除完成之后把数据放到本地存储
            localStorage.setItem("obj", JSON.stringify(data));
            //总共有几条数据显示到页面
            $("#shuliang").html(data.length + "&emsp;items left");
            yemian(data);
        }

        //多选框操作
        function che(index) {
            //获取本地存储的值
            let data = JSON.parse(localStorage.getItem("obj"));
            //获取当前点击的多选框
            let indexs = document.getElementsByClassName("checked")[index];
            //获取主多选框
            let check = document.getElementById("quanxuan");
            //给多选框赋值
            data[index].check = indexs.checked;
            //循环判断
            for (i in data) {
                //如果多选框的值不是全部等于true
                if (!data[i].check) {
                    //不等于的话主复选框就等于false 并且结束此函数
                    check.checked = false;
                    localStorage.setItem("obj", JSON.stringify(data));
                    yemian(data);
                    return;
                } else {
                    //否则的话就让主多选框等于true
                    check.checked = true;
                    localStorage.setItem("obj", JSON.stringify(data));
                    yemian(data);
                }
            }
        }
        //主多选框操作
        $("#quanxuan").click(function quanxuan() {
            let data = JSON.parse(localStorage.getItem("obj"));
            let check = document.getElementById("quanxuan");
            //判断主多选框框的值并且赋值给多选框
            for (i in data) {
                if (check.checked) {
                    data[i].check = true;
                    yemian(data);
                    localStorage.setItem("obj", JSON.stringify(data));
                } else {
                    data[i].check = false;
                    yemian(data);
                    localStorage.setItem("obj", JSON.stringify(data));
                }
            }
        });
        //结束的任务渲染到页面
        function Completed() {
            let data = JSON.parse(localStorage.getItem("obj"));
            data = data.filter((res) => {
                return res.check;
            });
            yemian(data);
        }
        //执行中的任务渲染到页面
        function Acrive() {
            let data = JSON.parse(localStorage.getItem("obj"));
            data = data.filter((res) => {
                return !res.check;
            });
            yemian(data);
        }
        //页面显示全部内容
        function All() {
            let data = JSON.parse(localStorage.getItem("obj"));
            yemian(data);
        }
        //删除已经选中的内容并且从新渲染页面
        function allDel() {
            let data = JSON.parse(localStorage.getItem("obj"));
            data = data.filter((res) => {
                return !res.check;
            });
            localStorage.setItem("obj", JSON.stringify(data));
            yemian(data);
        }
    </script>

    <style>
        body {
            background-color: #eaeaea;
        }
        ul {
            padding-top: 50px;
        }
        li {
            width: 550px;
            height: 60px;
            font-size: 20px;
            line-height: 50px;
            border-bottom: 1px solid rgba(204, 204, 204, 0.194);
            box-shadow: none;
        }
        #div {
            background-color: #fff;
            border-radius: 10px 10px 0px 0px;
        }
        .cha {
            background-color: #fff;
            border: #fff 1px solid;
            float: right;
        }
        button {
            margin: 0px 20px;
        }
        .shanchuxian {
            color: #ccc;
        }
    </style>
</html>