Js 基础学习之--模拟加入购物车

最新推荐文章于 2022-12-28 21:36:04 发布
最新推荐文章于 2022-12-28 21:36:04 发布
阅读量901 收藏
点赞数 1
分类专栏： js 文章标签： Js 基础学习 购物车 cookie 删除添加 cookie的增删改查封装函数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/b1244154318/article/details/52049313
版权
Js 基础学习之--模拟加入购物车 
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>购物车</title>
	<style type="text/css">
		*{margin:0; padding: 0; font-size: 14px; font-family: 微软雅黑;}
		ul li{list-style:none;}
		.clear{clear: left;}
		#products{
			width: 1100px;
			margin: 10px auto;
		}
		#products li{
			width:260px;
			float: left;
			border:solid 1px #E9E9E9;
			margin-right:10px;
		}
		#products li span{
			display: block;
			width: 100%;
			text-align:center;
		}
		#products li em{
			font-size:24px;
			font-family: Arial;
			color:#E4393C;
			display: block;
			margin-left: 20px;
		}
		#products li p{
			color:#333;
			margin: 10px 0 0 20px;
		}
		#products li a{
			display: block;
			width: 120px;
			height: 30px;
			line-height: 30px;
			border: solid 1px #DDDDDD;
			text-align: center;
			margin: 20px auto;
			text-decoration: none;
			color:#E4393C;
		}
		#products li a:hover{
			border: solid 1px #E4393C;
		}
		.shopcart{
			width:1100px;
			margin: 50px auto;
		}
		.shopcart h1{
			font-size:18px;
			color:#E4393C;
			border-bottom:solid 4px #E9E9E9;
			padding-bottom: 10px;
		}
		.shopcart .list-head{
			width: 96%;
			background: #F3F3F3;
			height: 40px;
			line-height: 40px;
			padding:0 2% 0 2%;
		}
		.shopcart .list-head div{
			float:left;
		}
		.h1,.c1{width: 60%;}
		.h2,.c2{width: 20%;}
		.h3,.c3{width: 20%; }
		#cart-list .pl{
			width: 100%;
			height: 94px;
			border-bottom:solid 1px #C5C5C5;
			clear: left;
		}
		#cart-list .pl div{
			float: left;
			height: 94px;
			line-height: 94px;
			background: #FFF4E8;
		}
		#cart-list div span{
			display: block;
			float: left;
			padding: 5px 0 0 20px;
		}
		#cart-list div p{
			float: left;
			padding-left: 20px;
		}
		#cart-list div span img{
			width:80px;
		}
		.pl a{
			color:#666;
			text-decoration: none;
		}
		.pl a:hover{
			color:#ff0000;
			text-decoration: underline;
		}
	</style>
	<script src="js/cookie.js"></script>
	<script>
		window.onload = function(){
			var date = new Date();
			date.setDate(date.getDate() + 3);
			var products = document.getElementById("products");
			var btn = products.getElementsByTagName("a");
			var productList = document.getElementById("cart-list");
			function getShopList(){
					var html = "";
					//获取Cookie的内容
					var cookieNow = getCookie("products");
					//判断cookie数组是否为空
					var arr = cookieNow == ""? []:cookieNow.split("|");
					for(var i = 0;i < arr.length ; i++){
					  html += "<div class='pl'>"
								+ "<div class='c1'>"
								+ "<span>" + arr[i].split("#")[0] +"</span>"
								+ "<p>" + arr[i].split("#")[2] + "</p>"
								+ "</div>"
								+ "<div class='c2'>"+ arr[i].split("#")[1] +"</div>"
								+ "<div class='c3'><a href='javascript:;'" 
								+"οnclick='delShop(this)'>删除</a></div>"
								+ "</div>";
					}
					//将购物商品加入购物车
					productList.innerHTML = html;
			}
			   		getShopList();
			for(var i = 0;i < btn.length; i++){
				btn[i].onclick = function(){
					//获取商品信息
					var productsImg = this.parentNode.children[0].innerHTML;
					var productsPrice = this.parentNode.children[1].innerHTML;
					var productsName = this.parentNode.children[2].innerHTML;
					var oldCookievalue = getCookie("products");
					//alert(oldCookievalue);
					if(oldCookievalue == ""){
						var str = productsImg + "#" +productsPrice + "#" + productsName;
						//console.log(str);
					}
					else{
						var str = oldCookievalue + "|" + productsImg + "#" +productsPrice + "#" + productsName;
						//console.log(str);
					}
					setCookie2("products",str,date); 
				   //加入购物车
				   		getShopList();
					
				}	
			}
		}
		function delProduct(obj){
			document.getElementById("cart-list").removeChild(obj.parentNode.parentNode);
		}
		function delShop(obj){
			obj.parentNode.parentNode.parentNode.removeChild(obj.parentNode.parentNode);
			var cookieValue = getCookie();
			console.log(oldCookievalue);
		}
	</script>
</head>
<body>
	<div id="products">
		<ul>
			<li>
				<span><img src="img/1.jpg"></span>
				<em>¥2999</em>
				<p>乐视超级电视 S50</p>	
				<a href="javascript:;">加入购物车</a>
			</li>
			<li>
				<span><img src="img/2.jpg"></span>
				<em>¥3999</em>
				<p>乐视超级电视 S60</p>
				<a href="javascript:;">加入购物车</a>
			</li>
			<li>
				<span><img src="img/3.jpg"></span>
				<em>¥4999</em>
				<p>乐视超级电视 S70</p>
				<a href="javascript:;">加入购物车</a>
			</li>
			<li>
				<span><img src="img/4.jpg"></span>
				<em>¥5999</em>
				<p>乐视超级电视 S80</p>
				<a href="javascript:;">加入购物车</a>
			</li>
		</ul>
	</div>
	<div class="clear"></div>
	<div class="shopcart">
		<h1>全部商品</h1>
		<div class="list-head">
			<div class="h1">商品名称</div>
			<div class="h2">价格</div>
			<div class="h3">操作</div>
		</div>
		<div id="cart-list">
			<!-- <div class="pl">
				<div class="c1">
				<span><img src="img/1.jpg"></span>
				<p>乐视超级电视 S50</p>
				</div>
				<div class="c2">¥1000</div>
				<div class="c3"><a href="#">删除</a></div>
			</div> -->

		</div>


	</div>
</body>
</html>

cookie的封装函数 
  //设置(创建、修改)cookie数据
	//参数1：键值
	//参数2：键名
	function setCookie(key,value){
		document.cookie = key + "=" + encodeURIComponent(value);
	}
    /*
     测试： setCookie("people1","你好1");

     */
	//设置(创建、修改)cookie数据
	//参数1：键值
	//参数2：键名
	//参数3：过期时间
	function setCookie1(key,value,dateTime){
		document.cookie = key + "=" + encodeURIComponent(value)+";expires="+ date;
	}

   /* 
     
     测试： var date = new Date();
	       date.setDate(date.getDate() + 3); 
           setCookie1("people1","你好1",date);

     */

	//设置(创建、修改)cookie数据
	//参数1：键值
	//参数2：键名
	//参数3：过期时间(可以也可以不写)
	function setCookie2(key,value,dateTime){
		var cValue = key + "=" + encodeURIComponent(value);
		if(dateTime){
			cValue =　cValue +";expires="+ dateTime;
		}
		 document.cookie = cValue;
		}

    /* 
     
     测试： var date = new Date();
	       date.setDate(date.getDate() + 3); 
           setCookie2("people1","你好1",date);

     */
	
   //获取给定键名的键值
   //参数：给定cookie的键名
   function getCookie(key){
   		var arr = document.cookie.split("; ");
   		//console.log(arr);
   		var keyValue = "";
   		for(var i = 0; i < arr.length; i++){
	   		if(arr[i].split("=")[0] == key){
	   			keyValue = arr[i].split("=")[1];
	   			break;
	   		}
   		}
   		return decodeURIComponent(keyValue);
   }

     /* 

     测试： getcookie("people3");

     */

   //删除给定键名的键值
   //参数：给定cookie的键名
   function delcookie(key){
   		document.cookie = key + "=;expires=" + new Date(0);
   }

  /*
	测试： delcookie("people1");
  */
Web攻城狮
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS高仿抛物线加入购物车特效实现代码
01-21
要想让你的购物车有种高大上的感觉，加入特效的功能是必不可少的。 2. 实现思路 设置一些简单的样式 模拟把它添加到购物车中，数量增加 从点击的位置开始动画，结束动画 3. 代码实现 CSS代码 咱们给它设置一些...
javascript购物车详解实现购物车完整功能(附效果图，完整代码)
笨鸟学飞的博客
08-11 4万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。
JavaScript网页购物车
weixin_67235801的博客
03-12 3581
网页购物车功能的实现
使用JavaScript实现简单的购物车功能
weixin_45730094的博客
05-11 6966
JavaScript 购物车
JS&JQ添加购物车功能
qq_50822277的博客
12-30 3405
啥也不说。直接上代码！！！！ 第一步。引入script src=“jquery-3.3.1.min.js” 第二步。先写一个$ (function() {})函数。这里要说一下。这个$(function() {})是最大的函数。包住全部。下面的图片是加入购物车。再下面是分部 下面这些才是函数里面的东西、 添加购物车！！！！ 第三步。先找到加入购物车的a标签。然后分别找到a标签父亲的兄弟的文本——图片、商品名称、折扣价 //获取购物车标签#goods tr td a $('#go.
js实现添加购物车功能
素描本里的男子的博客
05-15 8526
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> * { padding: 0; margin: 0; } table { ...
js实现商品抛物线加入购物车特效
01-19
本文实例为大家分享了js实现商品抛物线加入购物车动画代码，供大家参考，具体内容如下   parapola.js /*! * by zhangxinxu(.com) 2012-12-27 * you can visit ...
parabola.js抛物线与加入购物车效果的示例代码
01-19
* 网页模拟现实需要一个比例尺 * 如果按照1像素就是1米来算，显然不合适，因为页面动不动就几百像素 * 页面上，我们放两个物体，200~800像素之间，我们可以映射为现实世界的2米到8米，也就是100:1 * 不过，本...
花店商场系统，系统支持前台会员的注册登陆,系统留言，花朵的品种选择，详情浏览，加入购物车，购买花朵等；供大家学习研究参考！
最新发布
10-22
jsp+servlet+js 注： 1.部署当前项目的时候，需要修改tomcat部署文件server.xml配置文件 jsp+servlet开发java web网上花店商城系统，后台可配置化，方便修改，也可修改做成其他商城类项目； 其他按照正常操作来，...
React-Yelp:由React Redux Router Starter Kit提供的Yelp类似食品服务前端完整代码演示
05-09
特征用户登录/注销找到你的城市改变城市浏览餐厅无限地加载更多的餐厅依类别搜寻按关键词搜索餐厅详细信息页面保存餐厅将餐厅加入购物车对您购买的餐厅发表评论/评论科技栈使用React组件对结构项目进行ReactRedux...
JS实现加入购物车
01-14
JS实现加入购物车
模仿淘宝网购物车纯JS实现
01-09
模仿淘宝网购物车纯JS实现，改变商品数量时，单个商品金额和购物车会跟着变动变动，支持删除。
原生js小米商城点击商品加入购物车代码
11-02
原生js小米商城点击商品加入购物车代码 原生js小米商城点击商品加入购物车代码
原生js模拟淘宝购物车项目实战
10-23
主要向大家推荐了一个原生js模拟淘宝购物车项目实战，包括商品的单选、全选、删除、修改数量、价格计算、数目计算、预览等功能的实现，感兴趣的小伙伴们可以参考一下
js-实现淘宝加入购物车代码.rar
07-11
用js实现淘宝购物车，以及淘宝加入购物车和删除购物车。
js原生代码实现购物车
2201_75407865的博客
12-28 802
双击商品，如果购物车没有该商品，添加到购物车中，如果有该商品数量加1。 全选全不选 刷新后数据不会消失
JS实现购物车动态功能
weixin_30933531的博客
05-25 5675
整理了一下当时学js写的一些案例，觉得购物车功能在一般网站比较常见且基础，现在把它整理出来，需要的小伙伴可以参考一下。 该案例购物车主要功能如下： 1、 商品单选、全选、反选功能 2、 商品添加、删除功能 3、 商品价格自动计算 具体效果： 打开效果 添加商品数量（自动计算价格）： 取消选择： 删除商品： 商品显示与隐藏： 做这个案例呢我用了之前自己封装的框架，所以需要的小伙伴，要到我的...
javascript购物车实现详细代码讲解
热门推荐
小圣贤君的博客
09-27 10万+
我们肯定都很熟悉商品购物车这一功能，每当我们在某宝某东上购买商品的时候，看中了哪件商品，就会加入购物车中，最后结算。购物车这一功能，方便消费者对商品进行管理，可以添加商品，删除商品，选中购物车中的某一项或几项商品，最后商品总价也会随着消费者的操作随着变化。 现在，笔者对购物车进行了简单实现，能够实现真实购物车当中的大部分功能。在本示例当中，用到了javascript中BOM操作，DOM操作，表格操
js jquery 加入购物车动画
01-11
jquery 实现加入购物车动画效果，很有用的一个插件。
uni-app实现加入购物车飞入动画贝赛尔曲线
05-19
要实现加入购物车飞入动画，可以使用贝塞尔曲线来控制动画路径。具体实现步骤如下： 1. 在购买按钮点击事件中，获取购买按钮的位置和购物车图标的位置，并计算出两者之间的距离。 2. 创建一个贝塞尔曲线，控制点...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值