仿记事本

来源：互联网发布：海绵宝宝软件编辑：程序博客网时间：2024/05/16 06:00
    <!DOCTYPE html>    <html lang="en">    <head>        <meta charset="UTF-8">        <title>Title</title>        <style>            body{                position: relative;            }            ul{                width: 400px;                height: 300px;                border: 1px solid #000;            }            li{                list-style: none;            }            .pop{                width: 300px;                height: 200px;                border: 1px solid #000;                background: #eee;                text-align: center;                position: absolute;                top: 50%;                left: 50%;                margin-left: -150px;                margin-top: -100px;            }        </style>        <script src="../js/lib/angular.min.js"></script>        <script>            var myapp=angular.module("myapp",[]);            myapp.controller("myCtrl",function($scope){                $scope.data=["早上花了5元早饭", "中午花了20元午饭","aa"];                $scope.show=false;                $scope.title="";                $scope.btn="";                $scope.add="";                $scope.search="";                //添加内容                $scope.addFun=function(){                    var hasLi=false;                    if($scope.add.length==0){                        alert("输入内容不能为空");                    }else{                        for(var i=0;i<$scope.data.length;i++){                            if($scope.data[i]==$scope.add){                                hasLi=true;                                break;                            }else{                                hasLi=false;                            }                        }                    }                    if(hasLi==true){                        $scope.show=true;                        $scope.title="存在";                        $scope.btn="好吧";                    }else if($scope.add.indexOf("#")!=-1){                        $scope.show=true;                        $scope.title="输入了敏感字";                        $scope.btn="很好吗？";                    }else{                        $scope.data.unshift($scope.add);                        $scope.add="";                    }                };                //点击好吧删除弹框                $scope.hide=function(){                    $scope.show=false;                };                //查找内容                $scope.searchFun=function(){                    var sea=false;                    for(var i=0;i<$scope.data.length;i++){                        if($scope.data[i]==$scope.search){                            sea=true;                            break;                        }else{                            sea=false;                        }                    }                    if(sea==true){                        $scope.show=true;                        $scope.title="搜到";                        $scope.btn="很好";                    }else{                        $scope.show=true;                        $scope.title="没搜到";                        $scope.btn="失望";                    }                }            })        </script>    </head>    <body ng-app="myapp" ng-controller="myCtrl">    <h2>记账本</h2>    <ul>        <li ng-repeat="item in data track by $index">{{item}}</li>    </ul>    <div>        <span>输入框</span><input type="text" ng-model="add"><br/>        <button ng-click="addFun()">记录</button>    </div>    <div>        <span>搜索框</span><input type="text" ng-model="search"><br/>        <button ng-click="searchFun()">搜索</button>    </div>    <div class="pop" ng-show="show">        <p>提示</p>        <p>{{title}}</p>        <button ng-click="hide()">{{btn}}</button>    </div>    </body>    </html>
阅读全文
0 0