记事本代码

不念不忘少年蓝@ 2022-06-07 10:19 257阅读 0赞

效果：

![Center][]

![Center 1][]

依赖包：

angular-1.3.0.js

代码：

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>记账本</title>
        <script src="angular-1.3.0.js"></script>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
    
            li {
                height: 24px;
                line-height: 24px;
                list-style: none;
            }
    
            main {
                position: relative;
                margin: 0 auto;
            }
    
            div {
                height: 48px;
                line-height: 48px;
            }
    
            section {
                width: 512px;
            }
    
            .ipt {
                width: 388px;
                margin: 0 auto;
            }
    
            .ipt input {
                width: 320px;
                height: 24px;
            }
    
            .btn {
                width: 80px;
                margin: 0 auto;
            }
    
            button {
                width: 80px;
                height: 24px;
            }
    
            .note_list {
                width: 512px;
                height: 384px;
                border: 2px solid #999;
                padding: 12px;
            }
            /*提示框的大小*/
            #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_note_empty: ["请输入记录内容", "好吧"],
                add_note_exists: ["您记录的内容已经存在", "好吧"],
                search_empty: ["请输入搜索内容", "好吧"],
                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;
                    console.log($scope.tips_message);
                    console.log($scope.tips_btn);
                    console.log($scope.tips_is_show);
                };
    
                var tipsHide = function () {
                    $scope.tips_is_show = false;
                };
    
                $scope.noteList = []; // 保存账本所有记录。
    
                $scope.addNote = function () {
                    if ($scope.note == undefined) {
                        tipsShow(tips.add_note_empty);
                        return;
                    }
    
                    var note = $scope.note.trim();
    
                    if (note.length == 0) {
                        tipsShow(tips.add_note_empty);
                        return;
                    }
    
                    if ($scope.noteList.indexOf($scope.note) >= 0) {
                        tipsShow(tips.add_note_exists);
                        return;
                    }
    
                    $scope.noteList.push($scope.note);
                    $scope.note = "";
                };
    
                $scope.search = function () {
                    if ($scope.keyword == undefined || $scope.keyword.length == 0) {
                        tipsShow(tips.search_empty);
                        return;
                    }
    
                    if ($scope.noteList.indexOf($scope.keyword) >= 0) {
                        tipsShow(tips.search_success);
                    } else {
                        tipsShow(tips.search_failure);
                    }
                };
    
                $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 noteList">{
      { value }}</li>
            </ul>
        </div>
    
        <section>
            <div class="ipt">
                输入框：<input type="text" size="48" ng-model="note"/>
            </div>
        </section>
    
        <section>
            <div class="btn">
                <button ng-click="addNote()">记录</button>
            </div>
        </section>
    
        <section>
            <div class="ipt">
                搜索框：<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>

[Center]: /images/20220607/813bfce76a5844838320104e04ce8c19.png
[Center 1]: /images/20220607/b27051fe259b424493fc54b2c9e9c218.png