产品价格数据库

本文主要是介绍产品价格数据库，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!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>
        input {
            font-size: 25px;
        }
        button {
            width: 100px;
            height: 34px;
            background-color: white;
        }
        #show {
            font-size: 23px;
        }
    </style>
</head>
<body>
    <div style="width: 100%;position: absolute;top: 0;left: 0;">
        <div style="width: 100%;text-align: center;margin-top: 10px;border-bottom: 1px solid #DCDCDC;padding-bottom: 10px;">
            <button id="import" style="background-color: white;">导入数据</button>
            <button id="export" style="margin-left: 30px;background-color: white;">导出数据</button>
        </div>
        <div id="a" style="width: 100%;margin-top: 10px;border-bottom: 1px solid #DCDCDC;padding-bottom: 10px;"></div>
        <div id="b" style="width: 100%;margin-top: 10px;border-bottom: 1px solid #DCDCDC;padding-bottom: 10px;"></div>
        <div id="c" style="width: 100%;margin-top: 10px;border-bottom: 1px solid #DCDCDC;padding-bottom: 10px;"></div>
        <div id="main" style="width: 100%;margin-top: 5px;display: none;">
            <div id="show" style="width: 90%;margin-left: 5%;margin-top: 20px;"></div>
            <input type="number" placeholder="请输入数量" style="margin-top: 20px;margin-left: 5%;">
            <br>
            <button style="margin-left: 5%;margin-top: 20px;">计算</button>
            <div id="result" style="margin-left: 5%;margin-top: 20px;font-size: 24px;font-weight: 700;color: red;"></div>
        </div>
    </div>
    <div id="im" style="width: 100%;height: 100vh;position: absolute;top: 0;left: 0;background-color: white;display: none;">
        <textarea rows="30" cols="50" value=""></textarea>
        <div style="width: 100%;text-align: center;margin-top: 15px;">
            <button>取消</button>
            <button>确定</button>
        </div>
        <div style="width: 100%;text-align: center;margin-top: 10px;color: red;font-weight: 700;">
            注意：一旦确定，将会覆盖原有数据，无法找回，请谨慎操作！！！
        </div>
    </div>
    <div id="adda" style="width: 100%;height: 100vh;position: absolute;top: 0;left: 0;background-color: white;display: none;">
        <div style="width: 100%;text-align: center;margin-top: 30%;">
            <input type="text" placeholder="请输入分类名称" value="" />
        </div>
        <div style="width: 100%;text-align: center;margin-top: 20px;">
            <button>取消</button>
            <button>确定</button>
        </div>
    </div>
    <div id="addb" style="width: 100%;height: 100vh;position: absolute;top: 0;left: 0;background-color: white;display: none;">
        <div style="width: 100%;text-align: center;margin-top: 30%;">
            <input type="text" placeholder="请输入产品名称">
        </div>
        <div style="width: 100%;text-align: center;margin-top: 20px;">
            <button>取消</button>
            <button>确定</button>
        </div>
    </div>
    <div id="addc" style="width: 100%;height: 100vh;position: absolute;top: 0;left: 0;background-color: white;display: none;">
        <div style="width: 100%;text-align: center;margin-top: 30%;">
            <input type="text" placeholder="请输入型号名称" style="margin-top: 20px;">
            <input type="number" placeholder="请输入进价" style="margin-top: 20px;">
            <input type="number" placeholder="请输入卖价" style="margin-top: 20px;">
            <input type="text" placeholder="请输入单位（斤，个，盒，袋）" style="margin-top: 20px;">
            <input type="number" placeholder="请输入系数" value="1.0" style="margin-top: 20px;"style="margin-top: 20px;">
        </div>
        <div style="width: 100%;text-align: center;margin-top: 20px;">
            <button>取消</button>
            <button>确定</button>
        </div>
    </div>
    <script>
        let data = localStorage.getItem("data");
        if (data) {
            data = JSON.parse(data);
            render(data);
        } else {
            let temp = {};
            localStorage.setItem("data", JSON.stringify(temp));
            render(temp);
            location.reload();
        }
        let a_select = '';
        let b_select = '';
        let c_select = '';
        let x = 0;
        document.getElementById("import").onclick = function() {
            document.getElementById("im").style.display = "block";
        };
        document.getElementById("export").onclick = function() {
            let strcolor = localStorage.getItem("data");
            let input = document.createElement("input");
            input.setAttribute("type", "text");
            input.setAttribute("id", "copycode");
            input.setAttribute("value", strcolor);
            document.getElementsByTagName("body")[0].appendChild(input);
            document.getElementById("copycode").select();
            document.execCommand("copy");
            document.getElementById("copycode").remove();
            alert("已复制到剪切板");
        };
        document.getElementById("im").getElementsByTagName("button")[0].onclick = function() {
            document.getElementById("im").style.display = "none";
        };
        document.getElementById("im").getElementsByTagName("button")[1].onclick = function() {
            localStorage.setItem("data", document.getElementById("im").getElementsByTagName("textarea")[0].value);
            document.getElementById("im").style.display = "none";
            location.reload();
        };
        document.getElementById("adda").getElementsByTagName("button")[0].onclick = function() {
            document.getElementById("adda").style.display = "none";
        };
        document.getElementById("adda").getElementsByTagName("button")[1].onclick = function() {
            let temp = document.getElementById("adda").getElementsByTagName("input")[0].value;
            if (temp.trim() == '') {
                return alert("分类名称尚未填写！");
            }
            data[+(new Date())] = {
                name: temp, 
                data: {}
            };
            localStorage.setItem("data", JSON.stringify(data));
            document.getElementById("adda").style.display = "none";
            location.reload();
        };
        document.getElementById("addb").getElementsByTagName("button")[0].onclick = function() {
            document.getElementById("addb").style.display = "none";
        };
        document.getElementById("addb").getElementsByTagName("button")[1].onclick = function() {
            let temp = document.getElementById("addb").getElementsByTagName("input")[0].value;
            if (temp.trim() == '') {
                return alert("产品名称尚未填写！");
            }
            data[a_select].data[+(new Date())] = {
                name: temp, 
                data: {}
            };
            localStorage.setItem("data", JSON.stringify(data));
            document.getElementById("addb").style.display = "none";
            location.reload();
        };
        document.getElementById("addc").getElementsByTagName("button")[0].onclick = function() {
            document.getElementById("addc").style.display = "none";
        };
        document.getElementById("addc").getElementsByTagName("button")[1].onclick = function() {
            let temp = document.getElementById("addc").getElementsByTagName("input");
            let name = temp[0].value;
            let _price = temp[1].value;
            let price = temp[2].value;
            let unit = temp[3].value;
            let coefficient = temp[4].value;
            if (name.trim() == '') {
                return alert("型号名称尚未填写！");
            }
            if (_price.trim() == '') {
                return alert("进价尚未填写！");
            }
            if (price.trim() == '') {
                return alert("卖价尚未填写！");
            }
            if (unit.trim() == '') {
                return alert("单位尚未填写！");
            }
            if (coefficient.trim() == '') {
                return alert("系数尚未填写！");
            }
            data[a_select].data[b_select].data[+(new Date())] = {
                name: name, 
                _price: +_price, 
                price: +price, 
                unit: unit, 
                coefficient: +coefficient
            };
            localStorage.setItem("data", JSON.stringify(data));
            document.getElementById("addc").style.display = "none";
            location.reload();
        };
        document.getElementById("main").getElementsByTagName("button")[0].onclick = function() {
            let t = document.getElementById("show").getElementsByTagName("div");
            let x1 = parseInt(t[1].innerText.substr(3));
            let x2 = +document.getElementById("main").getElementsByTagName("input")[0].value;
            let x3 = parseInt(t[3].innerText.substr(3));
            document.getElementById("result").innerText = x1 * x2 * x3;
        };
        function render(data) {
            for (let item in data) {
                let button = document.createElement("button");
                button.style = "margin-left: 5px;background-color: white;";
                button.innerText = data[item].name;
                button.id = item;
                button.ontouchstart = function(e) {
                    x = e.changedTouches[0].clientX;
                };
                button.ontouchend = function(e) {
                    if (Math.abs(e.changedTouches[0].clientX - x) > 50) {
                        if (confirm(`确认要删除【${this.innerText}】吗？`)) {
                            delete data[this.id];
                            localStorage.setItem("data", JSON.stringify(data));
                            location.reload();
                        }
                    }
                };
                button.onclick = function() {
                    if (this.style.backgroundColor == "white") {
                        this.style.backgroundColor = "#FF7F50";
                        a_select != "" && (document.getElementById(a_select).style.backgroundColor = "white");
                        a_select = this.id;
                        document.getElementById("b").innerHTML = "";
                        b_select = '';
                        document.getElementById("c").innerHTML = "";
                        c_select = '';
                        document.getElementById("main").style.display = "none";
                        let temp_data = data[a_select].data;
                        for (let item in temp_data) {
                            let button = document.createElement("button");
                            button.style = "margin-left: 5px;background-color: white;";
                            button.innerText = temp_data[item].name;
                            button.id = item;
                            button.ontouchstart = function(e) {
                                x = e.changedTouches[0].clientX;
                            };
                            button.ontouchend = function(e) {
                                if (Math.abs(e.changedTouches[0].clientX - x) > 50) {
                                    if (confirm(`确认要删除【${this.innerText}】吗？`)) {
                                        delete data[a_select].data[this.id];
                                        localStorage.setItem("data", JSON.stringify(data));
                                        location.reload();
                                    }
                                }
                            };
                            button.onclick = function() {
                                if (this.style.backgroundColor == "white") {
                                    this.style.backgroundColor = "#FF7F50";
                                    b_select != "" && (document.getElementById(b_select).style.backgroundColor = "white");
                                    b_select = this.id;
                                    document.getElementById("c").innerHTML = "";
                                    c_select = "";
                                    document.getElementById("main").style.display = "none";
                                    let temp_data = data[a_select].data[b_select].data;
                                    for (let item in temp_data) {
                                        let button = document.createElement("button");
                                        button.style = "margin-left: 5px;background-color: white;";
                                        button.innerText = temp_data[item].name;
                                        button.id = item;
                                        button.ontouchstart = function(e) {
                                            x = e.changedTouches[0].clientX;
                                        };
                                        button.ontouchend = function(e) {
                                            if (Math.abs(e.changedTouches[0].clientX - x) > 50) {
                                                if (confirm(`确认要删除【${this.innerText}】吗？`)) {
                                                    delete data[a_select].data[b_select].data[this.id];
                                                    localStorage.setItem("data", JSON.stringify(data));
                                                    location.reload();
                                                }
                                            }
                                        };
                                        button.onclick = function() {
                                            if (this.style.backgroundColor == "white") {
                                                this.style.backgroundColor = "#FF7F50";
                                                c_select != "" && (document.getElementById(c_select).style.backgroundColor = "white");
                                                c_select = this.id;
                                                document.getElementById("main").style.display = "block";
                                                document.getElementById("result").innerHTML = "";
                                                document.getElementById("main").getElementsByTagName("input")[0].value = '';
                                                document.getElementById("show").innerHTML = `<div style="margin-top: 20px;">进价：${temp_data[item]._price}元</div><div style="margin-top: 20px;color: red;">卖价：${temp_data[item].price}元</div><div style="margin-top: 20px;">单位：${temp_data[item].unit}</div><div style="margin-top: 20px;">系数：${temp_data[item].coefficient}</div>`;
                                            }
                                        };
                                        document.getElementById('c').appendChild(button);
                                    }
                                    let button = document.createElement("button");
                                    button.style = "margin-left: 5px;background-color: white;";
                                    button.innerText = "添加型号";
                                    button.onclick = function () {
                                        document.getElementById("addc").style.display = "block";
                                    };
                                    document.getElementById('c').appendChild(button);
                                }
                            };
                            document.getElementById('b').appendChild(button);
                        }
                        let button = document.createElement("button");
                        button.style = "margin-left: 5px;background-color: white;";
                        button.innerText = "添加产品";
                        button.onclick = function () {
                            document.getElementById("addb").style.display = "block";
                        };
                        document.getElementById('b').appendChild(button);
                    }
                };
                document.getElementById('a').appendChild(button);
            }
            let button = document.createElement("button");
            button.style = "margin-left: 5px;background-color: white;";
            button.innerText = "添加分类";
            button.onclick = function () {
                document.getElementById("adda").style.display = "block";
            };
            document.getElementById('a').appendChild(button);
        }
    </script>
</body>
</html>
最大的亮点是整个界面及交互都由JSON字符串配置而成，这就可以把注意力放到数据的构造上，而不必关心代码的内部实现，同样折射了F(Data) = View的思想
这篇关于产品价格数据库的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
Java教程

产品价格数据库

前端开发

后端开发

移动端开发

数据库

服务器运维

人工智能

区块链

游戏开发

网站运营

大数据/云计算

软件工程

软件/开发工具使用

资讯
