先来介绍一下都有哪些功能叭
- 添加购物车，清单库存数量会对应减少，库存不足会警告
- 从购物车删除，库存将返回清单，总价相应变化
- 点击"-"，数量会返回到清单库存
- 点击"+"，清单中库存会减少，库存不足会警告
- 勾选或取消勾选商品总价会相应变化
- 总价默认计算被选中的商品，添加商品到购物车时默认被选中
- 可以进行全选和反选，并一键删除，库存返回清单，总价改变
好嘞，由于代码的注释已经非常的详细了，在此不再做过多的解释了，没用任何框架了，看着注释代码很易懂！
先上HTML5的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>购物车案例</title>
<style>
*{
padding: 0;
margin: 0;
}
.left{
width: 55%;
margin: 25px;
float: left;
}
.right{
float: left;
margin-top: 60px;
}
ul li{
color: red;
font-weight: bold;
}
h1{
text-align: center;
color: red;
}
table{
border: 2px solid #aaa;
width: 100%;
border-collapse: collapse;
}
th,td{
border: 2px solid #bbb;
padding: 6px;
}
tr td:last-child{
text-align: center;
}
tr td:nth-child(1) img{
vertical-align: middle;
}
.num{
text-align: center;
}
#allchoose{
margin-left: 10px;
}
#car{
width: 100%;
border-collapse: collapse;
}
#car table{
border: 2px solid #aaa;
width: 100%;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="left">
<h1>购书清单</h1>
<table>
<thead>
<tr>
<th>书名</th>
<th>单价</th>
<th>作者</th>
<th>出版社</th>
<th>库存</th>
<th>操作</th>
</tr>
</thead>
<tbody id="items">
<tr>
<td><img src="book-images/dl.jpg">深度学习</td>
<td>100</td>
<td>赵老师</td>
<td>科学出版社</td>
<td>129</td>
<td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
</tr>
<tr>
<td><img src="book-images/ml.jpg">机器学习</td>
<td>120</td>
<td>周老师</td>
<td>清华大学出版社</td>
<td>6</td>
<td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
</tr>
<tr>
<td><img src="book-images/cv.jpg">计算机视觉</td>
<td>130</td>
<td>李老师</td>
<td>国防工业出版社</td>
<td>666</td>
<td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
</tr>
<tr>
<td><img src="book-images/dip.jpg">数字图像处理</td>
<td>140</td>
<td>彭老师</td>
<td>人民邮电出版社</td>
<td>450</td>
<td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
</tr>
<tr>
<td><img src="book-images/webgl.jpg">webGL编程指南</td>
<td>150</td>
<td>吴老师</td>
<td>清华大学出版社</td>
<td>99</td>
<td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
</tr>
<tr>
<td><img src="book-images/unity.jpg">Unity3D游戏开发</td>
<td>200</td>
<td>骆老师</td>
<td>浙江大学出版社</td>
<td>300</td>
<td><input type="button" value="加入购物车" onclick="add_book(this)"></td>
</tr>
</tbody>
</table>
<h1>购物车</h1>
<div id="car">
<div id="allchoose">
<input type="button" id="allSelected" value="全选">
<input type="button" id="_Selected" value="反选">
<input type="button" id="delete" value="删除商品">
</div><br>
<table>
<thead>
<tr>
<th>书名</th>
<th>单价</th>
<th>数量</th>
<th>金额</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods"></tbody>
<tfoot>
<tr>
<td colspan="3" align='center'>总计</td>
<td id="total" colspan="2">0</td>
</tr>
</tfoot>
</table>
</div>
</div>
<div class="right">
<ul>
<li>功能介绍：</li>
<li>添加购物车，清单库存数量会对应减少，库存不足会警告</li>
<li>从购物车删除，库存将返回清单，总价相应变化</li>
<li>点击"-"，数量会返回到清单库存</li>
<li>点击"+"，清单中库存会减少，库存不足会警告</li>
<li>勾选或取消勾选商品总价会相应变化</li>
<li>总价默认计算被选中的商品，添加商品到购物车时默认被选中</li>
<li>可以进行全选和反选，并一键删除，库存返回清单，总价改变</li>
</ul>
</div>
<script src="goods.js"></script>
</body>
</html>
然后是JS的代码，代码文件名为“goods.js”
//控制全选
var targets=document.getElementsByName('choose')
document.getElementById('allSelected').onclick=function(){ //全选
for (var i=0;i<targets.length;i++){
targets[i].checked=true;
}
total() //更新总价格
}
document.getElementById('_Selected').onclick=function(){ // 反选
for (var i=0;i<targets.length;i++){
targets[i].checked=!targets[i].checked;//取反操作
}
total() //更新总价格
}
document.getElementById('delete').onclick=function(){ //删除
var sign=targets.length //targets的起始长度
var _length=0
for(var i=0;i<targets.length;i++){
if(targets[i].checked===true){
_length++ //被选中的targets的长度
}
}
var leftL=sign-_length //除去被选中后剩余的targets长度
console.log(_length)
console.log(leftL)
while(targets.length>leftL){ //删除一行，targets长度会减少1，而i++导致每次执行删除操作只能删除一半，故再套一层循环
// console.log("targets: "+targets.length)
for(var i=0;i<targets.length;i++){//执行循环后，targets长度会减半
if(targets[i].checked===true){
del(targets[i]) //调用删除函数
}
}
}
}
//将商品添加购物车
function add_book(btn){
var tr=btn.parentNode.parentNode
var tds=tr.getElementsByTagName('td')
var inner_name=tds[0].innerHTML //带上HTML标签
var name=tds[0].innerText //书的名字，不带HTML标签
// console.log(inner_name)
// console.log(name)
var price=tds[1].innerHTML //书的价格
var leftAm=parseInt(tds[4].innerHTML)
if (leftAm===0){
alert('库存不足!')
return //如果库存不足函数运行到这里会退出
}
//如果库存充足继续向下执行
else{
tds[4].innerHTML=leftAm-1
}
var tbody=document.getElementById('goods')
var trs=tbody.getElementsByTagName('tr')
// var row=tbody.insertRow(-1)
//不能在此定义row，因为它会默认添加一个新的空行，会导致str的起始length是1而不是0，而且innerText获取不到任何东西就会报错，找了很久的bug原来是它！！！
// console.log(trs.length)
var flag=0 //定义flag来判断在购物车中是否已经存在相同书籍
for(var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName('td')
var book_name=tds[0].innerText //获取书的名字
if(book_name===name){//在购物车中找到了相同的书
flag=1
// var input=trs[i].getElementById('num') 如果把num设置成id，获取不到内容，故改成class
var input=trs[i].getElementsByClassName('num')[0]
// console.log(input)
var value=parseInt(input.value)
// console.log(value)
input.value=value+1
money=parseFloat(tds[3].innerHTML)
tds[3].innerHTML=price*(value+1) //更新该书的总价格
}
}
if(flag===0){
var row=tbody.insertRow(-1)//-1表在当前行后插入行
row.innerHTML="<td>"+"<input type='checkbox' name='choose' checked='true' onclick='total()'/>"+inner_name+"</td>"+
"<td>"+price+"</td>"+
"<td>"+
"<input type=button value='-' onclick=change(this,-1) style='width: 20px'/>"+
"<input type=text class=num value='1' size=1 readonly'/>"+
"<input type=button value='+' onclick=change(this,+1) style='width: 20px'/>"+
"</td>"+
"<td>"+price+"</td>"+
"<td>"+"<input type=button value='删除' onclick='del(this)'/>"+"</td>"
}
total()
}
//增加或者减少n本书
function change(btn,n){
var inputs=btn.parentNode.getElementsByTagName('input')
var amount=parseInt(inputs[1].value)
var tds=btn.parentNode.parentNode.getElementsByTagName('td')
// var money=parseFloat(tds[3].innerHTML) //总价
var price=parseFloat(tds[1].innerHTML) //单价
if(amount<=0 && n<0){ //数量为0时不能再减少数量
return
}
var name=tds[0].innerText
var item_trs=document.getElementById('items').getElementsByTagName('tr')
for (var i=0;i<item_trs.length;i++){
var item_tds=item_trs[i].getElementsByTagName('td')
// console.log(item_tds[0].innerText)
if(item_tds[0].innerText===name){
var item_amount=parseInt(item_tds[4].innerHTML)
// console.log(item_amount)
if(n>0 && item_amount<=0){
alert("库存不足！")
return
}
item_tds[4].innerHTML=item_amount-n
}
}
inputs[1].value=amount+n
tds[3].innerHTML=price*(amount+n)
total()
}
//点击每行的删除
function del(btn){
var tr=btn.parentNode.parentNode
var tds=tr.getElementsByTagName('td')
var inputs=tds[2].getElementsByTagName('input')
var amount=parseInt(inputs[1].value) //获取书的数量
var name=tds[0].innerText
var trs=document.getElementById('items').getElementsByTagName('tr')
for (var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName('td')
var item_name=tds[0].innerText //清单中该书的数名字
if(name===item_name){
var item_amount=parseInt(tds[4].innerHTML) //清单中该书的数量
tds[4].innerHTML=item_amount+amount
}
}
tr.remove()//移除该行
total()
}
//计算总金额
function total(){
var tbody=document.getElementById('goods')
var trs=tbody.getElementsByTagName('tr')
var sum=0 //总价
for (var i=0;i<trs.length;i++){
var tds=trs[i].getElementsByTagName('td')
var input=tds[0].children[0] //获取到input标签
// console.log(tds[0].innerHTML)
// console.log(input)
var money=parseFloat(tds[3].innerHTML)
if(input.checked===true){ //只有当商品被勾选时才会被计入总价
sum+=money
}
}
var total=document.getElementById('total')
total.innerHTML=sum
}
最后的效果就是这样的啦^_^
京公网安备 11010502036488号