JS---用js写个简单记账本快来试试吧【前端】_记账簿javascript代码-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_53401967/article/details/127072541

项目代码：

项目功能：

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

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;