AngularJs 公告栏及敏感字过滤

来源：互联网发布：g92的编程实例编辑：程序博客网时间：2024/06/04 18:35
下面代码是通过AngularJs进行布局，然后把输入内容添加到公布栏，并进行敏感字过滤的过程。
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <script type="text/javascript" src="angular-1.3.0.js"></script>    <title></title>    <style>        * {            margin: 0 auto;        }        li {            height: 20px;            line-height: 20px;            list-style: none;        }        main {            position: relative;            width: 512px;            margin: 0 auto;        }        div {            height: 48px;            line-height: 45px;        }        section {            width: 512px;        }        .note_list {            width: 512px;            height: 384px;            border: 2px solid #999999;            padding: 12px;        }        .texts {            width: 388px;            margin: 0 auto;        }        .texts input {            width: 320px;            height: 24px;        }        .btn {            width: 80px;            margin: 0 auto;        }        button {            width: 80px;            height: 24px;        }        #toast {            position: absolute;            top: 256px;            left: 128px;            width: 160px;            height: 148px;            background-color: #fff;            border: 1px solid #999;        }        #toast h3 {            text-align: center;        }        #toast h5 {            text-align: center;        }        #toast button {            display: block;            margin: 16px auto;        }    </style>    <script type="text/javascript">        var app = angular.module("myApp",[]);        app.constant("tips",{            add_empty:["请输入记录内容","好吧"],            add_repeat:["记录已存在","好吧"],            add_minganzi:["输入内容含有敏感字","逼逼啥"],            search_success:["搜索到相关内容","很好"],            search_failure:["未搜索到相关内容","失望"]        });        app.controller("myCtrl",function($scope,tips) {            var tipsShow = function (tips) {                $scope.tips_message = tips[0];                $scope.tips_btn = tips[1];                $scope.tips_is_show = true;            };            var tipsHide = function() {                $scope.tips_is_show = false;            }            $scope.list = [];            $scope.addNote = function() {                if($scope.note == undefined) {                    tipsShow(tips.add_empty);                    return;                }                var note = $scope.note.trim();                if(note.length == 0) {                    tipsShow(tips.add_empty);                    return;                }                var array = ["习近平"];                var showCount = note;                for(var i=0;i<array.length;i++) {                    var r = new RegExp(array[i],"ig");                    showCount = showCount.replace(r,"*");                    if(showCount.indexOf('*')!='-1') {                        tipsShow(tips.add_minganzi);                    }else {                        if($scope.list.indexOf(showCount)>=0) {                            tipsShow(tips.add_repeat);                            return;                        }                    }                }                 $scope.list.push(showCount);                 $scope.note="";            }            $scope.search = function() {                if($scope.keyword == undefined || $scope.keyword.length == 0) {                    tipsShow(tips.add_empty);                    return;                }                var key = $scope.keyword.trim();                var array = ["习近平"];                var showCount = key;                for(var i=0;i<array.length;i++) {                    var r = new RegExp(array[i],"ig");                    showCount = showCount.replace(r,"*");                    if(showCount.indexOf('*')!='-1') {                        tipsShow(tips.add_minganzi);                    }else {                        if($scope.list.indexOf(showCount)>=0) {                            tipsShow(tips.search_success);                            return;                        }else {                            tipsShow(tips.search_failure);                            return;                        }                    }                }            }            $scope.tipsHide = function() {                tipsHide();            }        });    </script></head><body ng-app="myApp"><main ng-controller="myCtrl">    <div>记账本</div>    <div class="note_list">        <ul>            <li ng-repeat="value in list">{{value}}</li>        </ul>    </div>    <section>        <div class="texts">输入框: <input type="text" size="48" ng-model="note"/></div>    </section>    <section>        <div class="btn">            <button ng-click="addNote()">记录</button>        </div>    </section>    <section>        <div class="texts">搜索框：<input type="text" size="48" ng-model="keyword"/></div>    </section>    <section>        <div class="btn">            <button ng-click="search()">搜索</button>        </div>    </section>    <div id="toast" ng-if="tips_is_show">        <h3>提示</h3>        <h5>{{tips_message}}</h5>        <button ng-click="tipsHide()">{{tips_btn}}</button>    </div></main></body></html>
阅读全文
0 0