jq通告栏

最新推荐文章于 2023-05-06 10:46:45 发布

人走丿茶凉

最新推荐文章于 2023-05-06 10:46:45 发布

阅读量323

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/luck_whr/article/details/78250276

版权

javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

实现通告栏的效果：

点击按钮添加文字
- 实现查询功能
- 实现敏感字符限制功能
- 实现输入比为空判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- css布局样式调整 -->
    <style>
        div{
            width: 500px;
            height:350px;
            border: 1px solid #000;

        }
        .a{
            margin-left: 150px;
        }
        .b{
            margin-left: 250px;
        }
        li{
            list-style:none;
        }
        body{
          background-color: #D0EEFF;
            background-size:100%;
        }
        input{
            padding: 4px 10px;
            height: 20px;
            line-height: 20px;/*设置行高*/
            position: relative;/*相对定位*/
            cursor: pointer;/*设定浏览器中的鼠标显示样式*/
            color: #888;
            background: #fafafa;
            border: 1px solid #ddd;
            border-radius: 4px;/*圆角矩形*/
            overflow: hidden;/*内容溢出隐藏*/
            display: inline-block;/*设定行级标签可以设置宽高*/
            *display: inline;/*设置对象做为行内元素显示*/
            *zoom: 1/*设置或检索对象的缩放比例*/ }
        button{
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;/*文字样式：不设置*/
            text-indent: 0;/*规定文本块中首行文本的缩进*/
            line-height: 20px;
        }
    </style>

    <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
    <!-- angularJS样式 -->
    <script>
        var myapp=angular.module("myapp",[]);
        myapp.controller("myCtrl",function ($scope) {
            //设置数组
            $scope.data=["早上花了5元钱吃早饭","中午花了20元钱吃午饭"];
            //点击记录判断
            $scope.start="";
            $scope.add=function () {
                if($scope.start==""){
                    alert("输入内容不能为空");
                }
                for(var i=0;i<$scope.data.length;i++){
                    if($scope.start==$scope.data[i]){
                        alert("您记录的内容已经在")
                    }
                }
                //输入内容敏感字符判断
                if($scope.start.indexOf("#")!=-1||$scope.start.indexOf("$")!=-1||$scope.start.indexOf("%")!=-1||$scope.start.indexOf("^")!=-1||$scope.start.indexOf("&")!=-1||$scope.start.indexOf("*")!=-1){
                    alert("有敏感字符，请重新输入");
                }else{
                    $scope.data.unshift($scope.start);
                }

            }
            //点击查询判断
            $scope.end="";
            $scope.selete=function () {
                if($scope.end==""){
                    alert("输入内容不能为空");
                }


                if($scope.end.indexOf("#")!=-1||$scope.end.indexOf("$")!=-1||$scope.end.indexOf("%")!=-1||$scope.end.indexOf("^")!=-1||$scope.end.indexOf("&")!=-1||$scope.end.indexOf("*")!=-1){
                    alert("有敏感字符，请重新输入");
                }else{
                    //搜索的判断
                    for(var i=0;i<$scope.data.length;i++){
                        if($scope.end==$scope.data[i]){
                            alert("搜索到相关内容")
                            break;
                        }else{
                            alert("未搜到相关内容")
                            break;
                        }
                    }
                }

            }




        })
    </script>
</head>
<body ng-app="myapp" ng-controller="myCtrl">
<p>记账本</p>
<div>
    <ul ng-repeat="item in data">
        <li>{{item}}</li>
    </ul>
</div>
<span class="a">输入框</span><input type="text" ng-model="start"><br>
<button class="b" ng-click="add()">记录</button><br>
<span class="a">搜索框</span><input type="text" ng-model="end"><br>
<button class="b" ng-click="selete()">搜索</button>
</body>
</html>

人走丿茶凉

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jq通告栏

实现通告栏的效果：点击按钮添加文字 - 实现查询功能 - 实现敏感字符限制功能 - 实现输入比为空判断<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title>  <style> div{
复制链接

扫一扫