这里以Sony商城的购物车为例，购物车用纯前端的技术来写的，并且是存在了localstorage里，由于没有存在数据库里，购物车的操作基本是在前端页面操作的！
用jquery写的javascript,所以引用时记得去引用相对应的jquery文件，传输过来的zh-data可以自己自定义去写，另外;不要忘记zh-data里的数据和自己图片的命名需要一致的喔！
1.HTML页面
<div id="shopcarmsg">
<div class="top container">
<strong class="title">我的购物车</strong>
<img src="./images/progress.png" alt="">
</div>
<h3 class="hint">订单已免运费</h3>
<table class="container tab">
<thead>
<tr>
<th>商品信息</th>
<th>单价</th>
<th>数量</th>
<th>小计</th>
<th>操作</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="sum "><a href="./fillupOrder.html">去结算：￥<span class="sum_money">0</span></a> </div>
</div>
CSS页面
/* 样式重置 */
body,h1,h2,h3,h4,h5,h6,div,p,dl,dt,dd,ol,ul,li,form,table,th,td,a,img,span,strong,var,em,input,textarea,select,option{margin: 0; padding: 0;}
html,body{font-family: "微软雅黑",Arail,Tabhoma; font-size: 100%; text-align: left; 100%; height: 100%; color: #333;}
ul,ol{list-style: none;}
img{border: 0;}
input,select,textarea,button{outline:0; -webkit-appearance: none; font-family: "微软雅黑",Arail,Tabhoma;}
textarea{resize:none; overflow: auto;}
table{border-collapse: collapse; border-spacing: 0;}
th,strong,var,em{font-weight: normal; font-style: normal;}
a{text-decoration: none;}
.container{
1210px;
min-height:30px ;
margin: 0 auto;
}
#shopcarmsg{
background: #f5f5f5;
100%;
min-height:600px;
position: relative;
}
.top{
1210px;
height: 150px;
margin: 0 auto;
padding-top: 74px;
}
.top strong{
float: left;
font-size: 30px;
}
.top img{
float: right;
cursor: pointer;
}
.tab{
1210px;
min-height: 300px;
margin: 0 auto;
border-top: 3px solid #cccccc;
/* z-index: 10; */
}
.tab th{
padding-top: 36px;
190px;
height: 50px;
text-align: center;
}
.tab th:first-child{
padding-top: 36px;
600px;
height: 50px;
text-align: left;
}
.tab td{
190px;
height: 50px;
text-align: center;
}
.tab td img{
144px;
height: 144px;
float: left;
margin-left: 30px;
}
.tab td p{
margin-top: 50px;
}
.tab td:first-child{
600px;
height: 50px;
text-align: center;
}
.tab tbody{
100%;
min-height: 288px;
background: #fff;
/* padding-bottom: 100px; */
}
.tab tbody tr{
border-bottom: solid #f5f5f5 60px;
}
.hint{
/* position: relative;
right: 0;
top: 200px; */
height: 40px;
line-height: 40px;
text-align: right;
1210px;
/* float: right; */
overflow: hidden;
}
.sum{
position: absolute;
bottom: 0;
left: 0;
z-index: 20px;
100%;
height: 100px;
background: #fff;
}
.sum a{
position: absolute;
bottom: 20px;
right: 300px;
display: block;
230px;
height: 50px;
background: #0a83d7;
color: #fff;
font-size: 20px;
line-height: 50px;
text-align: center;
}
JS页面
$(function () {
if (localStorage.getItem('goods')) {
// 本地购物车的数据
var codeArr = JSON.parse(localStorage.getItem('goods')).code;
$.ajax({
type: 'get',
url: './data/zh-goods.json',
dataType: 'json',
cache: false,
success: function (data) {
var results = '',sum=0;
$.each(codeArr, function (index, value) {
$.each(data, function (i, val) {
if (value === val.code) {
// results += '<li code="' + val.code + '"><img src="' + val.imgurl + '" alt=""><h4>' + val.title +
// '</h4><p>' + val.price + '</p><em>删除</em></li>';
results += ' <tr code="' + val.code + '"><td><img src="' + val.imgurl + '" alt=""><p>' + val.title + '</p>' +
'</td><td>RMB；<span class="unitprice">' + val.price + '</span></td>' +
'<td num="1"><span class="reduce" style="30px; height:30px; display:inline-block; border:1px solid #ccc">-</span>' +
'<span class="amount" style="30px; height:30px; display:inline-block; border:1px solid #ccc">1</span>' +
'<span class="plus" style="30px; height:30px; display:inline-block; border:1px solid #ccc">+</span>' +
'</td>' +
'<td>' +
'RMB: ￥<span class="subtotal">' + val.price + '</span>' +
'</td>' +
'<td>' +
'<span class="delete" style="50px; height:30px; display:inline-block; border:1px solid #ccc">删除</span>' +
'</td>' +
'<div></div>'
'</tr>';
sum+=parseInt(val.price);
}
});
});
$('tbody').html(results);
$('.sum_money').html(sum);
}
});
// 删除购物车商品
$('tbody').on('click', '.delete', function () {
var code = $(this).parent().parent().attr('code');//要删除的商品编码
$.each(codeArr, function (index, val) {
if (code === val) {
codeArr.splice(index, 1);
}
});
//更新本地的购物车商品数据
var jsonStr = JSON.stringify({ "code": codeArr });
localStorage.setItem('goods', jsonStr);
$(this).parent().parent().remove();//删除商品
alert('好吧，那我走啦！');
});
//增加商品
$('tbody').on('click', '.plus', function (){
var num =parseInt( $(this).parent().attr('num'));
var index=$('.plus').index(this);
num++;
$('.amount').eq(index).text(num);
$(this).parent().attr('num',num)
var unitprice= parseInt($(this).parent().siblings().find('.unitprice').html());
var subtotal = unitprice*num;
$(this).parent().siblings().find('.subtotal').html(subtotal);
var total =unitprice+parseInt($(this).parent().parent().siblings().find('.unitprice').html());
total=parseInt( $(this).parent().siblings().find('.subtotal').html())+
parseInt($(this).parent().parent().siblings().find('.subtotal').html());
$('.sum_money').html(total);
});
//减少商品
$('tbody').on('click', '.reduce', function (){
var num =parseInt( $(this).parent().attr('num'));
//var num =parseInt( $(this).parent().attr('num'));
var index=$('.reduce').index(this);
if(num>1){
num--;
$('.amount').eq(index).text(num);
$(this).parent().attr('num',num)
var unitprice= parseInt($(this).parent().siblings().find('.unitprice').html());
var subtotal = unitprice*num;
$(this).parent().siblings().find('.subtotal').html(subtotal);
var total =parseInt( $('.sum_money').html());
total=parseInt( $(this).parent().siblings().find('.subtotal').html())+
parseInt($(this).parent().parent().siblings().find('.subtotal').html());
$('.sum_money').html(total);
}
});
}
});
zh-data页面
[
{"type":"WH-1000XM3","title":"头戴式无线降噪耳机","imgurl":"images/zh-img01.jpg","price":"1999","mark":"618大促","code":"good1"},
{"type":"SRS-X99","title":"高解析度无线扬声器","imgurl":"images/zh-img02.jpg","price":"4999","mark":"618大促","code":"good2"},
{"type":"NW-ZX300A","title":"数字音乐播放器","imgurl":"images/zh-img03.jpg","price":"2999","mark":"618大促","code":"good3"},
{"type":"ICD UX560","title":"高质量数码录音笔","imgurl":"images/zh-img04.jpg","price":"1099","mark":"618大促","code":"good4"},
{"type":"NW-WM1A","title":"高解析度音乐播放器","imgurl":"images/zh-img05.png","price":"8999","mark":"618大促","code":"good5"},
{"type":"NW-A55","title":"高解析度音乐播放器","imgurl":"images/zh-img06.jpg","price":"999","mark":"618大促","code":"good6"},
{"type":"WI-1000X","title":"降噪静界 智能聆听","imgurl":"images/zh-img07.jpg","price":"1399","mark":"618大促","code":"good7"},
{"type":"WH-H900N","title":"无线降噪立体声耳机","imgurl":"images/zh-img08.jpg","price":"1199","mark":"618大促","code":"good8"},
{"type":"IER-ZIR","title":"旗舰入耳式立体声耳机","imgurl":"images/zh-img09.jpg","price":"12999","mark":"618大促","code":"good9"},
{"type":"WF-SP700N","title":"降噪静享韵动","imgurl":"images/zh-img10.jpg","price":"1499","mark":"618大促","code":"good10"},
{"type":"WF-SP900N","title":"真无线运动耳机","imgurl":"images/zh-img11.jpg","price":"999","mark":"618大促","code":"good11"},
{"type":"Z9G","title":"画谛系列","imgurl":"images/zh-img12.jpg","price":"119999","mark":"618大促","code":"good12"},
{"type":"HT-Z9F","title":"杜比全景声影院般声音体验","imgurl":"images/zh-img18.jpg","price":"5180","mark":"618大促","code":"good13"},
{"type":"HT-ST5000","title":"杜比全景声7.1.2声道环绕效果","imgurl":"images/zh-img20.png","price":"9910","mark":"618大促","code":"good14"},
{"type":"T-MT5000","title":"小身材 高音质","imgurl":"images/zh-img19.jpg","price":"4790","mark":"618大促","code":"good15"},
{"type":"X8500G 系列","title":"发现色彩的绚丽","imgurl":"images/zh-img13.png","price":"7199","mark":"618大促","code":"good16"},
{"type":"A9G系列","title":"声临新“视”代","imgurl":"images/zh-img14.png","price":"19999","mark":"618大促","code":"good17"},
{"type":"X9500G系列","title":"开启视界的精彩","imgurl":"images/zh-img15.jpg","price":"8999","mark":"618大促","code":"good18"},
{"type":"A8G系列","title":"深邃黑色 自然呈现","imgurl":"images/zh-img16.png","price":"14999","mark":"618大促","code":"good19"},
{"type":"HT-X9000F","title":"和X9000F系列电视浑然天成的设计搭配","imgurl":"images/zh-img17.png","price":"2999","mark":"618大促","code":"good20"},
{"type":"PlayStation®VR","title":"精品套装+虚拟现实乐园游戏光盘","imgurl":"images/zh-img21.png","price":"2699","mark":"618大促","code":"good21"},
{"type":"PlayStation®4","title":"搭配新型PS4游戏手柄","imgurl":"images/zh-img22.png","price":"2099","mark":"限时秒杀","code":"good22"},
{"type":"PlayStation®4 Pro","title":"火热销售中","imgurl":"images/zh-img23.jpg","price":"2099","mark":"限时秒杀","code":"good23"},
{"type":"Xperia XZ3","title":"视觉新体验 畅娱无索限","imgurl":"images/zh-img24.png","price":"4199","mark":"限时秒杀","code":"good24"},
{"type":"可编程教育机器人 KOOV™","title":"激发未来创意","imgurl":"images/zh-img25.png","price":"999","mark":"限时秒杀","code":"good25"},
{"type":"Xperia 10 Plus","title":"21:9 广阔视界","imgurl":"images/zh-img26.png","price":"2499","mark":"限时秒杀","code":"good26"},
{"type":"XPERIA1","title":"索尼Xperia 1 双卡版 夜黑","imgurl":"images/zh-img27.jpg","price":"6,99","mark":"限时秒杀","code":"good27"},
{"title":"KOOV™","imgurl":"images/rc (4).png","price":"2999.00","code":"good28"},
{"title":"KOOV™","imgurl":"images/rc (1).png","price":"2999.00","code":"good29"},
{"title":"KOOV™ 可编程教育机器人基础版","imgurl":"images/rc (2).png","price":"2999.00","code":"good30"},
{"title":"KOOV™ 可编程教育机器人基础版","imgurl":"images/rc (3).png","price":"2999.00","code":"good31"}
]