如何用纯前端去写购物车

这里以Sony商城的购物车为例，购物车用纯前端的技术来写的，并且是存在了localstorage里，由于没有存在数据库里，购物车的操作基本是在前端页面操作的！

用jquery写的javascript,所以引用时记得去引用相对应的jquery文件，传输过来的zh-data可以自己自定义去写，另外;不要忘记zh-data里的数据和自己图片的命名需要一致的喔！

1.HTML页面

<strong class="title">我的购物车</strong>

</div>

<h3 class="hint">订单已免运费</h3>

<thead>

<tr>

</tr>

</thead>

<tbody>

</tbody>

</table>

</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 + '" 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="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"}

]

转载于:https://www.cnblogs.com/robot666/p/11048554.html

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

【VB6】如何用纯VB代码写个五子棋程序？（二）
由于后面的过程中,哈里也是遇到了一些坑,因此完全按照当时开发时候的逻辑,可能篇幅太长.因此就直接把最后选择的算法做介绍吧. 上回书说道: ·那我要悔棋怎么办啊? ·那我要再开一局怎么办啊? ·我要棋子 ...
前端相机自定义取景框_索尼ZV-1数码相机：专业而易用，Vlog和网络主播的进阶良机...
索尼ZV-1是专为视频内容创作者设计的一款数码相机,事实上称它为数码相机已经不合适了,因为它的设计已完全向短视频拍摄为主,而照相功能只是其基础和部分.可以说,它是一款在黑卡RX100数码相机基础上,强 ...
前端常用的【文件下载操作2】不获取后端文件流【纯前端】实现：el-table表格下载为Excel文件【sheetJS XLSX】
--how are u gonna spend your life?(你将如何度过这一生) --I am not sure,but I do know,I am going to live every ...
python web为什么不火_如何用纯 Python 写交互式 Web 应用？
不用学前端编程,你就能用 Python 简单高效写出漂亮的交互式 Web 应用,将你的数据分析成果立即展示给团队和客户. 痛点从我开始折腾数据分析工具的那一天,就没有想明白一件事儿 -- 我打算把数 ...
excel在线_功能强大的纯前端 Excel 在线表格： Luckysheet
[导语]:Luckysheet是一款类似excel的在线表格,纯前端,功能强大.配置简单.完全开源,几行代码就能展现出一个功能完备的在线表格. 简介 Luckysheet是一款类似excel的纯前端在 ...
js固定表格行列_纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
用c语言写代码_教你如何用android mvp分层架构优雅写代码
背景看了好多android技术博客,写android分层架构的博客越来越多,有mvc.mvp.mvvm.clean等各式各样的,而mvp异常火热,然而每个人对mvp的定义又是不同,写法自然也是千紫万 ...
autojs遍历当前页面所有控件_纯前端表格控件SpreadJS V14.0发布：组件化编辑器+数据透视表 - 葡萄城开发工具...
SpreadJS 是一款基于 HTML5 的纯前端表格控件,兼容 450 种以上的 Excel 公式,具备"高性能.跨平台.与 Excel 高度兼容"的产品特性,可为用户提供高度类 ...
java论文怎么去写_本硕毕业论文的写法技巧与心得
很多毕业狗在弄论文,身心疲惫,下面我来说说写论文的心得. 毕业论文的格式,一般分四个部分, 1引言.2方法.3结果与讨论.4结论与展望写学术论文的时候一般建议大家从第二部分方法开始写.因为这部分写起 ...

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

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

最新文章

热门文章