购物车 初始版

最新推荐文章于 2021-09-01 08:26:20 发布
最新推荐文章于 2021-09-01 08:26:20 发布
阅读量214 收藏
点赞数 1
分类专栏： javascript经典案例
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45896126/article/details/109754163
版权

goodsList部分

购物车菜单html样式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/goodsList.css">
</head>
<body>  
<div class="wrap">  
	<div class="header">    
		<h1>商品列表</h1>    
		<!-- 右上角链接购物车 -->    
		<a href="./goodsCart.html">我的购物车</a>  
	</div>  
	<!-- 导航看出路径指引 -->  
	<div class="nav">    首页 》 鞋子 》 男鞋 》 帆布鞋  
	</div>  
	<div class="main">    
		<div class="content">     
		<!--  <div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div>      
		<div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div>      
		<div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div>      
		<div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div>      
		<div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div>      
		<div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div>      
		<div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div>      
		<div class="goods">        
			<img src="./img/goods1.png" alt="">        
			<p>￥188</p>        
			<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
			<div>加入购物车</div>      
		</div> -->    
		</div>  
	</div>
</div>
<script src="./js/jquery-1.8.3.js"></script>
<script src="./js/goodsList.js"></script></body>
</html>

购物车菜单css样式

.wrap{  
	width: 1000px;  
	margin: 0 auto;
}
/* 头部 */
.header{  
	background-color: #eee;  
	position: relative;
}
.header h1{  
	text-align: center;  
	line-height: 80px;  
	font-size: 30px;
}
/* 定位右上角购物车网站链接 */
.header a{  
	position: absolute;  
	right: 10px;  
	top: 10px;  
	color: red;  
	padding: 4px 8px;  
	border: 1px solid red;
}
.nav{  
	padding: 15px 0;
}
/* 每一个元素在页面盒模型都能看出宽高范围   不要出现高度为0的情况*/
.main{  
	overflow: hidden;
}
/* ⭐⭐⭐⭐⭐  解决多出的照片20元素  最后需要ajax渲染不建议行内元素设置 */
.content{  
	width: 1050px;  
	overflow: hidden;
}
/* 高度不要给，作为父元素有子元素撑开情况下不要给高 可自由扩展 */
.goods{  
	float: left;  
	width: 235px;  
	margin-right: 20px;  
	margin-bottom: 30px;  
	/* ⭐⭐ */  
	border: 1px solid #fff;
}
.goods:hover{  
	/* ⭐⭐ */  
	border-color: red;
}
.goods img{  
	width: 235px;
}
/* 价格  尽量字体不要纯色 刺眼 跳 */
.goods p{  
	color: #f40;  
	font-size: 18px;  
	padding: 6px 0;
}
.goods div{  
	border: 1px solid #f40;  
	color: #f40;  
	font-size: 14px;  
	padding-left: 40px;  
	line-height: 30px;  
	background: url(../img/cart.png) 5px 4px no-repeat;  
	float: right;  
	padding-right: 6px;  
	cursor: pointer;
}

购物车菜单js部分

//两个东西 第一个东西来到这个页面加载当前商品数据把它渲染出来第二个东西是每个商品加入购物车的时候把数据编号code存到本地存储
//ready放法
$(function (){
	  // 获取商品列表数据  需要json接口  
	  $.ajax({    
  		url: './data/goods.json',    
  		type: 'get',    dataType: 'json',    
  		//请求拿到数据了才获取到编号    
  		success: function (json){      
  			// console.log(json)      
  			//接下来展示渲染数据  根据json给的数据结构      
  			var goodsStr = '' //字符串为空累加到上面      
  			// $.each遍历数组  第一个你要遍历的数组  第二个函数（第二个每一个对象每一个数据商品编号）      。
  			$.each(json,function (index,item){        
  				goodsStr += `<div class="goods">          
  					<img src="${item.imgurl}" alt="">          
  					<p>${item.price}</p>          
  					<h3>${item.title}</h3>          
  					<div code="${item.code}">加入购物车</div>        
  				</div>`      
  			})      
  			// 添加到content里面去      
  			$('.content').html(goodsStr)    
  		}  
  	})
	  // 点击加入购物车  委托（绑定点击事件  动态元素）第一个事件类型 第二个触发事件的元素  第三个事件处理函数  
	  //点击按钮之后需要储存当前用户点击哪个商品加入购物车  
	  $('.content').on('click','.goods div',function (){    
	  	// 获取当前点击商品的编号    
	  	//商品的code编号存下来  获取属性    
	  	var code = $(this).attr('code')        
	  	// localStorage  key = value  存值              
	  			//  goods = [{code:'abc1',num:1},{code:'abc2',num:2}]    
	  	// 判断本地存储是否有数据    
	  	if (localStorage.getItem('goods')) {      
	  		//说明之前有存储过商品   取出来数组  json解析成对象      
	  		var goodsArr = JSON.parse( localStorage.getItem('goods') )    
	  	} else {      
	  		var goodsArr = []    
	  	}

    //是否有某个商品给个false    
    var hasGoods = false
    if (goodsArr.length > 0) {      
    	// 判断当前选中商品是否在购物车中      
    	$.each(goodsArr,function (index,item){        
    		console.log(index)        
    		console.log(item)        
    		if (item.code === code) {// 商品存在购物车中，数量+1          
    			item.num++//代表数量的key++          
    			//执行到这说明有某个商品          
    			hasGoods = true          
    			//执行到return false 说明遍历结束了          
    			return false        
    		}      
    	})    
    }
    // 如果购物车没有当前选中的商品，添加一条数据    
    if (!hasGoods) {      
    	// var objStr = JSON.stringify({code:code,num:1})      
    	//应该变成对象，不应该是字符串  编号  数量      
    	goodsArr.push({code:code,num:1})    
    }
    // 更新本地存储的数据  重新存进key里去  转成json字符串    
    localStorage.setItem('goods',JSON.stringify(goodsArr))
    alert('添加购物车成功')
  })
})

在这里插入图片描述

goodsCart部分

购物车主要页面html部分

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/goodsCart.css">
</head>
<body>
<div class="wrap">  
	<div class="header">    
		<h1>我的购物车</h1>  
	</div>  
	<div class="main">    
		<div class="title">      
			<span class="a1">商品</span>      
			<span class="a2">单价</span>      
			<span class="a3">数量</span>      
			<span class="a4">操作</span>    
		</div>    
		<ul class="list">      
			<!-- <li>        
				<img src="./img/goods1.png" alt="">        
				<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
				<p>￥188</p>        
				<span>2</span>        
				<em>删除</em>      
			</li>      
			<li>        
				<img src="./img/goods1.png" alt="">        
				<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
				<p>￥188</p>        
				<span>2</span>        
				<em>删除</em>      
			</li>      
			<li>        
				<img src="./img/goods1.png" alt="">        
				<h3>青春靓丽洋气时尚大方帅气的小白鞋，情侣同款</h3>        
				<p>￥188</p>        
				<span>2</span>        
				<em>删除</em>      
			</li> -->    
			</ul>  
		</div>
	</div>
	<script src="./js/jquery-1.8.3.js"></script>
	<script src="./js/goodsCart.js"></script>
	</body>
	</html>

购物车主要页面css部分

.wrap{  
	width: 1000px;  
	margin: 0 auto;
}
.header{  
	background-color: #eee;
}
.header h1{  
	line-height: 80px;  
	text-align: center;  
	font-size: 30px;
}
.title{  
	line-height: 40px;  
	background-color: #ccc;  
	overflow: hidden;  
	margin-top: 30px;
}
.title span{  
	font-size: 14px;  
	color: #333;
}
.a1{  
	margin-left: 100px;
}
.a2{  
	margin-left: 450px;
}
.a3{  
	margin-left: 100px;
}
.a4{  
	margin-left: 100px;
}
.list li{  
	margin: 10px 0;  
	overflow: hidden;
}
.list li img{  
	width: 80px;  
	height: 80px;  
	float: left;
}
.list li h3{  
	float: left;  
	margin-left: 10px;  
	width: 340px;  
	padding: 10px 0;
}
.list li p{  
	float: left;  
	margin-left: 120px;  
	width: 100px;  
	padding: 10px 0;  
	text-align: center;
}
.list li span{  
	float: left;  
	margin-left: 30px;  
	width: 100px;  
	padding: 10px 0;  
	text-align: center;
}
.list li em{  
	float: left;  
	margin-left: 30px;  
	width: 100px;  
	padding: 10px 0;  
	text-align: center;
}

购物车主要页面js部分

$(function (){
  	// 判断本地存储是否有购物车数据  goods key  
  	if (localStorage.getItem('goods')) {// 有数据    
  		// 获取本地存储中购物车的数据  把数据拿出来⭐⭐⭐⭐⭐⭐    
  		var goodsArr = JSON.parse( localStorage.getItem('goods') )  //转成对象
 	 	  // 获取数据    
    		$.ajax({      
    			url: './data/goods.json',      
    			type: 'get',      
    			dataType: 'json',      
    			success: function (json){        
    				//在循环外面声明一个变量        
    				var domStr = ''        
    				//遍历上面获取到的数组  获得购物车每个数据与下面json对象比较一下        
    				$.each(goodsArr,function (index,item){          
    					//遍历json所有数据  每个对比一下          
    					$.each(json,function (ind,obj){            
    						//说明这条数据是我想要的            
    						if ( item.code === obj.code ) {              
    							// 把数据遍历渲染到里面来  拼接              
    							domStr += `              
    							<li>                
    							<img src="${obj.imgurl}" alt="">                
    							<h3>${obj.title}</h3>                
    							<p>${obj.price}</p>                
    							<span>${item.num}</span>                
    							<em code="${obj.code}">删除</em>              
    							</li>              
    							`            
    						}          
    					})        
    				})        
    				$('.list').html(domStr)      
    			}    
    		})
   		 // 商品移出购物车  每一个事件都是动态渲染的 使用事件委托    
   		 $('.list').on('click','li em',function (){      
   		 	// 删除该商品对应的li  节点      
   		 	$(this).parent().remove()
      			// 更新本地存储中的数据  数据      
      			var code = $(this).attr('code') // 要删除商品的编号  给删除按钮创建个code      
      			// 删除数组元素：pop()  unshift()  splice(index,1)  从数组中删除某个对象      
      			//知道索引就能删掉      
      			$.each(goodsArr,function (index,item){        
      				if (item.code === code) {          
      					goodsArr.splice(index,1)          
      					return false        
      				}      
      			})
      			// 判断购物车是否还有数据      
      			if (goodsArr.length > 0) {        
      				// 更新本地数据        
      				localStorage.setItem('goods',JSON.stringify(goodsArr))      
      			} else {        
      				// 清除本地数据        
      				localStorage.removeItem('goods')        
      				var nodata = '<li style="line-height: 70px; text-align: center;">购物车暂无数据！</li>'        
      				$('.list').html(nodata)      
      			}
      			alert('商品移出购物车成功！')
 		   })
  } else {// 没数据    
  	var nodata = '<li style="line-height: 70px; text-align: center;">购物车暂无数据！</li>'    
  	//插入到list中    
  	$('.list').html(nodata)  
  }
})

在这里插入图片描述

通用css

@charset "utf-8";
html,
body,
ul,
li,
ol,
dl,
dd,
dt,
p,
h1,
h2,
h3,
h4,
h5,
h6,
form,
fieldset,
legend,
img,
input,
figure,
figcaption
{    
	margin: 0;    
	padding: 0;    
	box-sizing: 
	border-box;
}
header,footer,section,article,aside,nav,main,hgroup{    
	display:block;
}
*{    
	box-sizing: border-box;
}
body {    
	font-size: 16px;    
	font-family: "微软雅黑";
}
ul,ol,li {    
	list-style: none;
}
b,
strong {    
	font-weight: normal;
}
em,i {    
	font-style: normal;
}
a,u {    
	text-decoration: none;
}
h1,h2,h3,h4,h5,h6 {    
	font-size: 16px;    
	font-weight: normal;
}
input {    
	outline: none;
}
img {    
	display: block;    border: 0;
}
fieldset {    
	border: 0;
}
textarea {    
	resize: none;
}
/* 封装好类名 */
.border_none {    
	border: none !important;
}
.bg_none {    
	background: none !important;
}
/* 单行文本溢出省略号显示 */
.text_ellipsis {    
	white-space: nowrap;    
	overflow: hidden;    
	text-overflow: ellipsis;
}

通用jquery-1.8.3.js

秃头男神
关注
专栏目录
jquery实现购物车
wakaka_cy的博客
06-25 1183
实现全选反选功能，可以用attr(key,value)或者prop(key,value)来设置属性。哪个能用就用哪个就好。$(".button_qx").click(function (){ if(this.checked){ $(".select").prop("checked",true); } else{ $(".select").pr...
网上书城的购物车功能（上）
TZyybhs的博客
07-10 1254
购物车功能前言购物车所需的vo（实体类），web，xml配置vo（实体类）webxml配置功能界面js样式index.jsp 购物车首页findBook.jsp 购物车搜索页面shopping.jsp 购物车界面 前言 之前修项目的时候经常图片加载不出来，是因为没有给图片做映射的结果，接下来是再卖给图片做映射的步骤，先在 Eclipse 中的Servers文件夹中找到server.xml，打开它滑到最底下找到这一行代码<Context docBase="mvc_book" path="/mvc_boo
jquery仿淘宝购物车页面商品结算（附源码）
weixin_30872337的博客
06-29 1661
1、效果图如下： 2、源码如下： html部分： <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, u...
前端——使用JQuery 实现点击加入购物车（二）
tingyu_的博客
07-20 4525
实现效果： 1.当鼠标放到购物车上时，购物车向左移动，并展示购物车中的商品 2.点击删除，可以在购物车中删除这个商品项 3.点击加，购物车中该商品数量增加1 4.点击减，购物车中该商品数量减少1，并且当减到1的时候，提示不能再减 一、鼠标的移入与移出： 在鼠标未移入的时候，页面效果是这样的： 在页面的右侧主要有两块： 1.购物车图标 2.鼠标移入购物车图标后，右侧部分左滑，显示购物车中的 商品，也就是下图这个样子： 在这里首先解释CSS部分，理解之后，JQuery部分就好理解了。..
jQuery——淘宝购物车结算页面demo
SilentLand的博客
08-16 7307
淘宝购物车结算页面
使用Python的Django框架结合jQuery实现AJAX购物车页面
麻球科技
09-29 3464
这篇文章主要介绍了使用Python的Django框架结合jQuery实现AJAX购物车页面的方法,示例基于Django中构建好的JSON格式的RESTful API需要的朋友可以参考下 Django中集成jquery 首先，静态的资源通常放入static文件夹中： ? 1 2 3 4 5 6 7
Vue购物车案例初始文件资料
05-04
在购物车案例中，可能在`mounted`钩子中初始化商品列表，加载数据。 通过这个Vue购物车案例，开发者可以全面掌握Vue的基础知识，并提升实际项目开发能力。同时，理解并运用这些知识点，也能为构建更复杂的应用奠定...
js简易版购物车功能
10-19
标题《js简易版购物车功能》和描述表明，本文旨在分享如何利用JavaScript创建一个简易的购物车功能。该功能主要基于HTML和JavaScript实现，利用了HTML的拖拽API以及DOM操作方法来完成购物车中商品的添加、数量统计和...
JavaWeb 购物车系统
06-12
【JavaWeb购物车系统】是一种基于JavaWeb技术开发的电子商务应用程序，主要目的是为用户提供一个方便、易用的在线购物平台。这个系统的核心功能是实现购物车的管理，包括添加商品、删除商品、调整商品数量以及结算等...
基于PHP的jCartAjax购物车PHP版源码.zip
最新发布
08-27
3. **数据库文件**：如`database.sql`，用于创建和初始化存储商品信息、用户信息和购物车数据的数据库结构。 4. **配置文件**：如`config.php`，存储数据库连接信息和其他系统设置。 5. **图片和资源文件**：商品...
小程序加入购物车动画效果（飞入购物车）
08-22
在微信小程序开发中，为了提升用户体验，经常需要添加各种交互效果，其中“飞入购物车”的动画效果是一种常见的设计，可以使得用户在将商品添加到购物车时有更直观、生动的感受。本教程将详细讲解如何在小程序中实现...
用jQuery实现移动端手机商城购物车功能实现
09-24 754
购物车数量加减 右加号 1 $(".jiahao").click(function() { 2 var t = $(this).siblings().find("input");//取到数量 3 t.val(parseInt(t.val()) + 1);//parseInt()解析input一个字符串，返回一个整数 4 heji();//调用后面...
基于jquery右侧悬浮加入购物车代码
weixin_34111819的博客
04-07 370
分享一款基于jquery右侧悬浮加入购物车代码。这是一款基于jQuery实现的仿天猫右侧悬浮加入购物车菜单代码。 在线预览   源码下载 实现的代码： &lt;!--左侧产品parabola.js控制--&gt; &lt;div class="main"&gt; &lt;div id="plist"&gt; &lt;ul&gt; ...
Jquery购物车抛物线效果
Do it Yourself
04-15 2957
Jquery购物车抛物线效果。让你的小图片满屏飞。效果炫酷。实现动态加入购物车效果。购物车列表
离散数学笔记（一）
qq_44820158的博客
06-08 5505
数理逻辑笔记： （1）命题逻辑 （2）谓词逻辑 （3）证明方法
jQuery实现小米购物车功能案例
LY_code的博客
04-26 3979
效果图：修改：在购物车显示数量一栏没有文本居中（只需添加两步）：step1：在新增的div中的input增加一个类"&lt;input type='text' size='3' readonly value='1' class='inputTextCenter'/&gt; "+step2：在CSS样式为类添加样式.inputTextCenter{ text-align: center; }...
jQuery实现加入购物车飞入动画效果之开发不停，填坑不止（起点位置在Y轴方向位置偏移）
luoyu6的博客
10-30 2550
开发时为了完成购物车的飞入抛物线，因为懒惰随大流使用了fly.js插件，用的时候遇到的两个坑坑~~ 1. 有滚动条时，抛物体的起点位置在Y轴方向上有位置偏移，偏大 2. 页面有滚动条时，抛物体的结束位置不一样，偏大 我：(⊙o⊙)…烦烦的。。。这就是用别人东西的代价 。。。。。。 不管如何先来解决第一个坑吧 实现加入购物车效果，正常我们是这样使用的（第一次用的话，点击这里查看官方使用说明...
jQuery实现简单购物车功能
m0_57202083的博客
09-01 2902
<!DOCTYPE html> <html> <head> <title>购物车</title> <meta charset="utf-8" /> <style type="text/css"> h1 { text-align:center; } table { margin:0 auto; width:6...
轻松构建JavaWeb购物车系统
资源摘要信息:"本资源为JavaWeb购物车系统的开发和使用指南。它主要包括以下几个部分： 1. 标题："JavaWeb 购物车系统"：这是整个项目的名称，表明这是一个基于JavaWeb技术的购物车系统。 2. 描述："适用JavaWeb...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值