該案例主要是實作的功能有：添加商品功能，將商品添加到購物車的功能還有將商品洗掉功能，還有就是移出購物車的功能
該案例實作的難點是將商品添加到購物車串列的時候 數量的增加，當購物車有該商品的時候就進行累加操作，沒有該商品就賦值為1.
上代碼：
<!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">
<title>Document</title>
</head>
<style>
* {
padding: 0;
margin: 0;
}
ul>li{
margin-top: 20px;
list-style: none;
display: flex;
flex-direction: row;
justify-content: space-around;
}
ul>li>div{
width: 120px;
}
ul>li>div>a{
width: 50px;
}
.box {
width: 900px;
margin: 0 auto;
border: 1px solid #ccc;
background-color: skyblue;
}
</style>
<body>
<div >
商品名:<input type="text" placeholder="請輸入商品" >
價格:<input type="number" >
描述:<textarea ></textarea>
圖片:<input type="text" placeholder="請輸入圖片" >
<button id="save">添加商品</button>
<ul id="goodList">
<li>
<div>id</div>
<div>商品名</div>
<div>價格</div>
<div>描述</div>
<div>圖片</div>
<div>操作</div>
</li>
</ul>
<table id="carTB" border="1px">
<tr>
<th>商品名</th>
<th>價格</th>
<th>描述</th>
<th>圖片地址</th>
<th>數量</th>
<th>操作</th>
</tr>
</table>
</div>
<script>
var saveBtn=document.getElementById("save")
var goodsController=document.querySelectorAll('.addGoods')
var goods=[]
var car=[]
saveBtn.onclick=function(){
var goodName=goodsController[0].value
var price=goodsController[1].value
var info=goodsController[2].value
var image=goodsController[3].value
var id=Date.now()
goods.push({
goodName,price,info,image,id
})
addToGood(goodName,price,info,image,id)
goodName = goodsController[0].value=''
price = goodsController[1].value=''
info = goodsController[2].value=''
image = goodsController[3].value=''
}
var goodList=document.getElementById('goodList')
function addToGood(goodName,price,info,image,id){
goodList.innerHTML+=`
<li>
<div>${id}</div>
<div>${goodName}</div>
<div>${price}</div>
<div>${info}</div>
<div>${image}</div>
<div>
<a href="javascript:;" onclick='addToCar(${id})'>加入購物車</a>
<a href="javascript:;" onclick='rmCar(${id},goods)'>洗掉</a>
</div>
</li>
`
}
function addToCar(id){
var currentGood={}
for(var good of goods){
if(good.id==id){
currentGood=good
break
}
}
var flag=false
for(var index in car){
if(car[index].id==currentGood.id){
flag=index
}
}
if(flag||flag===0){
car[flag].count++
document.querySelectorAll('.count')[flag].innerHTML=car[flag].count
}else{
currentGood.count=1
car.push(currentGood)
randerToTable(currentGood)
}
}
var tb=document.querySelector('#carTB')
function randerToTable(good){
var keys=['goodName','price','info','image','count']
var row=tb.insertRow(-1)
for(var i=0;i<6;i++){
var cell=row.insertCell(i)
if(i==5){
cell.innerHTML=`<button onclick='rmCar(${good.id},car)'>移除購物車</button>`
}else{
cell.innerHTML=good[keys[i]]
}
if(i==4){
cell.className='count'
}
}
}
function rmCar(id,arr){
event.target.parentElement.parentElement.remove()
var rmIndex
for(var index in arr){
if(arr[index]==id){
rmIndex=index
break
}
}
arr.splice(rmIndex,1)
}
</script>
</body>
</html>
效果圖為下
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/501204.html
標籤：其他