简单的图书管理系统（本地存储，不用数据库）

html

代码

首先 先画一个界面（个人审美不是很好，将就用啦）

<div class="add_div">
    <h1>图书管理系统</h1>
    <div>
        书名：<input class='shu_name' type="text">
        作者：<input class='write_name' type="text">
        价格：<input class='shu_money' type="text">
        数量：<input class="shu_sum" type="text"><br>
    </div>
    <div>
        <button class="add_btn">添加</button>
        <button class="cat_btn">查询</button>
        <button class="fan_btn">返回</button>
        <button class="gai_btn">修改</button>
        <button class="san_btn">删除</button>

    </div>
    <div class="biao">
        <table border="1">
            <tr class="table_top">
                <td colspan="3">书名</td>
                <td>作者</td>
                <td>价格</td>
                <td>库存</td>
            </tr>
        </table>
    </div>
</div>

效果

css

代码

<style>
    @keyframes bian0 {
        0% {
            transform: scale(1, 1);
        }
        50% {
            transform: scale(1.03, 1.03);
        }
        100% {
            transform: scale(1, 1);
        }
    }

    .add_div {
        width: 1000px;
        margin: 0 auto;
        /* border: 1px solid red; */
    }

    h1 {
        text-align: center;
    }

    .add_div div {
        text-align: center;
    }

    table {
        width: 800px;
        /* height: 500px; */
        border: 1px solid black;
        margin: 0 auto;
    }

    .table_top {
        height: 50px;
    }

    .bian {
        animation: bian0 0.2s linear 0s 1;
        background-color: blue;
    }
</style>

效果

跟上面一样 这时候就可以运行了 只是没有功能（刚学前端，起名起的很随意，（^ . ^）~）

js

代码

<script>
//每次刷新的时候 获取数据 打印输出数据
var data_base = get_shu()
show_shu()

//界面元素获取
function $(a, b) {
    if (b == undefined) {
        return document.querySelector(a)
    }
    if (b == 'all') {
        return document.querySelectorAll(a)
    }
    else {
        return document.querySelectorAll(a)[b]
    }
}

//声明按钮
var add_btn = $(".add_btn")
var cat_btn = $(".cat_btn")
var fan_btn = $(".fan_btn")
var gai_btn = $(".gai_btn")
var san_btn = $(".san_btn")
var tr = $("tbody")

//从存储空间取数据
function get_shu() {
    var xxx = localStorage.getItem("library")
    if (xxx == null) {
        xxx = []
    } else {
        xxx = JSON.parse(xxx)
    }
    return xxx
}

//将数据显示到界面上
function show_shu() {
    var b;
    var is_you = false
    var a = data_base
    $("tbody").innerHTML =
        `<tr class="table_top">
            <td colspan="3">书名</td>
            <td>作者</td>
            <td>价格</td>
            <td>库存</td>
        </tr>`
    for (var i = 0; i < a.length; i++) {
        $("tbody").innerHTML = $("tbody").innerHTML +
            `<tr>
            <td colspan="3"  onclick='an(this)'>`+ a[i].name + `</td>
            <td>`+ a[i].write + `</td>
            <td>`+ a[i].price + `</td>
            <td>`+ a[i].sum + `</td>
        </tr>`
    }
}

//向存储空间存数据
function set_shu(A) {
    str_A = JSON.stringify(data_base)
    localStorage.setItem("library", str_A)
    show_shu()
}

//一本书的数据模型
function one_shu(a, b, c, d) {
    var one_book = {
        name: a,
        write: b,
        price: c,
        sum: d
    }
    return one_book
}

//清空数据库
function rf_r() {
    data_base = []
    str_A = JSON.stringify(data_base)
    localStorage.setItem("library", str_A)
    show_shu()
}
//增加功能 
add_btn.onclick = function () {
    if ($(".shu_name").value == '' || $(".write_name").value == '' || $(".shu_money").value == '' || $(".shu_sum").value == '') {
        console.log("添加失败")
    } else {
        var a = one_shu($(".shu_name").value, $(".write_name").value, $(".shu_money").value, $(".shu_sum").value)
        data_base.push(a)
        set_shu(data_base)
        $(".shu_name").value = ''
        $(".write_name").value = ''
        $(".shu_money").value = ''
        $(".shu_sum").value = ''
    }
}

//查询功能
cat_btn.onclick = function () {
    var a = data_base
    var c = []
    var d = []
    for (var i = 0; i < a.length; i++) {
        if ($(".shu_name").value == a[i].name) {
            $("tbody").innerHTML =
                `<tr class="table_top">
            <td colspan="3">书名</td>
            <td>作者</td>
            <td>价格</td>
            <td>库存</td>
        </tr>`
            $("tbody").innerHTML = $("tbody").innerHTML +
                `<tr>
            <td colspan="3"  onclick='an(this)'>`+ a[i].name + `</td>
            <td>`+ a[i].write + `</td>
            <td>`+ a[i].price + `</td>
            <td>`+ a[i].sum + `</td>
        </tr>`

            $(".shu_name").value = ''
            $(".write_name").value = ''
            $(".shu_money").value = ''
            $(".shu_sum").value = ''
        }
        if ($(".write_name").value == a[i].write) {
            c.push(a[i])
            d.push(i)
            console.log(d)
            console.log(a[d[0]].name)

            if (c.length > 1) {
                $("tbody").innerHTML =
                    `<tr class="table_top">
                        <td colspan="3">书名</td>
                        <td>作者</td>
                        <td>价格</td>
                        <td>库存</td>
                    </tr>`
                for (var j = 0; j < c.length; j++) {
                    $("tbody").innerHTML = $("tbody").innerHTML +
                        `<tr>
                        <td colspan="3"  onclick='an(this)'>`+ a[d[j]].name + `</td>
                        <td>`+ a[d[j]].write + `</td>
                        <td>`+ a[d[j]].price + `</td>
                        <td>`+ a[d[j]].sum + `</td>
                    </tr>`
                }
            } else {
                $("tbody").innerHTML =
                    `<tr class="table_top">
            <td colspan="3">书名</td>
            <td>作者</td>
            <td>价格</td>
            <td>库存</td>
        </tr>`
                $("tbody").innerHTML = $("tbody").innerHTML +
                    `<tr>
            <td colspan="3"  onclick='an(this)'>`+ a[d[0]].name + `</td>
            <td>`+ a[d[0]].write + `</td>
            <td>`+ a[d[0]].price + `</td>
            <td>`+ a[d[0]].sum + `</td>
        </tr>`
            }
        }
    }
}

//返回--刷新
fan_btn.onclick = function () {
    show_shu()
}

function an(n) {
    //点击动画
        let tr = document.querySelectorAll('tr')
        for (let i = 1; i < tr.length; i++) {
            tr[i].className = ''
        }
        if (n.parentNode.className == '') {
            n.parentNode.className = 'bian'
        } else {
            n.parentNode.className = ''
        }
    //删除(选中删除)
    san_btn.onclick = function () {
        for (var i = 0; i < data_base.length; i++) {
            if (data_base[i].name == n.innerHTML) {
                data_base.splice(i, 1)
                set_shu(data_base)
                n.parentNode.remove()
            }
        }
    }
    //修改(选中修改)
    gai_btn.onclick = function () {
        for (var i = 0; i < data_base.length; i++) {
            if (data_base[i].name == n.innerHTML) {
                if ($(".shu_name").value == '' || $(".write_name").value == '' || $(".shu_money").value == '' || $(".shu_sum").value == '') {
                    console.log("修改失败")
                } else {
                    data_base[i].name = $(".shu_name").value
                    data_base[i].write = $(".write_name").value
                    data_base[i].price = $(".shu_money").value
                    data_base[i].sum = $(".shu_sum").value
                    $(".shu_name").value = ''
                    $(".write_name").value = ''
                    $(".shu_money").value = ''
                    $(".shu_sum").value = ''
                    set_shu(data_base)
                }
            }
        }
    }
}

效果

还是一样，就这一个界面

源码

复制粘贴到一个html文件中就可以运行了 刚开始没有数据 自己添加哦

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        @keyframes bian0 {
            0% {
                transform: scale(1, 1);
            }
            50% {
                transform: scale(1.03, 1.03);
            }
            100% {
                transform: scale(1, 1);
            }
        }

        .add_div {
            width: 1000px;
            margin: 0 auto;
            /* border: 1px solid red; */
        }

        h1 {
            text-align: center;
        }

        .add_div div {
            text-align: center;
        }

        table {
            width: 800px;
            /* height: 500px; */
            border: 1px solid black;
            margin: 0 auto;
        }

        .table_top {
            height: 50px;
        }

        .bian {
            animation: bian0 0.2s linear 0s 1;
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="add_div">
        <h1>图书管理系统</h1>
        <div>
            书名：<input class='shu_name' type="text">
            作者：<input class='write_name' type="text">
            价格：<input class='shu_money' type="text">
            数量：<input class="shu_sum" type="text"><br>
        </div>
        <div>
            <button class="add_btn">添加</button>
            <button class="cat_btn">查询</button>
            <button class="fan_btn">返回</button>
            <button class="gai_btn">修改</button>
            <button class="san_btn">删除</button>

        </div>
        <div class="biao">
            <table border="1">
                <tr class="table_top">
                    <td colspan="3">书名</td>
                    <td>作者</td>
                    <td>价格</td>
                    <td>库存</td>
                </tr>
            </table>
        </div>
    </div>
</body>
<script>
    //每次刷新的时候 获取数据 打印输出数据
    var data_base = get_shu()
    show_shu()

    //界面元素获取
    function $(a, b) {
        if (b == undefined) {
            return document.querySelector(a)
        }
        if (b == 'all') {
            return document.querySelectorAll(a)
        }
        else {
            return document.querySelectorAll(a)[b]
        }
    }

    //声明按钮
    var add_btn = $(".add_btn")
    var cat_btn = $(".cat_btn")
    var fan_btn = $(".fan_btn")
    var gai_btn = $(".gai_btn")
    var san_btn = $(".san_btn")
    var tr = $("tbody")

    //从存储空间取数据
    function get_shu() {
        var xxx = localStorage.getItem("library")
        if (xxx == null) {
            xxx = []
        } else {
            xxx = JSON.parse(xxx)
        }
        return xxx
    }

    //将数据显示到界面上
    function show_shu() {
        var b;
        var is_you = false
        var a = data_base
        $("tbody").innerHTML =
            `<tr class="table_top">
                <td colspan="3">书名</td>
                <td>作者</td>
                <td>价格</td>
                <td>库存</td>
            </tr>`
        for (var i = 0; i < a.length; i++) {
            $("tbody").innerHTML = $("tbody").innerHTML +
                `<tr>
                <td colspan="3"  onclick='an(this)'>`+ a[i].name + `</td>
                <td>`+ a[i].write + `</td>
                <td>`+ a[i].price + `</td>
                <td>`+ a[i].sum + `</td>
            </tr>`
        }
    }

    //向存储空间存数据
    function set_shu(A) {
        str_A = JSON.stringify(data_base)
        localStorage.setItem("library", str_A)
        show_shu()
    }

    //一本书的数据模型
    function one_shu(a, b, c, d) {
        var one_book = {
            name: a,
            write: b,
            price: c,
            sum: d
        }
        return one_book
    }

    //清空数据库
    function rf_r() {
        data_base = []
        str_A = JSON.stringify(data_base)
        localStorage.setItem("library", str_A)
        show_shu()
    }
    //增加功能 
    add_btn.onclick = function () {
        if ($(".shu_name").value == '' || $(".write_name").value == '' || $(".shu_money").value == '' || $(".shu_sum").value == '') {
            console.log("添加失败")
        } else {
            var a = one_shu($(".shu_name").value, $(".write_name").value, $(".shu_money").value, $(".shu_sum").value)
            data_base.push(a)
            set_shu(data_base)
            $(".shu_name").value = ''
            $(".write_name").value = ''
            $(".shu_money").value = ''
            $(".shu_sum").value = ''
        }
    }

    //查询功能
    cat_btn.onclick = function () {
        var a = data_base
        var c = []
        var d = []
        for (var i = 0; i < a.length; i++) {
            if ($(".shu_name").value == a[i].name) {
                $("tbody").innerHTML =
                    `<tr class="table_top">
                <td colspan="3">书名</td>
                <td>作者</td>
                <td>价格</td>
                <td>库存</td>
            </tr>`
                $("tbody").innerHTML = $("tbody").innerHTML +
                    `<tr>
                <td colspan="3"  onclick='an(this)'>`+ a[i].name + `</td>
                <td>`+ a[i].write + `</td>
                <td>`+ a[i].price + `</td>
                <td>`+ a[i].sum + `</td>
            </tr>`

                $(".shu_name").value = ''
                $(".write_name").value = ''
                $(".shu_money").value = ''
                $(".shu_sum").value = ''
            }
            if ($(".write_name").value == a[i].write) {
                c.push(a[i])
                d.push(i)
                console.log(d)
                console.log(a[d[0]].name)

                if (c.length > 1) {
                    $("tbody").innerHTML =
                        `<tr class="table_top">
                            <td colspan="3">书名</td>
                            <td>作者</td>
                            <td>价格</td>
                            <td>库存</td>
                        </tr>`
                    for (var j = 0; j < c.length; j++) {
                        $("tbody").innerHTML = $("tbody").innerHTML +
                            `<tr>
                            <td colspan="3"  onclick='an(this)'>`+ a[d[j]].name + `</td>
                            <td>`+ a[d[j]].write + `</td>
                            <td>`+ a[d[j]].price + `</td>
                            <td>`+ a[d[j]].sum + `</td>
                        </tr>`
                    }
                } else {
                    $("tbody").innerHTML =
                        `<tr class="table_top">
                <td colspan="3">书名</td>
                <td>作者</td>
                <td>价格</td>
                <td>库存</td>
            </tr>`
                    $("tbody").innerHTML = $("tbody").innerHTML +
                        `<tr>
                <td colspan="3"  onclick='an(this)'>`+ a[d[0]].name + `</td>
                <td>`+ a[d[0]].write + `</td>
                <td>`+ a[d[0]].price + `</td>
                <td>`+ a[d[0]].sum + `</td>
            </tr>`
                }
            }
        }
    }

    //返回--刷新
    fan_btn.onclick = function () {
        show_shu()
    }

    function an(n) {
     	//点击动画
        let tr = document.querySelectorAll('tr')
        for (let i = 1; i < tr.length; i++) {
            tr[i].className = ''
        }
        if (n.parentNode.className == '') {
            n.parentNode.className = 'bian'
        } else {
            n.parentNode.className = ''
        }
        //删除(选中删除)
        san_btn.onclick = function () {
            for (var i = 0; i < data_base.length; i++) {
                if (data_base[i].name == n.innerHTML) {
                    data_base.splice(i, 1)
                    set_shu(data_base)
                    n.parentNode.remove()
                }
            }
        }
        //修改(选中修改)
        gai_btn.onclick = function () {
            for (var i = 0; i < data_base.length; i++) {
                if (data_base[i].name == n.innerHTML) {
                    if ($(".shu_name").value == '' || $(".write_name").value == '' || $(".shu_money").value == '' || $(".shu_sum").value == '') {
                        console.log("修改失败")
                    } else {
                        data_base[i].name = $(".shu_name").value
                        data_base[i].write = $(".write_name").value
                        data_base[i].price = $(".shu_money").value
                        data_base[i].sum = $(".shu_sum").value
                        $(".shu_name").value = ''
                        $(".write_name").value = ''
                        $(".shu_money").value = ''
                        $(".shu_sum").value = ''
                        set_shu(data_base)
                    }
                }
            }
        }
    }

</script>
</html>