添加搜索 HTML

最新推荐文章于 2023-12-27 23:16:57 发布

里予子

最新推荐文章于 2023-12-27 23:16:57 发布

阅读量1.2k

点赞数 1

本文链接：https://blog.csdn.net/qq_37457363/article/details/78259793

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>张凯</title>
    <style>
        *{
            margin: 0 auto;
            background-color: aqua;
        }
        input{
            background: #c9ccc9;
            border: 1px #c0d8ef solid;
            border-radius: 2px;
            margin-left: 15px;
        }

        button{
            margin-top: 5px;
            background: #c9ccc9;
            border: 1px #cccccc solid;
            border-radius: 2px;
        }
    </style>
    <script src="jquery.1.12.4.js"></script>
</head>
<body>
        <div style="margin-left: 615px">记账本</div>
        <div style="width: 300px;height: 300px;border: 1px green solid;" id="div"></div>

        <div style="width: 300px;">输入框<input type="text" id="writediv" size="30px"></div>
        <button style="width: 50px;display: block" id="write">记录</button>

        <br><br>
        <div style="width: 300px;">搜索框<input type="text" id="searchdiv" size="30px"></div>
        <button style="width: 50px;display: block" id="search">搜素</button>>
        <script>
            $("#write").click(function(){

                //获取当前记事本中的内容
                var b = $("#div").html();
                //获取当前输入框中的内容
                var a = $("#writediv").val();

                //判断是否存在敏感字符
                //敏感字符如下所示：
                var pattern = new RegExp("滚");

                var result = a.match(pattern);

                //若存在敏感字符则提示
                if(result){
                     alert("含有特殊字符");
                }
                //判断记录的内容是否为空
                else if(a==""){
                    alert("您输入的文字为空！");
                }
                //判断记录的内容是否存在
                else if(b.indexOf(a)>=0){
                    alert("您记录的内容已存在");
                }else{
                    console.log(b.length);
                    //判断记事本中的内容的长度判断是否为空，起始长度为0；
                    //当内容不为空时。则在li的第一个元素前面加上内容
                    if(b.length>=1){
                        $("li:first-child").before("<li style='list-style: none'>"+a+"</li>");
                    }
                    //当内容为空时，则追加内容
                    else{
                        //将文字追加到div中
                        $("#div").append("<li style='list-style: none'>"+a+"</li>");
                    }
                }
            })

            $("#search").click(function(){

                //获取当前记事本中的内容
                var b = $("#div").html();
                //获取当前搜索框中的内容
                var a = $("#searchdiv").val();

                //判断是否存在敏感字符
                //敏感字符如下所示：
                var pattern = new RegExp("滚");

                var result = a.match(pattern);

                //若存在敏感字符则提示
                if(result){
                    alert("含有特殊字符");
                }
                //当搜索的文字为空时
                else if(a==""){
                    alert("您输入的文字为空");
                }
                //若存在相关内容
                else if(b.indexOf(a)>=0){
                    alert("搜索到相关内容");
                }
                else{
                    alert("未搜索到相关内容");
                }
            })
        </script>
</body>
</html>