记账本

最新推荐文章于 2024-06-03 23:25:00 发布

W1256754982

最新推荐文章于 2024-06-03 23:25:00 发布

阅读量799

点赞数 1

本文链接：https://blog.csdn.net/W1256754982/article/details/78272390

版权

<!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>