JS---用js写个简单记账本快来试试吧【前端】

最新推荐文章于 2023-06-18 11:06:52 发布

羊️里个雲

最新推荐文章于 2023-06-18 11:06:52 发布

阅读量1.1k

点赞数 6

分类专栏：项目文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_53401967/article/details/127072541

版权

项目专栏收录该内容

1 篇文章 0 订阅

订阅专栏

项目代码：

项目功能：

记账本功能，余额显示，支出和收入显示，每次添加新的一项支出和收入，都记录到总的记录栏中，同时每次添加都在历史记录中显示交易名称和交易金额，金额前面显示支出或者收入符号，并且根据总记录栏颜色在历史记录中出现对应的颜色。在添加先交易里需输入交易名称，在金额前面必须添加+或者-，没有添加的话，就会弹出对话框请输入正确的信息。同时，在最上方的您的余额里面会对历史记录的所有数据进行计算，显示正负值。

html代码：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记账本</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
            box-sizing: border-box;
        }

        html {
            font-size: 62.5%;
        }

        body {
            background-color: #f1f1f1;
        }

        .container {
            width: 480px;
            padding: 50px;
            margin: 0 auto;
            /* background-color: gold; */
            /* overflow: hidden; */
            position:relative;
        }

        h1 {
            text-align: center;
        }

        .container>p:nth-of-type(2) {
            line-height: 4rem;
            font-size: 3.2rem;
        }

        section {
            height: 6rem;
            padding: 1rem;
            background-color: #fff;
            margin-top: 2rem;
            box-shadow: 1px 1px 3px lightgray;
            /* overflow: hidden; */
        }

        section .item {
            width: 50%;
            height: 100%;
            float: left;
            border-right: 1px solid lightgray;
        }

        section .zhichu {
            border: 0;
        }

        section .item p {
            width: 100%;
            text-align: center;
            font-size: 1.6rem;
            font-weight: 900;
            display: flex;
            flex-wrap: wrap;
            align-content: center;
        }

        h2 {
            margin-top: 1.5rem;
            line-height: 4rem;
            font-size: 1.8rem;
            border-bottom: 1px solid lightgray;
        }

        li {
            height: 3rem;
            background-color: #fff;
            margin: 1rem auto;
            font-size: 1.2rem;
            position: relative;
        }

        li span {
            float: left;
            width: 46%;
            height: 3rem;
            line-height: 3rem;
        }

        li .name {
            margin-left: 2%;
        }

        li .money {
            text-align: right;
        }

        li .del {
            width: 2rem;
            height: 2rem;
            line-height: 2rem;
            text-align: center;
            color: #fff;
            background-color: tomato;
            font-size: 1.2rem;
            position: absolute;
            left: -2rem;
            top: .5rem;
            display: none;
        }

        li:hover .del {
            display: block;
        }

        .show {
            line-height: 3.6rem;
            font-size: 1.6rem;
        }

        input {
            display: block;
            width: 100%;
            height: 3rem;
            line-height: 3rem;
            font-size: 1.2rem;
            text-indent: 2.4rem;
        }

        #add {
            height: 3rem;
            line-height: 3rem;
            font-size: 1.4rem;
            color: white;
            background-color: plum;
            text-align: center;
            margin-top: 2rem;
        }

        #add:hover {
            cursor: pointer;
        }

        .alert{
            width: 100%;
            height: 4rem;
            font-size: 1.8rem;
            color: white;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            display: none;
        }

        #error{
            background-color: tomato;
            box-shadow: 0 0 5px tomato;
        }

        #success{
            background-color:skyblue;
            box-shadow: 0 0 5px skyblue;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>记账本</h1>
        <p style="margin-top:2rem;">您的余额</p>
        <p>￥<span id="yue">0</span></p>
        <section>
            <div class="item shouru">
                <p>收入</p>
                <p style="color:skyblue;">￥<span id="shouru">0.00</span></p>
            </div>
            <div class="item zhichu">
                <p>支出</p>
                <p style="color:tomato;">￥<span id="shouru">0.00</span></p>
            </div>
        </section>
        <h2>历史记录</h2>
        <ul>
            <!-- <li>
                <span class="name">投资</span>
                <span class="money">-1000</span>
                <span class="del">x</span>
            </li> -->
        </ul>
        <h2>添加新交易</h2>
        <p class="show">交易名称</p>
        <input id="name" type="text" placeholder="请输入名称">
        <p class="show">金额（支出-负数，收入+整数）</p>
        <input id="money" type="text" placeholder="请输入金额">
        <div id="add">添加新交易</div>

        <p id="error" class="alert">请输入正确的信息！</p>
        <p id="success" class="alert">信息添加成功！</p>
    </div>
</body>

引入record.js:

//关于本地存储的构造函数

// localStorage.record = [
//     {
//         type: "+",
//         name: "项目A",
//         money: "5000000"
//     },
//     {
//         type: "-",
//         name: "项目B",
//         money: "5000000"
//     }
// ]


function Record() {
    if (!localStorage.Record) {
        localStorage.record = '[]';
    }
}

// 获取缓存的记录内容
Record.prototype.getRecords = function () {
    return JSON.parse(localStorage.record);
}

// 添加新数据
Record.prototype.addData = function (data) {
    // 拿到数组 添加数据 更新缓存
    var arr = this.getRecords();
    arr.push(data);
    localStorage.record = JSON.stringify(arr);
}

// 清除所有数据
Record.prototype.removeAllData = function () {
    localStorage.clear();
}

// 删除指定数据
Record.prototype.delData = function (index) {
    var arr = this.getRecords();
    arr.splice(index, 1);
    localStorage.record = JSON.stringify(arr);
}

// 计算总收入
Record.prototype.shouru = function () {
    var total = 0;
    var arr = this.getRecords();
    arr.forEach(function (data) {
        if (data.type === "+") {
            total += data.money / 1;
        }
    })
    return total;
}

// 计算总支出
Record.prototype.zhichu = function () {
    var total = 0;
    var arr = this.getRecords();
    arr.forEach(function (data) {
        if (data.type === "-") {
            total += data.money / 1;
        }
    })
    return total;
}

JS代码：

<script>
    //  1.根据缓存显示历史记录
    // 创建record对象
    var record = new Record();
    // 获取历史记录，并添加对应的li
    record.getRecords().forEach(function (data) {
        addLi(data);
    })
    //  计算 收入 支出 余额
    setMoney();
    
    // 2.点击添加按钮
    $("#add").click(function () {
        // 1.判断输入框的内容
        if (isAlert()) {
            errorAlert();
            return ;
        }
        // 2.创建li 填充li 添加li
        var data = {
            name: $("#name").val(),
            type: $("#money").val().slice(0, 1),
            money: $("#money").val().slice(1)
        }
        addLi(data);

        // 3.对缓存数据进行添加
        record.addData(data);

        // 4.计算 收入 支出 余额
        setMoney();

        // 5.输入框内容清空
        $("input").val("");

        // 6.显示添加成功的信息
        successAlert();
    })

    // 如果输入框内容不合理，就弹窗提醒用户
    function isAlert() {
        var reg = /^[\+\-](\d+|\d+.\d{1,2})$/;
        return ($("#name").val() === "" || !reg.test($("#money").val()))
    }

    // 添加li到ul当中
    function addLi(data) {
        $(`
            <li style="border-right:4px solid ${data.type === "+" ? "skyblue" : "tomato"}">
                <span class="name">${data.name}</span>
                <span class="money" style="color:${data.type === "+" ? "skyblue" : "tomato"}"">${data.type + data.money}</span>
                <span class="del">x</span>
            </li>
        `).appendTo($("ul")).find(".del").click(function () {
            // 删掉数组里的数据
            var index = $("li").index($(this).parent())
            record.delData(index);
            setMoney();
            // 删掉li
            $(this).parent().remove();
        })
    }

    // 计算 收入 支出 余额
    function setMoney() {
        $("#shouru").html(record.shouru());
        $("#zhichu").html(record.zhichu());
        $("#yue").html(record.shouru() - record.zhichu());
    }

    // 提示
    function errorAlert(){
        $(".alert").hide();
        $("#error").fadeIn(300).delay(1500).fadeOut(300);
    }
    function successAlert(){
        $(".alert").hide();
        $("#success").fadeIn(300).delay(1500).fadeOut(300);
    }
</script>