###
嘎嘎原生，看就完了
###
#
#
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);
}
