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

这里以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"}

]

原文地址：https://www.cnblogs.com/robot666/p/11048554.html

时间： 2024-10-13 08:24:13

如何用纯前端去写购物车_索尼商城购物车的相关文章

前端工程师基础培训_问答（139邮箱）

一.问答题: (1)139邮箱资源服务器与缓存相关的响应首部是怎么配置的? (2)登录139邮箱web2.3,在浏览器有缓存的情况下,刷新页面,浏览器会不会重新发送请求获取静态资源?如果会,请列出与缓存相关的请求首部以及响应状态码:如果不会,请说明原因. (3)请指出Cache-Control与Expires的区别 (4)新功能上线后,如何清空浏览器的缓存,让用户获取最新的资源文件? 问题1.问题2 可用Fiddler抓包然后截图说明. 二.编程题: 请写一个页面,并封装相应的JS代码,完成13

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架（上篇——纯前端多页面）

Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外的好处.例如手Q的多webview架构,新开页面有利于ios右划返回,也避免了返回时页面的刷新. 所以,这里我们探讨一下如何配置实现多页面的项目框架.这里是开篇,先以最简单的纯前端多页面为例入手,最终目标是完成Node.js多页面直出+前后端同构的架构. 本文源代码:https://github.c

「圣诞特辑」纯前端实现人脸识别自动佩戴圣诞帽

在线体验地址:hksite.cn/prjs/christmashat 源码地址:https://github.com/hk029/christmas-hat 写在开头 叮叮当,叮叮当,吊儿个郎当,一年一度的圣诞节到咯,我不由的回想起了前两年票圈被圣诞帽支配的恐惧.打开票圈全是各种@官方求帽子的: 票圈头像也瞬间被圣诞帽攻陷: 在那段时间,你没一顶圣诞帽还真不好意思发票圈 各种戴帽子的软件也如雨后春笋般浮现出来,不管是小程序还是美图软件无一例外的都增加了戴圣诞帽的功能.但是对于懒人的我来说,自己调

纯前端的图片预览

尊重原创,转载请注明来自:http://www.cnblogs.com/fsjohnhuang/p/3925827.html ^_^肥仔John 一.前言 图片上传是一个普通不过的功能,而图片预览就是就是上传功能中必不可少的子功能了.在这之前,我曾经通过订阅input[type=file]元素的onchange事件,一旦更改路径则将图片上传至服务器,接着就获取图片路径并赋值到img元素上.先不管文件异步提交的解决方案,就是服务端清理那些临时的预览图片已经增加不少工作量了. 偶然从MDN上找到纯前

如何用boost::serialization去序列化派生模板类(续)

在 如何用boost::serialization去序列化派生模板类这篇文章中,介绍了序列化派生类模板类, 在写測试用例时一直出现编译错误,调了非常久也没跳出来,今天偶然试了一下...竟然调了出来. 先看看变异错误的代码(...看不出有错,但是编译就有错). 基类代码: class base_class { public: base_class(int m=0) : base_member_(0) {} virtual ~base_class() {} virtual void print_da

Web纯前端“旭日图”实现元素周期表

一.什么是旭日图 旭日图是在Excel 2016中新增的一种图表.有些类似饼图,饼图的优势是可以显示占比.但是饼图只能显示单级数据.旭日图用来表示多层级数据的占比.旭日图以一种分层方式显示,非常适合用来显示层级数据.层次结构中每个级别的比例通过1个圆环表示,离原点越近代表圆环级别越高,最内层的圆表示顶级结构,然后一层一层去看数据的占比情况. 我们通过一个简单的示例,初步感受一下旭日图的魅力. 季度 月份 周 销量 Q1 1月份 29 2月份 第一周 63 第二周 54 第三周 91 第四周 78

HTML5时代的纯前端上传图片预览及严格图片格式验证函数（转载）

原文地址:http://www.2cto.com/kf/201401/274752.html 一.要解决什么样的问题? 在写这个函数之前,有们童鞋在群里问如何纯前端严格验证图片格式.这在html5时代之前,那是不可能实现的,必须要上传到后台,由后台脚本读取文本流后进一步验证.这样就造成了一定的服务器资源浪费.但是html5时代,这个工作我们完全可以交给前端来做了. 另一方面,html5时代,许多我们原来的图片预览方案都失效了.究其原因,其实是现代浏览器出于对用户隐私的保护,file控件不再提供真

纯前端实现人脸识别-提取-合成

原文地址前端路上, 转载请注明出处. 最近火爆朋友圈的军装照H5大家一定还记忆犹新,其原理是先提取出照片中的面部,然后与模板进行合成,官方的合成处理据说由天天P图提供技术支持,后端合成后返回给前端展示,形式很新颖效果也非常好,整个流程涉及的人脸识别和图像合成两项核心技术在前端都有对应的解决方案,因此理论上前端也可以完成人脸识别-提取-合成整个流程,实现纯前端的军装照H5效果. 前端人脸识别 首先需要的是人脸识别,这个一听就觉得高大上的东西原理并不深奥,无非是用人的面部特征规则对图像进行匹配和识别

利用html5 canvas实现纯前端上传图片的裁剪

今天跟大家分享一个前端裁剪图片的方法.许多网站都有设置用户头像的功能,用户可以选择一张本地的图片,然后用网站的裁剪工具进行裁剪,然后设置大小,位置合适的头像.当然,网上也有一些用js写的诸如此类裁剪的插件,但是有许多都是前端将图片的一些裁剪参数(如坐标)传给后台,有java程序员进行真正的图片裁剪.今天自己研究了一些,做了一个纯前端裁剪的demo,如下: 1.html部分:<div> <input type="file" id="imgFile"&