记事本代码

效果:

记事本代码_第1张图片



记事本代码_第2张图片



依赖包:

      angular-1.3.0.js


代码:



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>












你可能感兴趣的:(记事本代码)