产品价格数据库
2022/4/6 19:22:52
本文主要是介绍产品价格数据库，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！
<!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的思想
这篇关于产品价格数据库的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
- 2024-11-16使用vue3+springboot构建简单Web应用教程
- 2024-11-15全栈开发项目实战：从入门到初级项目的实现
- 2024-11-15数据库项目实战：从入门到初级应用教程
- 2024-11-15IDEA项目实战入门教程
- 2024-11-15IT编程项目实战：新手入门的全面指南
- 2024-11-15Java开发项目实战：新手入门与初级技巧
- 2024-11-15Java零基础项目实战：从入门到独立开发
- 2024-11-15MyBatis Plus教程：入门与基础操作详解
- 2024-11-15MyBatis-Plus教程：新手入门与实战技巧
- 2024-11-15MyBatis教程：从入门到实践
