一、前言
本文所用的代码是之前看一个大大所写的,忘记大大名字了,侵权立删。实现购物车的方法有很多,我们不应该把重心放在代码上,而是应该放在功能上和逻辑上,这样再复杂的项目,也能从众多功能中一步一步下手。不会代码我们可以去查,直到实现功能为止。
二、功能
1.全选按钮
- 点击后反选按钮的状态改为未选中状态
- 判断点击后是否为选中状态,是则选中所有单选按钮并通过改变classname从而改变背景颜色,否则取消所有单选按钮
2.反选按钮
- 点击后通过逻辑运算符!改变单选按钮的选中状态
- 判断点击后否为选中状态,是则改背景,否则让全选按钮为非选中状态且改回背景
3.单选按钮
- 点击后是选中状态则改变背景色
- 非选中状态则改回背景色,并取消全选按钮的选中状态
4.数量文本框
- 可以用键盘上的数字和删除按钮backsp进行操作,其它按钮显示NaN(不是数值)
- 当文本框值为0或空值时,让文本框的值改为1
- 文本框中的值为大于1的数字时,计算小计的值,刷新总价格的值
5.控制数量的加减按钮
- 点击减少按钮,先判断是否为1,为1则提示不能减了1,不为1则做自减计算小计刷新总价
- 点击加按钮,做自加,计算小计刷新总价
6.删除按钮
- 使对应的商品从列表中删除
- 重新给所有对象加索引值
- 刷新总价
7.小计
- 设置形参,通过价格=单价*数量得到小计
8.总价
- .遍历所有的小计,挨个相加得到总价
三、代码部分
.今天先放上部分代码,下章奉上所有代码
<!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,maximum-scale=1.0,user-scalable=no">
<title>Document</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-size: 14px;
}
.html{
height: 100%;
width: 100%;
}
.body{
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#content{
width: 60%;
height: 50%;
min-width: 414px;
min-height: 516px;
background-color: rgb(230, 239, 243);
display: flex;
flex-direction: column;
justify-content: space-between;
margin: 10% auto;
}
#info{
width: 100%;
height: 30px;
background-color: rgb(74, 189, 218);
display: flex;
justify-content: space-around;
align-items: center;
}
#bottom{
display: flex;
justify-content: space-between;
align-items: center;
background-color: rgb(248, 252, 200);
}
#settlementDiv button{
background-color: rgb(230, 80, 43);
width: 100px;
height: 40px;
color: rgb(255, 255, 255);
border: none;
}
</style>
</head>
<body>
<div id="content">
<div id="info">
<div id="checkdiv">
<input type="checkbox" id="checkAll"/>全选
</div>
<p>商品名称</p>
<p>图片</p>
<p>单价</p>
<p>数量</p>
<p>小记</p>
<p>操作</p>
</div>
<div id="list">
</div>
<div id="bottom">
<div id="reverseDiv">
<input type="checkbox" id="reverseCheck"/>反选
</div>
<div id="priceDiv">
总结:<span id="allPrice">0¥</span>
</div>
<div id="settlementDiv">
<button>去结算></button>
</div>
</div>
</div>
</body>
<script>
var cart = [
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "iphone 13",
"src": "../images/iphone 13.jpg",
"price": "1499",
"totle": "1499",
"num": 1
},
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "iphone 13",
"src": "../images/iphone 13.jpg",
"price": "1599",
"totle": "1599",
"num": 1
},
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "iphone 13",
"src": "../images/iphone 13.jpg",
"price": "1699",
"totle": "1699",
"num": 1
},
{
"id": "101321XNMNSDJYE6871DAS21",
"name": "iphone 13",
"src": "../images/iphone 13.jpg",
"price": "1799",
"totle": "1799",
"num": 1
}
];
</script>
</html>