码迷，mamicode.com
首页 > 其他好文 > 详细

如何用纯前端去写购物车_索尼商城购物车

时间：2019-06-19 00:26:02      阅读：134      评论：0      收藏：0      [点我收藏+]

标签：reduce   dea   ice   ott   需要   val   pac   20px   dde   

这里以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,option{margin: 0; padding: 0;}
html,body{font-family: "微软雅黑",Arail,Tabhoma; font-size: 100%; text-align: left; width: 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{
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"}
]

如何用纯前端去写购物车_索尼商城购物车

标签：reduce   dea   ice   ott   需要   val   pac   20px   dde   

原文地址：https://www.cnblogs.com/robot666/p/11048554.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！