Todolist—pond

基于jQuery实现Todolist增删改查功能

代码

下面展示一些 内联代码片。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="reset.css">
    <title>Title</title>
    <style>
        .banner_box {
            width: 100%;
            height: 50px;
            background: pink;
            line-height: 50px;
            padding-left: 200px;
        }

        .addmin {
            width: 200px;
            height: 20px;
            border-radius: 5px;
            margin-left: 150px;
            border: none;
            font-size: 12px;
            padding-left: 10px;
        }

        .quere {
            font-size: 20px;
            font-weight: 500;
            color: red;
        }

        .biaoti {
            margin-left: 200px;
            font-size: 25px;
            font-weight: 700;
            color: #a71d5d;
        }

        .jishu {
            display: inline-block;
            font-size: 14px;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            background: #cccccc;
            color: #ffffff;
            line-height: 20px;
            text-align: center;
            margin-left: 250px;
        }

        .list {
            width: 350px;
            height: 40px;
            border: 1px solid #dddddd;
            background: #eeeeee;
            line-height: 40px;
            margin: 15px 0 15px 200px;
            position: relative;
            border-radius: 5px;
        }

        .yiwan {
            width: 20px;
            height: 20px;
            display: inline-block;
            background: #ffffff;
            margin-left: 20px;
            margin-top: 10px;
            text-align: center;
            line-height: 20px;
        }
        .noner {
            border: none;
            width: 260px;
            background: #eeeeee;
            height: 30px;
            position: absolute;
            margin-top: 5px;
            padding-left: 10px;
        }
        .shanchu {
            position: absolute;
            right: 10px;
            top: 50%;
            margin-top: -10px;
            display: inline-block;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            line-height: 20px;
            text-align: center;
            background: #ffffff;
        }

        .btn {
            width: 80px;
            height: 30px;
            margin-left: 350px;
            border: none;
        }
    </style>
</head>
<body>
<div class="banner_box">
    <span class="quere">My  ToDolist</span>
    <input type="text" class="addmin" placeholder="添加ToDo" required="required" autocomplete="off">
</div>
<div class="boxes">
    <div class="box">
        <span class="biaoti">未完成</span>
        <span class="jishu first">0</span>
    </div>
    <div class="add"></div>
</div>
<div class="boxes">
    <div class="box">
        <span class="biaoti">已完成</span>
        <span class="jishu second">0</span>
    </div>
    <div class="dda"></div>
</div>
<button class="btn">全部清除</button>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(document).ready(function(){
    //输入事项并添加
        $(".addmin").bind("keypress", function (ev) {
            // 判断input不能为空
            var content=$(".addmin").val();
            if(content===""){
                alert('Todolist不能为空');
                return;
            }
            let events_list = '<div class="list">\n' +
                '        <span class="yiwan"></span>\n' +
                '        <input type="text" class="noner" value="'+content+'">\n'+
                '        <span class="shanchu">-</span>\n' +
                '    </div>';
                //待办事项索引
            function count(){
                var len=$(".add").children().length;
                $(".first").text(len>=0?len:"")
            }
            //已办事项索引
            function counta(){
                var len=$(".dda").children().length;
                $(".second").text(len)
            }
            //按enter键添加待办事项
            if (ev.keyCode === 13) {
                $(".add").append(events_list);
                $(this).val('');
                count();
            }
            //点击－号删除事项
            $(".shanchu").click(function () {
                $(this).parent().remove();
                count();
                counta();
            });
         //点击待办事项添加已完成
            $(".yiwan").click(function () {
                $(this).html("√");
                $(".dda").append($(this).parent());
                count();
                counta();
            });
            //点击全部清除事项
            $(".btn").click(function () {
                $(".add").remove();
                $(".dda").remove();
                $(".first,.second").text(0);
                count();
                counta();
            })
        });
    });
</script>
</body>
</html>
Authors: 梁悦
基于jQuery实现Todolist增删改查功能

代码

相关推荐
