JavaScript实现简单购物车效果
CSS、JavaScript；本地存储（localstorage）实现简单购物车添加、删除、计算、本地存储等。文章最下方见效果图。
Html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>购物车</title>
<link rel="stylesheet" href="shopcar.css" />
<script type="text/javascript" src="shopcar.js" ></script>
</head>
<body>
<center>
<div class="good-list">
<ul id="ul">
<li>
<img src="img/1.png"/>
<p class="good-name">Huawei/华为P20 Pro</p>
<p class="good-pice">￥4000.00</p>
</li>
<li>
<img src="img/3.png"/>
<p class="good-name">SMARTISAN/锤子 坚果手机</p>
<p class="good-pice">￥2880.00</p>
</li>
<li>
<img src="img/2.png"/>
<p class="good-name">Lenovo/联想 拯救者 Y7000 14.0</p>
<p class="good-pice">￥5200.00</p>
</li>
<li>
<img src="img/4.png"/>
<p class="good-name">Apple/苹果 IPad 2018款</p>
<p class="good-pice">￥2200.00</p>
</li>
<li>
<img src="img/5.png"/>
<p class="good-name">Xiaomi/小米8 透明探索版</p>
<p class="good-pice">￥3988.00</p>
</li>
</ul>
</div>
<div class="shopping" align="right"><img src="img/timg.png" width="40px"/></div>
<div class="shopping">
<table border=1 bordercolor="#CCC" cellspacing="0" id="tb">
<tr height=45><th width="10%"><input type="checkbox" value="全选" onclick="allSelect(this.checked),total()" id="isAllSelect"/> 全选</th>
<th width="15%">图片</th>
<th width="25%">名称</th>
<th width="15%">单价</th>
<th width="25%">数量</th>
<th>操作</th></tr>
<tr>
<td style="border-right: none;"><input type="button" value="删除选择" id="deleteAll" onclick="deletAllSelect()"/></td>
<td style="border-left: none;" colspan="5" align="right">合计：￥<span id="totalSpan">0</span>
<input type="button" id="pay" value="结算(0)"/>
</td>
</tr>
</table>
</div>
</center>
</body>
</html>
css代码：
* {
margin: 0;
padding: 0;
list-style: none;
}
.good-list {
width: 700px;
height: 220px;
}
.good-list li {
float: left;
width: 140px;
height: 160px;
}
.good-list li:hover {
cursor: pointer;
}
.good-list img {
height: 140px;
width: 140px;
}
.good-list p {
text-align: center;
}
.good-name {
font-size: 14px;
}
.good-pice {
font-size: 12px;
color: red;
}
.shopping{
width: 700px;
}
.shopping table{
width: 100%;
}
/*.shopping input[type="checkbox"]{display: inline-block;}*/
.number{
display: inline-block;
font-size: 14px;
width: 35px;
line-height: 120%;
border-left:1px solid #ddccdd;
border-right:1px solid #ddccdd;
}
.number-bt{
display: inline-block;
font-size: 18px;
border: 0;
width: 20px;
background: none;
}
.goodNumber{
height: 30px;
border-radius: 4px;
border: 1px solid #ddccdd;
}
#pay{
width: 60px;
height: 30px;
border: none;
background-color: #FF3333;
border-radius: 20px;
margin: 5px 0 5px 0;
}
#deleteAll{
width: 60px;
height: 30px;
font-size: 12px;
font-family: "blackadder itc";
background:none;
border: 1px solid #FF3300;
border-radius: 20px;
margin-left:5px ;
}
#tb{
border-radius:3px ;
background-size: 100%;
background-image: url(img/bgi.jpg);
background-position-y: -70px;
}
#tb img{
margin-top: 5px;
}
#tb input[type="checkbox"]{
display: inline-block;
background-color: #FF33000;
border-radius: 100px;
}
button{
background: none;
border: none;
}
JS代码：
window.onload = function() {
var tB = document.getElementById("tb");
//从localstroage中取出保存的购物车信息
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
if(shoppingInfoText != null) {
//将本地存储加入购物车列表。
var shoppingInfoObject = JSON.parse(shoppingInfoText);
for(var i = 0; i < shoppingInfoObject.length; i++) {
var tr = tB.insertRow(1); //向表格添加一行，位置在第一行
tr.align = "center";
var td1 = tr.insertCell(tr.cells.length);
td1.innerHTML = "<input type='checkbox' onclick='total()' name='isCheckbox' />";
var td2 = tr.insertCell(tr.cells.length);
td2.innerHTML = "<img src='" + shoppingInfoObject[i].imgPath + "' height='30px' />";
var td3 = tr.insertCell(tr.cells.length);
td3.innerHTML = shoppingInfoObject[i].goodName;
var td4 = tr.insertCell(tr.cells.length);
td4.innerHTML = shoppingInfoObject[i].goodPrice;
var td5 = tr.insertCell(tr.cells.length);
var td5HTML = "<input class='number-bt' type='button' value='-'onclick='subtractA(this.parentNode),total()'>";
td5HTML += "<span class='number'>" + shoppingInfoObject[i].num + "</span>";
td5HTML += "<input class='number-bt' type='button' value='+' id='addNum' onclick='addA(this.parentNode),total()'/>";
td5.innerHTML = "<span class='goodNumber'>" + td5HTML + "</span>";
var td6 = tr.insertCell(tr.cells.length);
td6.innerHTML = "<button onclick='deleteAShop(this.parentNode.parentNode)'>删除</button>"
tb.rows[0].cells[0].children[0].checked = false; //新增后‘全选’为false
}
total();
}
}
tb.rows[0].cells[0].children[0].checked = false; //‘全选’默认为false
//加载事件中获取列表的所有li标签
var getLi = document.querySelectorAll("#ul li");
for(var i = 0; i < getLi.length; i++) {
getLi[i].onclick = function() {
var imgPath = this.children[0].getAttribute("src");
var goodName = this.children[1].innerHTML;
var goodPrice = this.children[2].innerHTML;
var isExist = false;
for(var i = 1; i < tb.rows.length - 1; i++) {
if(tb.rows[i].cells[2].innerHTML == goodName) {
//检查商品是否已在购物车，存在则叠加
var carExistNum = parseInt(tb.rows[i].cells[4].children[0].children[1].innerHTML);
tb.rows[i].cells[4].children[0].children[1].innerHTML = carExistNum + 1;
isExist = true;
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject[tb.rows.length - i - 2].num++;
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
break;
}
// //自定选择，当全部选取
// var isSelect1 = tb.rows[i].cells[0].children[0];
// console.log(isSelect1[i]);
// if(isSelect1.checked){
// tb.rows[0].cells[0].children[0].checked = true;//全部‘全选’为true
// }
}
if(isExist == false) {
var tr = tB.insertRow(1); //向表格添加一行，位置在第一行
tr.align = "center";
var td1 = tr.insertCell(tr.cells.length);
td1.innerHTML = "<input type='checkbox' onclick='total()' name='isCheckbox' />";
var td2 = tr.insertCell(tr.cells.length);
td2.innerHTML = "<img src='" + imgPath + "' height='30px' />";
var td3 = tr.insertCell(tr.cells.length);
td3.innerHTML = goodName;
var td4 = tr.insertCell(tr.cells.length);
td4.innerHTML = goodPrice;
var td5 = tr.insertCell(tr.cells.length);
var td5HTML = "<input class='number-bt' type='button' value='-'onclick='subtractA(this.parentNode),total()'>";
td5HTML += "<span class='number'>1</span>";
td5HTML += "<input class='number-bt' type='button' value='+' id='addNum' onclick='addA(this.parentNode),total()'/>";
td5.innerHTML = "<span class='goodNumber'>" + td5HTML + "</span>";
var td6 = tr.insertCell(tr.cells.length);
td6.innerHTML = "<button onclick='deleteAShop(this.parentNode.parentNode)'>删除</button>"
tb.rows[0].cells[0].children[0].checked = false; //新增后‘全选’为false
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = null;
if(shoppingInfoText == null) {
shoppingInfoObject = [];
} else {
shoppingInfoObject = JSON.parse(shoppingInfoText); //转数组
}
var goods = new Object();
goods.imgPath = imgPath;
goods.goodName = goodName;
goods.goodPrice = goodPrice;
goods.num = 1;
shoppingInfoObject.push(goods);
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
}
total(); //总计
}
}
}
//计算合计函数
function total() {
var totalMoney = 0;
var totalNum = 0;
for(var i = 1; i < tb.rows.length - 1; i++) {
var box = tb.rows[i].cells[0].children[0];
if(box.checked) {
//获取出单价 转为浮点型
var price = parseFloat(tb.rows[i].cells[3].innerHTML.substring(1, ));
var num = parseFloat(tb.rows[i].cells[4].children[0].children[1].innerHTML);
totalMoney += price * num;
totalNum += num;
}
}
document.getElementById("pay").value = "结算(" + totalNum + ")";
document.getElementById("totalSpan").innerHTML = totalMoney;
}
//全选功能函数
function allSelect(isSelect) {
for(var i = 1; i < tb.rows.length - 1; i++) {
if(isSelect) {
tb.rows[i].cells[0].children[0].checked = true;
} else {
tb.rows[i].cells[0].children[0].checked = false;
}
}
}
//删除全选功能函数
function deletAllSelect() {
var boxes = document.getElementsByName("isCheckbox");
for(i = 0; i < boxes.length; i++) {
if(boxes[i].checked) {
tr = boxes[i].parentNode.parentNode;
tr.parentNode.removeChild(tr);
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject.splice(i - 1, 1);
//删除完存储
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
i--;
}
}
document.getElementById("pay").value = "结算(0)";
document.getElementById("totalSpan").innerHTML = 0;
tb.rows[0].cells[0].children[0].checked = false;
}
//删除一个功能函数
function deleteAShop(isShop) {
var indexTr = isShop.rowIndex;
isShop.parentNode.removeChild(isShop);
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject.splice(tb.rows.length - indexTr-1, 1);
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
total();
}
//加一操作
function addA(a) {
var num = parseInt(a.children[1].innerHTML);
a.children[1].innerHTML = num + 1;
var index = a.parentNode.parentNode.rowIndex;
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject[tb.rows.length - index - 2].num++;
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
}
//减一操作
function subtractA(a) {
var num = parseInt(a.children[1].innerHTML);
if(num > 1) {
a.children[1].innerHTML = num - 1;
var index = a.parentNode.parentNode.rowIndex;
if(window.localStorage) {
var shoppingInfoText = localStorage.getItem("shoppingInfo");
var shoppingInfoObject = JSON.parse(shoppingInfoText);
shoppingInfoObject[tb.rows.length - index - 2].num--;
localStorage.setItem("shoppingInfo", JSON.stringify(shoppingInfoObject));
}
}
}
效果图：