###
嘎嘎原生，看就完了
###
#
#
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" />
<link rel="stylesheet" href="css.css" />
<title>Document</title>
</head>
<body>
<div class="common">
<a href="javascript:;" onclick="show()">添加信息</a>
<input type="text" value="" id="search" />
<input type="submit" value="搜索" onclick="search()" />
<div class="header">
<div class="row01">
<!--传this关键字，代表input标签对象-->
<input type="checkbox" class="chkall" onclick="checkall(this)" />全选
</div>
<div class="row02">商品标题</div>
<div class="row03">数量</div>
.
<div class="row04">单价(元)</div>
<div class="row05">总价(元)</div>
<div class="row06">操作</div>
</div>
<div class="goods"></div>
<div class="header">
<div class="row01" onclick="delall(this)">删除全部</div>
<div class="row02"></div>
<div class="row03"></div>
<div class="row04">总共<b>2</b>件商品</div>
<div class="row05">总价<span>1999.9</span>元</div>
<div class="row06"></div>
</div>
</div>
<div class="info">
<a href="javascript:;" onclick="hide()">X</a>
<ul>
<li>
<label for="">商品标题</label>
<input type="text" id="title" value="" placeholder="请输入商品标题" />
</li>
<li>
<label for="">商品数量</label>
<input type="text" id="num" value="" placeholder="请输入商品数量" />
</li>
<li>
<label for="">商品单价</label>
<input type="text" id="price" value="" placeholder="请输入商品单价" />
</li>
<li>
<label for=""> </label>
<input type="submit" onclick="add()" value="提交" />
</li>
</ul>
</div>
<script src="js1.js"></script>
</body>
</html>
###
css部分
* {
margin: 0;
padding: 0;
}
body {
/* position: relative; */
height: 800px;
}
.common {
width: 1200px;
margin: 0 auto;
}
.header {
background: #e3e3e3;
height: 60px;
line-height: 60px;
}
.row01,
.row02,
.row03,
.row04,
.row05,
.row06 {
display: inline-block;
width: 10%;
text-align: center;
}
.row02 {
width: 30%;
}
.row03 {
width: 19%;
}
.good {
height: 60px;
line-height: 60px;
}
.row03 a,
.row03 input {
display: inline-block;
width: 30px;
height: 30px;
border: 1px solid #e3e3e3;
text-decoration: none;
line-height: 30px;
text-align: center;
vertical-align: middle;
}
.info {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
height: 400px;
width: 400px;
background-color: #e3e3e3;
display: none;
}
.info ul {
list-style: none;
}
.info ul li {
height: 50px;
line-height: 50px;
padding: 0 20px;
}
.info ul li input {
height: 40px;
line-height: 40px;
width: 220px;
margin-top: 20px;
}
.info a {
display: inline-block;
float: right;
text-align: center;
border: 1px solid white;
width: 30px;
height: 30px;
}
###
js部分
let good =
JSON.parse(localStorage.getItem("good")) ||
[
/* {
title:'小米手机',
num:1,
price:1999.9,
totalprice:1999.0,
ischecked:''
},
{
title:'红米手机',
num:1,
price:1999.9,
totalprice:1999.0,
ischecked:''
},
{
title:'苹果手机',
num:1,
price:1999.9,
totalprice:1999.0,
ischecked:''
} */
];
function $(selector) {
return document.querySelector(selector);
}
function createhtml(good) {
let html = "";
good.forEach(function (item, index) {
html += `<div class="good">
<div class="row01">
<input type="checkbox" class="chk" ${item.ischecked} onclick="chk(${index})">
</div>
<div class="row02">
${item.title}
</div>
<div class="row03">
<a href="javascript:;" onclick="inc(${index})">+</a>
<input type="text" value="${item.num}">
<a href="javascript:;" onclick="dec(${index})">-</a>
</div>
<div class="row04">
${item.price}
</div>
<div class="row05">
${item.totalprice}
</div>
<div class="row06">
<a href="javascript:;" onclick="del(${index})">删除</a>
</div>
</div>
`;
});
total();
$(".goods").innerHTML = html;
}
createhtml(good);
function add() {
var title = document.querySelector("#title").value;
var num = parseInt(document.querySelector("#num").value);
var price = parseInt(document.querySelector("#price").value);
if (title == "" || num == "" || price == "") {
return false;
}
var obj = {
title: title,
num: num,
price: parseFloat(price),
totalprice: parseInt(num) * parseInt(price),
idchecked: "",
};
good.push(obj);
hide();
localStorage.setItem("good", JSON.stringify(good));
createhtml(good);
}
function show() {
document.querySelector(".info").style.display = "block";
}
function hide() {
document.querySelector(".info").style.display = "none";
}
function del(index) {
good.splice(index, 1);
createhtml(good);
localStorage.setItem("good", JSON.stringify(good));
}
function delall() {
for (var i = good.length - 1; i >= 0; i--) {
if (good[i].ischecked) {
good.splice(i, 1);
}
}
localStorage.setItem("good", JSON.stringify(good));
createhtml(good);
}
function inc(index) {
good[index].num++;
good[index].totalprice = (good[index].num * good[index].price).toFixed(2);
createhtml(good);
}
function dec(index) {
if (good[index].num <= 1) {
return false;
}
good[index].num--;
good[index].totalprice = (good[index].num * good[index].price).toFixed(2);
createhtml(good);
}
function checkall(obj) {
good.forEach(function (item) {
item.ischecked = obj.checked ? "checked" : "";
});
createhtml(good);
}
function chk(index) {
good[index].ischecked = good[index].ischecked ? "" : "checked";
var istrue = good.every(function (item) {
return item.ischecked != "";
});
$(".chkall").checked = istrue;
createhtml(good);
}
function search() {
var keyword = document.querySelector("#search").value;
var arr = [];
if (keyword) {
arr = good.filter(function (item) {
return item.title.indexOf(keyword) != -1;
});
} else {
arr = good;
}
createhtml(arr);
}
function total() {
var totalnum = 0,
totalprice = 0;
good.forEach(function (item) {
if (item.ischecked) {
totalnum += item.num;
totalprice += parseFloat(item.totalprice);
}
});
$(".row04 b").innerHTML = totalnum;
$(".row05 span").innerHTML = totalprice.toFixed(2);
}