记账本

来源：互联网发布：catia软件好学吗编辑：程序博客网时间：2024/04/29 20:14
<!DOCTYPE html><html><head lang="en">    <meta charset="UTF-8">    <title>记账本</title>    <script type="text/javascript" src="angular-1.3.0.js"></script>    <style type="text/css">        * {            margin: 0;            padding: 0;        }        li {            list-style: none;        }        input {            width: 320px;            height: 24px;        }        button {            width: 80px;            height: 24px;        }        div {            margin: 16px auto;        }        main {            position: relative;            width: 512px;            margin: 0 auto;        }        .note_list {            width: 496px;            height: 396px;            margin: 0 auto;            padding: 6px;            border: 2px solid #999;        }        .ipt {            width: 388px;        }        .btn {            width: 80px;        }        #dialog {            width: 160px;            height: 160px;            position: absolute;            top: 160px;            left: 176px;            margin: 0 auto;            border: 1px solid #999;        }        #dialog h3, h5 {            margin: 16px 0;            text-align: center;        }        #dialog button {            display: block;            margin: 32px auto;        }    </style>    <script type="text/javascript">        var app=angular.module("nbApp",[]);        //定义一个提示内容的json串        app.constant("tips",{            add_note_empty:{                msg:"请输入记录内容",                btnTips:"好吧"            },            add_note_exists:{                msg:"您记录的内容已经存在",                btnTips:"好吧"            },            search_empty:{                msg:"请输入搜索内容",                btnTips:"好吧"            },            search_success:{                msg:"搜到相关内容",                btnTips:"好吧"            },            search_failure:{                msg:"未搜索到相关内容",                btnTips:"失望"            }        });        app.controller("nbCtrl",function($scope,tips){            //定义一个方法  给弹框赋值            var dialogShow=function(tips){                $scope.dialog_message=tips.msg;                $scope.dialog_btn_tips=tips.btnTips;                $scope.dialog_is_show=true;            }            $scope.dialogHide=function(){                $scope.dialog_is_show=false;            }            //定义一个数组  用于存放记录的东西            $scope.noteList=[];            //记录方法            $scope.addNote=function(){                //判断  如果输入框中的值为空   显示提示框中的内容                if($scope.note==undefined){                    dialogShow(tips.add_note_empty);                    return;                }                //输入框去空格  获取输入的值                var note=$scope.note.trim();                //判断是否为空                if(note.length==0){                    dialogShow(tips.add_note_empty);                    return;                }                //判断是否存在                if($scope.noteList.indexOf(note)>=0){                    dialogShow(tips.add_note_exists);                    return;                }                //倒序排列                $scope.noteList.unshift(note);                //点击确定后  输入框为空                $scope.note="";            };            //点击搜索方法            $scope.search=function(){                if($scope.keyword==undefined){                    dialogShow(tips.search_empty);                    return;                }                //对搜索框中的东西去空格                var keywrods=$scope.keyword.trim();                console.log("-=-=-=-="+keywrods);                //判断如果搜索输入框为空  提示不能为空                if(keywrods.length==0){                    dialogShow(tips.search_empty);                    return;                }                //判断输入框内容是否存在                if($scope.noteList.indexOf(keywrods)>=0){                    //存在                    dialogShow(tips.search_success);                }else{                    //不存在                    dialogShow(tips.search_failure);                }            };        });    </script></head><body ng-app="nbApp"><main ng-controller="nbCtrl">    <div>记账本</div>    <div class="note_list">        <ul>            <li ng-repeat="value in noteList">{{ value }}</li>        </ul>    </div>    <div class="ipt">        输入框：<input type="text" ng-model="note"/>    </div>    <div class="btn">        <button ng-click="addNote()">记录</button>    </div>    <div class="ipt">        搜索框：<input type="text" ng-model="keyword"/>    </div>    <div class="btn">        <button ng-click="search()">搜索</button>    </div>    <div id="dialog" ng-if="dialog_is_show">        <h3>提示</h3>        <h5>{{ dialog_message }}</h5>        <button ng-click="dialogHide()">{{ dialog_btn_tips }}</button>    </div></main></body></html>
阅读全文
0 0