效果:
在商品選購串列中選中的商品可以在購物車頁面中同步看到,購物車有添加增減商品數量和洗掉商品功能
代碼:
商品串列頁:list.html
html:
<h1>這是商品串列，去<a href="cart.html">購物車</a></h1>
<div id="cont">
<p>賣完了，等待上架中...</p>
<!-- <div class="box">
<img src="https://img14.360buyimg.com/n7/jfs/t1/141271/22/14881/70446/5fb4a985E1cce213e/beb55f6d1d3221b5.jpg" alt="">
<p>3999.00</p>
<p>OPPO K7x 雙模5G 4800萬四攝 5000mAh長續航 90Hz電競屏 黑鏡6GB+128GB 30W閃充全網通</p>
<span>加入購物車</span>
</div> -->
</div>
css:
#cont {width: 1000px;border: solid;overflow: hidden;margin: 0 auto;}
#cont .box {width: 250px;text-align: center;border: solid;box-sizing: border-box;float: left;}
.box img {width: 200px;}
.box p {margin: 10px 0;}
.box p:nth-child(3) {height: 40px;line-height: 20px;overflow: hidden;}
.box span {width: 100px;height: 40px;padding: 0 10px;margin: 10px auto;background: cyan;line-height: 40px;text-align: center;display: block;cursor: pointer;}
.box span:active {background: blue;color: #fff;}
js:
引入 good.js檔案
class List{
constructor(){
this.cont=document.getElementByid("cont");
this.load();
this.addEvent();
}
//拿資料
load(){
//資料獲取
ajax().then(data=>{
//字串->物件
this.data=JSON.parse(data);
//資料渲染的方法呼叫
this.render();
})
}
//渲染資料
render(){
str接data中的資料
let str='';
this.data.forEach(val=>{
str+=`<div class="box" index="${val.proId}">
<img src="${val.proImg}" alt="">
<p>${val.price}</p>
<p>${val.proName}</p>
<span class="btn">加入購物車</span>
</div>`;
});
//cont中的文本內容設定為str
this.cont.innerHTML=str;
}
//事件的添加
addEvent(){
//this后續會改變.設定一個that代表改變之前的this
const that=this;
this.cont.addEventListener("click",function(eve){
if(eve.target.className=="btn"){
//令點擊事件的id=proId
that.id=eve.target.parentNode.getAttibute("index");
//存盤資料:呼叫setData()方法
that.setData();
}
});
}
//判斷是否首次加入購物車,并根據不同狀況進行不同處理
setData(){
//同一個陣列去接本地存盤的資料
const arr=localStorage.getItem("proData")?JSON.parse(localStorage.getItem("proData")):[];
//1.arr長度不為0:不是首次加入購物車
if(arr.length>0){
let i=0;
/*陣列some方法:找到陣列中復合條件的一個元素就回傳true并結束*/
//onOff的布林值取決于some方法的布林值
const onOff=arr.some((val,idx)=>{
//記錄true時的索引
i=idx;
//回傳==運算式的結果
return val.id=this.id;
});
// 1.1.onOff=true:購物車已經存在過這個商品
if(onOff){
arr[i].num++;
}
// 1.2.購物車新加入這個商品
else{
arr.push({
id:this.id,
num:1
});
}
}
//2.首次加入購物車
else{
arr.push({
id:this.id,
num:1
});
}
//本地存盤中將處理后的arr賦為parData的屬性值
localStorage.setItem("proData",JSON.stringify(arr);
}
}
new List;
//異步拿取資料
function ajax(){
return new Promise(resolve=>{
setTImeout(()=>{
resolve(JSON.stringify(data));
},500);
});
}
購物車頁面:cart.html
html:
<h1>這是購物車頁面，<a href="list.html">繼續購物</a></h1>
<table border="1" width="800" align="center">
<thead>
<tr>
<th>圖片</th>
<th>名稱</th>
<th>單價</th>
<th>數量</th>
<th>總價</th>
<th width=40>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="6">購物車為空，<a href="./list.html">繼續選購</a></td>
</tr>
<!-- <tr>
<td><img src="" alt=""></td>
<td>名稱</td>
<td>99.00</td>
<td><input type="number" min="1" value="5"></td>
<td>數量*單價</td>
<td>洗掉</td>
</tr> -->
</tbody>
</table>
css:
img {width: 100px;}
js:
class Cart{
constructor(){
this tbody=document.getElementById("tbody");
this.load();
this.addEvent();
}
load(){
ajax({
url:"dfhsla"
}).then(data=>{
this.data=JSON.parse(data);
this.render();
})
}
render(){
this.localData=localStorage.getItem("proData")?JSON.parse(localStorage.getItem("proData")):[];
if(this.localData.length<1) return;
let str="";
this.data.forEach(val1=>{
this.localData.forEach(val2=>{
if(val1.proId===val2.id){
str+=`<tr index="${val2.id}>
<td><img src="${val1.proImg}" alt=""></td>
<td>${val1.proName}</td>
<td>${val1.price}</td>
<td><input type="number" min="1" value="${val2.num}"></td>
<td>${val1.price*val2.num}</td>
<td>洗掉</td>
</tr>`;
}
})
});
this.tbody.innerHTML=str;
}
addEvent(){
const that=this;
this.tbody.addEventListener("click",function(e){
if(e.target.className==="del"){
that.id=e.target.parentNode.getAttribute("input");
e.target.parentNode.remove();
that.setData(i=>that.localData.splice(i,1));
}
})
this.tbody.addEventListener("input",function(e){
if(e.target.className==="set"){
that.id=e.target.parentNode.parentNode.getAttribute("index");
that.setData(i=>that.localData[i].num=e.target.value);
}
})
}
setData(cb){
let i=0;
this.localData.some((val,idx)=>{
i=idx;
return val.id=this.id;
})
cb(i);
localStorage.setItem("proData",JSON.stringify(this.localData));
}
}
new Cart;
function ajax(){
return new Promise((resolve)=>{
setTimeout(function(){
resolve(JSON.stringify(data));
},500)
});
}
商品資料:good.js
var data=[
{
"proId": "proId-50990677-a288-11eb-af86-375d9076f459",
"proImg": "https://img12.360buyimg.com/n1/s450x450_jfs/t1/128286/7/2247/303790/5ec37cabEf2a27dc3/4dec5022f102a39b.jpg",
"proName": "戴爾DELL靈越5000 14英寸酷睿i5輕薄筆記本電腦(十代i5-1035G1 8G 512G MX230 2G獨顯)銀",
"brand": "DELL",
"logo": "http://img30.360buyimg.com/popshop/jfs/t1114/95/265737457/7715/95b70982/550fb619Nc0269ee4.jpg",
"type": "電腦",
"price": 4299,
"sales": 10,
"stock": 155,
"score": 4.8,
"discount": 8,
"describe": "商品名稱：戴爾靈越5000商品編號：100006546527商品毛重：2.5kg商品產地：中國大陸顯卡類別：入門級游戲獨立顯卡優選服務：兩年質保厚度：15.1mm—18.0mm特性：PCIE高速固態硬碟螢屏尺寸：14-14.9英寸系列：戴爾 - Inspiron顯存容量：2GB分類：輕薄筆記本裸機重量：1.5-2kg處理器：Intel i5螢屏重繪率：其他待機時長：5-7小時記憶體容量：8G顯卡型號：MX230硬碟容量：512G SSD系統：Windows 10顏色：銀色",
"time": 1618999191639
},
{
/*若干個與上面相同格式的商品資料形成一個data陣列*/
}
];
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/286489.html
標籤：其他
上一篇：C語言—實作掃雷游戲（注釋詳解）
下一篇：Linux相關復習