如何用原生jS做购物车
如何用原生jS做购物车
今天给大家分享如何用原生js做购物车，我们都逛过淘宝、京东这样购物网站，像这种购物网站，购物车是肯定少不了的 ，我们在天猫上购物，一开始一个页面有很多种商品，然后你在这里面看中了某件商品，点击之后就会跳转到详情页，详情页里有商品的详细信息，还有一个很放大镜一样的东西，可以让你看到商品的细节，还有选择数量，加入购物车，购物车里又有全选反选，商品数量修改，删除等操作，这些都是怎么实现的楞，听小编慢慢分析。注意：因为这个案列需要用到coolie所以必须在集成环境下运行。
首先，先说说列表页，列表页展示了每件商品的基本信息，我们可以把商品的信息放在一个数组对象里面，然后用数组对象插进去页面，这样以后需要增加商品就可以直接在数组对象里再加一个对象就行了，
pool.js这个案列只用到这一个函数
function $(id){
return document.getElementById(id)
}
列表页代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#list {
width: 900px;
margin: 30px auto;
}
#list>li {
width: 230px;
list-style: none;
float: left;
height: 354px;
margin-right: 10px;
margin-bottom: 10px;
}
#list>li:hover div {
box-shadow: 2px 2px 2px #ccc;
border: 1px solid #ccc;
}
.price {
font-size: 18px;
color: #e60012;
font-weight: bold;
font-family: "Century Gothic";
line-height: 18px;
padding: 0 5px;
margin-bottom: 5px;
}
.mainTitle {
line-height: 18px;
font-size: 12px;
padding: 0 5px;
}
.btn {
width: 90px;
height: 26px;
color: #fff;
text-align: center;
line-height: 26px;
background: #ff5c4d;
display: block;
text-decoration: none;
margin-top: 10px;
margin-left: 135px;
margin-bottom: 10px;
}
#car{width:80px;height: 40px;color: #fff;font-size: 16px;text-align: center;line-height: 40px;text-decoration: none;position: absolute;left:0;top:0;background: red}
</style>
</head>
<body>
<ul id="list">
<!--<li>
<div class="box">
<img src="img/1.jpg">
<p class="pirce">￥230</p>
<p class="mainTitle">今华方 五得利晶爽饺子王 5kg 麦芯粉半透明面粉 水饺馄饨面条专用粉 10斤 免邮</p>
<a href="##" class="btn">加入购物车</a>
</div>
</li>-->
</ul>
<!-- <a href="cart.html" id="car">查看购物车</a> -->
</body>
</html>
<script src="pool.js"></script>
<script>
var obj = [
{
"id": "01",
"title": "今华方 五得利晶爽饺子王 5kg 麦芯粉半透明面粉 水饺馄饨面条专用粉 10斤 免邮",
"price": "￥230",
"img": "img/1.jpg"
}, {
"id": "02",
"title": "【泰安馆】山东富世康麦芯挂面面条手擀鸡蛋挂面 多规格 细中粗可选 500g*3包 ",
"price": "￥360",
"img": "img/2.jpg"
}, {
"id": "03",
"title": "伊都拉面棍棍面500g*5包鲜拉面湿面半干面拌面炒面油泼面水煮速食拉面挂面 ",
"price": "￥110",
"img": "img/3.jpg"
}, {
"id": "04",
"title": "仙力面业 2kg刀削面宽面油泼面凉面农家手工筋道整箱挂面面条包邮4斤",
"price": "￥666",
"img": "img/4.jpg"
}, {
"id": "05",
"title": "贝因美（Beingmate） 全能优+面条 果蔬营养面条260克果蔬营养面条260克",
"price": "￥530",
"img": "img/5.jpg"
}, {
"id": "06",
"title": "重庆特产美食小吃正宗麻辣小面重庆小面方便面175gx5速食调料面条DF",
"price": "￥99",
"img": "img/6.jpg"
}];
var str = '';
for(var i=0;i<obj.length;i++){
str+='<li data-id='+obj[i].id+'><div class="box"><img src='+obj[i].img+'><p class="pirce">'+obj[i].price+'</p><p class="mainTitle">'+obj[i].title+'</p><a href="##" class="btn">查看详情</a></div></li>'
}
$("list").innerHTML=str
$("list").οnclick=function(e){
var e = e||event;
var target = e.target||e.srcElement;
//当点击商品的时候获取商品的自定义属性 得到点击的商品ID
if(target.tagName=="A"||target.tagName=="P"||target.tagName=="IMG"){
var id = target.parentNode.parentNode.getAttribute("data-id")
}
//点击之后跳转到详情页 ？后面浏览器不会解析 这是为了在详情页得到商品ID做准备
location.href = "details.html?id="+id
}
</script>
效果图如下：
接下来就到了详情页了，详情页就是用户点击了哪个商品，我们就应该把对应的详细信息展示给用户，那么问题来了，我们怎么知道用户点了哪个商品楞？
这就需要用到我们在列表写的这行代码了 location.href = "details.html?id="+id;
var str = (location.href).split("?")[1].split("=")[1];
这样str就是用户点击的商品id了
这个操作就是先获取网页路径再通过“？”分割成数组得到arr= [details.html，id=用户点击的商品id],再通过切割数组中的arr[1]也就是id=用户点击的商品id，这次通过“=”切割就会得到newArr=[id,用户点击的商品id]，这样newArr就是我们想要商品id了
这样当点击第二个商品的时候详情页也就会出现第二个商品的信息了
现在我们开始做放大镜效果，我先来分享一下原理，放大镜就是当你鼠标移入图片的时候有一个半透明的黑色小方块跟着你的鼠标移动，你的鼠标移动一下，右边的图会往反方向移动一点，
怎么才能让半透明小盒子跟着鼠标盒子移动楞，我们要算出半透明的小方块的left和top值、
Left值如下图，top值同理
Top值和left值都获取到了 半透明小盒子就可以跟着鼠标移动了，加减操作就是点击按钮让下一个节点innerHTML--或者上一个节点++而已
加入购物车操作我们需要判断以前用户购物车里有没有商品 没有则之接创建一个cookie把商品信息存入cookie中，如果有，则先把cookie中的数据拿出来 和当前要加入的商品的id进行对比，如果id相同则只进行数量上的相加，如果不同则，新建一个对象，合并成一个数组对象存进cookie中，具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="reset.css">
<style>
img{display: block;}
#box{width: 1000px;margin: 100px auto;border:1px #ccc solid;}
.box-l{width: 400px;position: relative;}
.box-l img{width: 100%}
.box-r{width: 500px}
#box p {padding: 60px 0;margin-left: 20px;font-size: 30px}
h2{margin-top:10px ;margin-left: 20px}
.btn {
margin-left: 20px;
width: 120px;
height: 40px;
color: #fff;
text-align: center;
line-height: 40px;
background: #ff5c4d;
display: block;
text-decoration: none;
}
a{cursor: pointer;}
#small{width: 200px;height: 200px;background: #000;opacity: 0.5;position: absolute;top:0;left: 0;display: none;cursor: move}
#max{width: 400px;height: 400px;position: absolute;left: 420px;top:0;overflow: hidden;display: none}
#maxImg{width: 800px;height: 800px;position: absolute;}
#shuliang{margin: 30px 0 60px 20px}
#shuliang a{padding: 2px 8px;border:1px #ccc solid;}
#shuliang span{padding: 2px 10px;border:1px #ccc solid;}
.car{width:80px;height: 40px;color: #fff;font-size: 16px;text-align: center;line-height: 40px;text-decoration: none;position: absolute;left:0;top:0;background: red}
.car1{top:50px}
</style>
</head>
<body>
<a href="list.html" class="car">首页</a>
<a href="cart.html" class="car car1">查看购物车</a>
<div id="box" class="clearfix ">
<!--
<div class="fl box-l" id="box-l">
<img src="img/1.jpg">
<div id="small"></div>
<div id="max"><img src="img/1.jpg" id="maxImg"></div>
</div>
<div class="fl box-r">
<h2 class="mainTitle">今华方 五得利晶爽饺子王 5kg 麦芯粉半透明面粉 水饺馄饨面条专用粉 10斤 免邮</h2>
<p class="pirce">￥230</p>
<div id="shuliang"><a href="" id="jian">-</a><span>1</span><a href="#" id="jia">+</a></div>
<a href="##" class="btn">加入购物车</a>
</div> -->
</div>
</body>
</html>
<script src="pool.js"></script>
<script>
var obj = [
{
"id": "01",
"title": "今华方 五得利晶爽饺子王 5kg 麦芯粉半透明面粉 水饺馄饨面条专用粉 10斤 免邮",
"price": "￥230",
"img": "img/1.jpg"
}, {
"id": "02",
"title": "【泰安馆】山东富世康麦芯挂面面条手擀鸡蛋挂面 多规格 细中粗可选 500g*3包 ",
"price": "￥360",
"img": "img/2.jpg"
}, {
"id": "03",
"title": "伊都拉面棍棍面500g*5包鲜拉面湿面半干面拌面炒面油泼面水煮速食拉面挂面 ",
"price": "￥110",
"img": "img/3.jpg"
}, {
"id": "04",
"title": "仙力面业 2kg刀削面宽面油泼面凉面农家手工筋道整箱挂面面条包邮4斤",
"price": "￥666",
"img": "img/4.jpg"
}, {
"id": "05",
"title": "贝因美（Beingmate） 全能优+面条 果蔬营养面条260克果蔬营养面条260克",
"price": "￥530",
"img": "img/5.jpg"
}, {
"id": "06",
"title": "重庆特产美食小吃正宗麻辣小面重庆小面方便面175gx5速食调料面条DF",
"price": "￥99",
"img": "img/6.jpg"
}];
//通过路径获取这个页面的id
var str = (location.href).split("?")[1].split("=")[1];
//通过for循环和if判断 获取这个id的相关内容 插入页面中
for(var i=0;i<obj.length;i++){
if(str==obj[i].id){
var str1 = '<div class="fl box-l" id="box-l" data-id='+obj[i].id+'><img src='+obj[i].img+'><div id="small"></div><div id="max"><img src='+obj[i].img+' id="maxImg"></div></div><div class="fl box-r"><h2 class="mainTitle">'+obj[i].title+'</h2><p class="pirce">'+obj[i].price+'</p><div id="shuliang"><a id="jian">-</a><span>1</span><a id="jia">+</a></div><a href="#" class="btn">加入购物车</a></div>'
}
}
$("box").innerHTML=str1
//放大镜效果
$("box-l").οnmοuseοver=function(){
$("small").style.display="block";
$("max").style.display="block";
this.οnmοusemοve=function(e){
var e=e||event;
var l = e.clientX-this.offsetLeft-$("small").offsetWidth/2;
var t = e.clientY-this.offsetTop-$("small").offsetHeight/2;
l = l>this.offsetWidth-$("small").offsetWidth?this.offsetWidth-$("small").offsetWidth:(l<0?0:l);
t = t>this.offsetHeight-$("small").offsetHeight?this.offsetHeight-$("small").offsetHeight:(t<0?0:t)
$("small").style.left=l+"px";
$("small").style.top=t+"px";
$("maxImg").style.left=-2*l+"px";
$("maxImg").style.top=-2*t+"px";
}
}
$("box-l").οnmοuseοut=function(){
$("small").style.display="none";
$("max").style.display="none"
}
var oNum = {};
var arr = [];
$("box").οnclick=function(e){
var e = e||event;
var target=e.target||e.srcElemengt;
//防止点击a标签自动在链接后面加#刷新变成undefined
e.preventDefault?e.preventDefault():e.returnValue = false;
//加减操作
if(target.id=="jia"){
target.previousElementSibling.innerHTML++
}
if(target.id=="jian"){
if(target.nextElementSibling.innerHTML>1){
target.nextElementSibling.innerHTML--
}
}
//点击加入购物车
if(target.className=="btn"){
//获取要加入购物车商品的数量
var count = Number(target.previousElementSibling.children[1].innerHTML);
//判断cookie里有没有数据 如果没有则直接插入 如果有再判断现在要加入的商品cookie里有没有同样的商品
if(getCookie("intel")){
var cookieJson = JSON.parse(getCookie("intel"));
var bStop = false;
for(var i=0;i<cookieJson.length;i++){
//现在要加入的商品cookie里已经存在 所以只需要进行数量上的相加
if(cookieJson[i].id == str){
cookieJson[i].num+=count;
bStop = true;
break;
}
}
//现在要加入的商品cookie里没有 所以把这条数据插进去再存入cookie
if(!bStop){
oNum = {id:str,num:count}
cookieJson.push(oNum);
}
setCookie("intel",JSON.stringify(cookieJson))
}else{
//cookie里没有数据 所以直接插入就行
oNum = {id:str,num:count}
arr.push(oNum);
setCookie("intel",JSON.stringify(arr))
}
}
}
</script>
效果图：
当点击第一商品5件 第二件商品10 我们看看cookie中存入的数据
存入的数据没毛病 这时候点击查看购物车 我们只需要把这数据拿出来 插入页面就行了
购物车的全选发选:当全选的checkbox为true时，用for循环遍历让下面的checkbox都为true；反之当全选的checkbox为false时，用for循环遍历让下面的checkbox都为false；
当下面的选择都勾上的时候，全选自动勾上，又是怎么实现的楞
for(var i=0;i<xuanze.length;i++){
xuanze[i].onclick = function(){
var bStop = true;
for(var j=0;j<xuanze.length;j++){
if(!xuanze[j].checked){
bStop = false;
break;
}
}
$("quanxuan").checked = bStop;
}
}
只要有一个选择为false ;bStop就会flase;
加减详情页就做过了，也就是点击上上一个或者下一个节点的innerHTML-- ++;
删除操作就是点击删除他的父级；
具体代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#list {
width: 800px;
text-align: center;
border-spacing: 0;
table-layout: fixed;
margin: 30px auto;
}
#list>tbody>tr {
border: 1px solid #ccc;
background: #f3b8b8;
height: 87px;
}
#list>tbody>tr>td {
margin-left: 30px;
width: 20%;
}
#list>tbody>tr>td>img{
}
#list>tbody>tr>td>button {
height: 22px;
width: 30px;
font-size: 18px;
outline: none;
}
#list>tbody>tr>td>button,
#list>tbody>tr>td>input {
border: 0;
float: left;
}
.reduce {
margin-left: 30px;
}
.num {
text-align: center;
}
#list>tbody>tr>td>input {
width: 40px;
height: 20px;
}
.smallPic {
width: 60px;
height: 60px;
}
#car{width:80px;height: 40px;color: #fff;font-size: 16px;text-align: center;line-height: 40px;text-decoration: none;position: absolute;left:0;top:0;background: red}
button,.del{cursor: pointer;}
</style>
</head>
<body>
<a href="list.html" id="car">首页</a>
<table id="list">
<tr>
<td><input type="checkbox" id="quanxuan"/><label for="quanxuan">全选</label></td>
<td>图片</td>
<td>单价</td>
<td>数量</td>
<td>小计</td>
<td>操作</td>
</tr>
<!-- <tr>
<td><input type="checkbox"/></td>
<td><img src="img/1.jpg" class="smallPic"></td>
<td>￥255</td>
<td>
<button class="reduce">-</button>
<input type="text" value="1" class="num">
<button class="add">+</button>
</td>
<td>￥255</td>
<td class="del">删除</td>
</tr> -->
</table>
</body>
</html>
<script src="pool.js"></script>
<script>
var obj = [
{
"id": "01",
"title": "今华方 五得利晶爽饺子王 5kg 麦芯粉半透明面粉 水饺馄饨面条专用粉 10斤 免邮",
"price": "￥230",
"img": "img/1.jpg"
}, {
"id": "02",
"title": "【泰安馆】山东富世康麦芯挂面面条手擀鸡蛋挂面 多规格 细中粗可选 500g*3包 ",
"price": "￥360",
"img": "img/2.jpg"
}, {
"id": "03",
"title": "伊都拉面棍棍面500g*5包鲜拉面湿面半干面拌面炒面油泼面水煮速食拉面挂面 ",
"price": "￥110",
"img": "img/3.jpg"
}, {
"id": "04",
"title": "仙力面业 2kg刀削面宽面油泼面凉面农家手工筋道整箱挂面面条包邮4斤",
"price": "￥666",
"img": "img/4.jpg"
}, {
"id": "05",
"title": "贝因美（Beingmate） 全能优+面条 果蔬营养面条260克果蔬营养面条260克",
"price": "￥530",
"img": "img/5.jpg"
}, {
"id": "06",
"title": "重庆特产美食小吃正宗麻辣小面重庆小面方便面175gx5速食调料面条DF",
"price": "￥99",
"img": "img/6.jpg"
}];
var oList = document.getElementById("list");
var str = "";
//如果cookie里面有这个属性的话
if(getCookie("intel")){
//如果数据存在那么将字符串转换为json
var data = JSON.parse(getCookie("intel"));
console.log(data)
for(var i in data){
for(var j in obj){
//匹配id插入内容
if(data[i].id == obj[j].id){
str+='<tr><td><input type="checkbox" class="xuanze"/></td><td><img src='+obj[j].img+' class="smallPic"></td><td>'+obj[j].price+'</td><td><button id="jian">-</button><input type="text" value='+data[i].num+' class="num"><button id="jia">+</button></td><td>￥'+(obj[j].price.slice(1)*data[i].num)+'</td><td class="del">删除</td></tr>'
}
}
}
oList.innerHTML += str;
}
oList.οnclick=function(e){
var e=e||event;
var target = e.target||e.srcElement;
if(target.className=="del"){
target.parentNode.remove()
}
if(target.id=="jia"){
target.previousElementSibling.value++;
var shulian = target.previousElementSibling.value;
var jiage = target.parentNode.previousElementSibling.innerHTML.slice(1);
target.parentNode.nextElementSibling.innerHTML = "￥"+shulian*jiage
}
if(target.id=="jian"){
if(target.nextElementSibling.value>1){
target.nextElementSibling.value--;
var shulian = target.nextElementSibling.value;
var jiage = target.parentNode.previousElementSibling.innerHTML.slice(1);
target.parentNode.nextElementSibling.innerHTML = "￥"+shulian*jiage
}
}
var xuanze = oList.getElementsByClassName("xuanze")
if(target.id == "quanxuan"){
if(target.checked){
for(var i=0;i<xuanze.length;i++){
xuanze[i].checked = true
}
}else{
for(var i=0;i<xuanze.length;i++){
xuanze[i].checked = false
}
}
}
for(var i=0;i<xuanze.length;i++){
xuanze[i].onclick = function(){
var bStop = true;
for(var j=0;j<xuanze.length;j++){
if(!xuanze[j].checked){
bStop = false;
break;
}
}
$("quanxuan").checked = bStop;
}
}
}
</script>
效果图：
我们在去首页添加第三种商品试试，不买多了就买个15件好了
再测试一下加减全选和删除 我们第一件商品删了 ，第二件商品加2 第三件商品减2 然后再全选
没毛病，这样简单的购物车就做好了。
转载于:https://www.cnblogs.com/liuxionghui/p/9065360.html
如何用原生jS做购物车相关推荐
- 原生js做购物车全选选中商品显示价格和小计的计算
html代码 <div class="contain"><table class="table table-bordered">< ...
- 如何用原生JS制作图片时钟
程序设计之道无远弗届,御晨风而返.---- 杰佛瑞 · 詹姆士 今天分享一个小demo,如何用原生JS制作图片时钟,话不多说上代码. html[外链图片转存失败(img-mD0n42FM-156223 ...
- java循环购物车结算系统_原生JS实现购物车结算功能代码
html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD ...
- 怎样编写html购物车结算页面,原生JS实现购物车结算功能
原生JS实现购物车结算功能 @charset "utf-8"; *{margin:0;padding:0;list-style-type:none;} a{color:#666;t ...
- 前端每日实战：163# 视频演示如何用原生 JS 创作一个多选一场景的交互游戏（内含 3 个视频）...
效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/LXMzRX 可交互视频 此视频是可 ...
- 原生JS实现 购物车制作 和 楼梯导航（11）
购物车 1. 全选按钮 1.1 将所有的单选按钮和全选按钮保持一致, 并且所有的全选按钮也保持一致 1.2 将总件数变成单选按钮的个数 1.3 计算总计 2. 单选按钮功能: 2.1 判断 ...
- 如何上传图片到fileupload空间_如何用原生js写图片上传组件v2.0（还有新版本）？...
js图片上传组件: 基本要求: 1.上传的图片可预览,可删除,可被覆盖更新 2.要求图片格式为jpg和png,大小不能超过2M 新加需求: 1.模拟回显,可用本地存储(实际上的回显是通过后台传过来的u ...
- 利用原生js做数据管理平台
摘要:数据管理平台在当今社会中运用十分广泛,我们在应用过程中,要对数据进行存储,管理,以及删除查询等操作,而我们在实际设计的时候,大牛们大多用到的是JQuery,而小白对jq理解也较困难,为了让大家回 ...
- 原生js方法购物车完整实现 利用localStorage
利用localStorage实现 html页面3个分别是 productList 产品列表 details产品详情页 cartList购物车页面 1.productList.html 页面<st ...
最新文章
- 【组队学习】【23期】Datawhale深度推荐模型
- 并发基础（三）： java线程优先级小试牛刀
- mac os 安装linux驱动,教程：Ubuntu 14.04安装Mac OS X主题
- 简单代码生成器原理剖析（一）
- Java小对象的解决之道——对象池（Object Pool）的设计与应用
- 量子计算机创新,中国式量子霸权：光子量子计算机研究创新纪-24小时-虎嗅网...
- 做程序员10年了，复制粘贴是我最牛的技能，直到我看到了这几个公众号
- 常数中有换行符的错误
- .net remoting的事务传播以及wcf分布式事务
- java 调用 cplex
- 进程间的通信方式有哪些？
- 3Dvr全景制作VR全景技术讲解-道可云
- maple中plot和plots函数的区别——笔记1
- [UnityC#事件委托]对委托事件的学习与实践
- jquery（自制版）
- c语言球球半径,C/C++编程笔记：C语言开发球球大作战（源码分享），你想试试吗？...
- 流氓软件卸载-MrWReSadse、Nexuser.exe、WRSvcmbdl.dll
- 巴斯卡（Pascal）三角形
- 万里归途投资多少起投？投资能按时分红吗？资金安全有保障吗？
- C++二进制转十进制源代码