如何用纯前端去写购物车_索尼商城购物车
Posted robot666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了如何用纯前端去写购物车_索尼商城购物车相关的知识，希望对你有一定的参考价值。
这里以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" >
</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,optionmargin: 0; padding: 0;
html,bodyfont-family: "微软雅黑",Arail,Tabhoma; font-size: 100%; text-align: left; width: 100%; height: 100%; color: #333;
ul,ollist-style: none;
imgborder: 0;
input,select,textarea,buttonoutline:0; -webkit-appearance: none; font-family: "微软雅黑",Arail,Tabhoma;
textarearesize:none; overflow: auto;
tableborder-collapse: collapse; border-spacing: 0;
th,strong,var,emfont-weight: normal; font-style: normal;
atext-decoration: none;
.container
width: 1210px;
min-height:30px ;
margin: 0 auto;
#shopcarmsg
background: #f5f5f5;
width: 100%;
min-height:600px;
position: relative;
.top
width: 1210px;
height: 150px;
margin: 0 auto;
padding-top: 74px;
.top strong
float: left;
font-size: 30px;
.top img
float: right;
cursor: pointer;
.tab
width: 1210px;
min-height: 300px;
margin: 0 auto;
border-top: 3px solid #cccccc;
/* z-index: 10; */
.tab th
padding-top: 36px;
width: 190px;
height: 50px;
text-align: center;
.tab th:first-child
padding-top: 36px;
width: 600px;
height: 50px;
text-align: left;
.tab td
width: 190px;
height: 50px;
text-align: center;
.tab td img
width: 144px;
height: 144px;
float: left;
margin-left: 30px;
.tab td p
margin-top: 50px;
.tab td:first-child
width: 600px;
height: 50px;
text-align: center;
.tab tbody
width: 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;
width: 1210px;
/* float: right; */
overflow: hidden;
.sum
position: absolute;
bottom: 0;
left: 0;
z-index: 20px;
width: 100%;
height: 100px;
background: #fff;
.sum a
position: absolute;
bottom: 20px;
right: 300px;
display: block;
width: 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 + ‘" ><h4>‘ + val.title +
// ‘</h4><p>‘ + val.price + ‘</p><em>删除</em></li>‘;
results += ‘ <tr code="‘ + val.code + ‘"><td><img src="‘ + val.imgurl + ‘" ><p>‘ + val.title + ‘</p>‘ +
‘</td><td>RMB；<span class="unitprice">‘ + val.price + ‘</span></td>‘ +
‘<td num="1"><span class="reduce" style="width:30px; height:30px; display:inline-block; border:1px solid #ccc">-</span>‘ +
‘<span class="amount" style="width:30px; height:30px; display:inline-block; border:1px solid #ccc">1</span>‘ +
‘<span class="plus" style="width: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="width: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"
]
以上是关于如何用纯前端去写购物车_索尼商城购物车的主要内容，如果未能解决你的问题，请参考以下文章