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

最新推荐文章于 2024-01-03 17:11:45 发布
最新推荐文章于 2024-01-03 17:11:45 发布
阅读量910 收藏
点赞数 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
    评论
专栏目录
Vue.js学习笔记--进阶之路
JackieDYH的博客
06-01 1134
框架，framework，是能够让程序开发人员更好的专注于业务逻辑的开发，而无需关心底层功能的实现。vue是一个渐进式 JavaScript 框架，Vue (读音 /vjuː/，类似于 **view**) 是一套用于构建用户界面的**渐进式框架**。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。国人自己的开发的框架，作者是：尤雨溪vue有两大核心数据驱动页面组件化methods，用来存放用户自定义函数vue支持我们自定义一些指令来完成一定的操作。
JS中利用本地数据库实现模拟购物车的功能
qq_52477159的博客
09-20 1196
因为在setItem（）这个方法中，我们不能直接存储对象，要把对象转为字符串，所以调用JSON.stringify（obj）方法，把cart对象转为字符串存入数据库中；因为在getItem（）这个方法中，我们取出的是字符串，所以调用JSON.parse（str）方法，把数据库中取出来的字符串转为cart对象使用.2.e.target表示点击的元素，我们利用if语句判断是否点击的是正确的按钮，所以给-，+，删除按钮加上类名。3.遍历获取到的数组，每次循环使str+=页面中要设置的内容，如下代码。
模拟加入购物车的特效（Vue）
qinsangdilvzhi的博客
04-18 1622
点击加入购物车，会弹出一个紫色小球掉入购物车 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta http-equiv="X-UA-Compatible"...
抛物线动画-加入购物车的小球
夕空
11-27 385
声明：demo转自https://www.zhangxinxu.com/wordpress/2013/12/javascript-js-%E5%85%83%E7%B4%A0-%E6%8A%9B%E7%89%A9%E7%BA%BF-%E8%BF%90%E5%8A%A8-%E5%8A%A8%E7%94%BB/ 先贴上核心代码parabola.js： /*! * by zhangxinxu(.c...
SpingBoot的项目实战--模拟电商【3.购物车模块】
最新发布
m0_74315688的博客
01-03 2084
购物车的相关内容
Web基础学习笔记-JavaScript
Jak的博客
08-30 290
一.Javascript概述 什么是Javascript： 是一种网页的编程技术，实现页面的动态交互效果，是一种基于对象和事件驱动的解释性语言。 Javascript的作用： 常用于实现页面验证，动态显示等效果 Javascript的写法 方式一：直接定义在事件中 方式二：方法写在&lt;head&gt;里的&lt;script&gt;中 方式三：将代码写在单独的js文件中，在ht...
项目-Java Web购物车-JSP实现
热门推荐
Co_zy的博客
07-20 3万+
登录注册功能 login.jsp &amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &a
uniapp实现购物车功能
pumpkin_truck的博客
09-07 1万+
uniapp实现购物车功能 周六我看见一个有个公司招聘需要试岗3天，并使用uniapp完成购物车，直播间，地图，首页四个功能方能通过，于是乎，我趁手上没事就打算自己写一遍，虽然我的项目没用到，但是多掌握点总没错。今天就来第一个——购物车 因为没写接口，上面的数据我都是使用的模拟数据搭建而成，主要实现的是它件数的增加减少与支付总价格的逻辑关系，还有左边的全选和全不选。 首先第一步，我们把页面先搭建出来 <template> <view> //购物车没商品出现的页面 <v
uni-app实现购物车多选计算功能
小菜吉的博客
07-23 737
实现购物车功能
jQuery - animate()模拟加入购物车飞入效果.zip
09-23
然后，我们可以选择一个元素（例如商品图标），并使用animate()方法来改变其位置，模拟飞入购物车的动作。假设我们有一个id为"product-icon"的商品图标，我们可以这样编写jQuery代码： ```javascript $("#product-...
模拟购物车
01-24
通过以上步骤，我们可以创建一个基本的JavaScript模拟购物车系统。这个系统可以作为学习原生JavaScript以及前端开发的一个良好实践项目，同时也为更复杂的电商功能提供了基础。在不断迭代和优化中，我们可以逐步提高...
模拟当当购物车，基础功能齐全
03-21
在本项目中，我们模拟了当当网的购物车功能，...总之，这个项目是一个很好的学习和实践前端开发基础的平台，涵盖了网页构建、交互设计和基本的编程逻辑，对于提升 js 购物车功能的实现和前端开发能力有着积极的作用。
js jquery 加入购物车动画特效
04-29
"js jQuery 加入购物车动画特效"就是一个很好的例子，它利用JavaScript和jQuery库为用户创建了一个商品被添加到购物车的生动动画。这个特效可以使得网站看起来更专业、更吸引人，增加用户的购买意愿。 首先，jQuery...
加入购物车抛物线动效-基于Taro.zip
07-28
【标题】"加入购物车抛物线动效-基于Taro.zip" 提供的是一个使用Taro框架实现的电商应用中的购物车抛物线动画效果的示例代码。Taro是一款开源的多端开发框架，它允许开发者用React的语法写出代码，然后编译到微信小...
js 基础 ---实现放大镜的效果
freesky的专栏
07-19 9137
js 基础 ---实现放大镜的效果 能利用原生的js是非常重要的，所以对于仿照电商的商品放大图做出了这个放大镜 的效果。在这个例子中，放大镜跟随着鼠标的移动而移动，大盒的图片移动方向与小盒子图片的移动方向是相反的，它们的放缩比例是相同的,具体的实现案例如下： 第一种方法： 放大镜效果 body{position: relative;} *{ma
js实现百度搜索接口及链接功能
freesky的专栏
09-22 8957
js实现百度搜索接口及链接功能 anchor *{ margin:0; padding:0; } #wei{ width:500px; height:600px; margin:0 auto; border:0px solid gray; } #wei input{ width:476
Web 基础学习之 JS ，循环练习
freesky的专栏
07-08 4708
1.判断闰年          var i; for(i=1980;i { if( i % 4 == 0 && i % 100 != 0 || i % 400 == 0) document.write( i + " "); } 2.九九乘法表 var i, j; for(i=0;i { for(j=1;j { document.write( i + "*"+ j
Js基础学习之-- 利用正则表达式验证 模拟注册界面
freesky的专栏
07-27 4297
注册界面 要求：用户名只能是字母或者数字或者下划线，不能以数字开头，用户名长度在6到20之间 密码两次验证必须一致，用户名密码不能为空。 模拟注册 *{margin:0; padding:0; font-size:14px; font-famliy:"微软雅黑"; font-style:normal; } body{backgr
用js写一个商城小程序
08-13
### 回答1： 好的，这是一种可以使用 JavaScript 来创建商城小程序的方法： 1. 首先，你需要准备开发环境。这通常包括安装 Node.js 和相应的包管理工具（比如 npm 或 yarn）。 2. 然后，你需要使用一个框架来开发小程序。有许多不同的框架可供选择，如： - 微信小程序官方提供的开发框架：https://developers.weixin.qq.com/miniprogram/dev/index.html - Taro：https://taro.aotu.io/ - React Native for WeChat：https://github.com/react-native-community/react-native-wechat 3. 在选择了开发框架后，你可以按照框架的文档开始创建小程序。通常情况下，这包括创建 HTML、CSS 和 JavaScript 文件，并使用框架提供的 API 来编写小程序的逻辑。 4. 在开发过程中，你可以使用微信开发者工具来查看小程序的效果。该工具可以模拟小程序在真机上的运行效果，方便你调试代码。 5. 当你的小程序开发完成后，你可以使用微信开发者工具将小程序发布到微信小程序平台。在这之后，小程序就可以被用户下载并使用了。 希望这些信息对你有帮助！ ### 回答2： 商城小程序是一种通过JavaScript编写的移动应用程序，用于提供在线购物和交易服务。以下是一个简单的商城小程序的代码示例： 1. 首先，我们需要在HTML中创建一个包含商城页面布局的结构，包括商品列表、购物车和支付按钮等元素。 ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>商城小程序</title> </head> <body> <h1>欢迎来到商城小程序</h1> <div id="shop"> <h2>商品列表</h2> <ul id="product-list"> <li>商品1</li> <li>商品2</li> <li>商品3</li> </ul> <h2>购物车</h2> <ul id="cart"> <!-- 购物车中的商品将在JS代码中动态添加 --> </ul> <button id="pay-btn">支付</button> </div> <script src="main.js"></script> </body> </html> ``` 2. 接下来，我们需要在JavaScript代码中编写实现商城功能的逻辑。首先，我们创建一个变量来存储购物车中的商品。 ```javascript // main.js // 购物车数组 let cartItems = []; // 找到商品列表和购物车元素 const productList = document.getElementById('product-list'); const cart = document.getElementById('cart'); // 为每个商品添加点击事件 productList.addEventListener('click', function(event) { // 获取点击的商品名称 const itemName = event.target.innerText; // 将商品添加到购物车数组中 cartItems.push(itemName); // 创建购物车中的商品元素 const cartItem = document.createElement('li'); cartItem.innerText = itemName; // 将购物车中的商品元素添加到购物车 cart.appendChild(cartItem); }); // 为支付按钮添加点击事件 const payButton = document.getElementById('pay-btn'); payButton.addEventListener('click', function() { // 打印购物车中的商品列表 console.log(cartItems); }); ``` 以上代码示例中，我们创建了一个空的购物车数组，并使用`addEventListener`方法为商品列表中的每个商品添加了点击事件。当用户点击某个商品时，商品的名称将被添加到购物车数组中，并在购物车显示。同时，点击支付按钮时，购物车中的商品列表将被打印在浏览器的控制台中。 这只是一个简单的商城小程序的代码示例，实际的商城小程序通常还包括更多功能，如商品搜索、加入购物车的数量显示、商品详情页面等。但这个示例应该能够帮助你开始编写自己的商城小程序。 ### 回答3： 商城小程序是一种基于JS语言编写的小程序，通过使用JS编写代码，可以实现商城小程序的各种功能。以下是一个简单的示例教程，展示如何用JS编写一个商城小程序。 首先，我们需要创建一个名为"商城小程序"的文件夹，并在文件夹内创建一个名为"index.html"的HTML文件。在HTML文件中，我们需要引入必要的JS库，例如： ```html <script src="jquery.min.js"></script> <script src="shop.js"></script> ``` 其中，"jquery.min.js"是一个流行的JS库，用于简化DOM操作；"shop.js"则是我们编写的商城小程序JS代码的文件。 接下来，我们在"shop.js"文件中编写具体的商城小程序代码。下面是一个简单的示例： ```js // 获取商品列表的函数 function getProducts() { // 发送AJAX请求，获取后台商品数据 $.ajax({ url: "getProducts.php", success: function (response) { var products = JSON.parse(response); // 解析后台返回的商品数据，并进行相应的操作 // ... } }); } // 添加商品到购物车的函数 function addToCart(product) { // 发送AJAX请求，将商品加入购物车 $.ajax({ url: "addToCart.php", data: product, success: function (response) { // 处理加入购物车的结果 // ... } }); } // 其他功能函数的定义，例如显示购物车、结算等 // 页面加载完成后执行的操作 $(document).ready(function () { getProducts(); // 调用获取商品列表的函数 }); ``` 以上示例代码中，我们首先定义了几个函数，例如"getProducts"函数用于获取商品列表，"addToCart"函数用于将商品加入购物车。然后，我们使用jQuery的`$(document).ready`方法，在页面加载完成后调用"getProducts"函数来获取商品列表。 在实际开发中，你可以根据需求编写更多的功能函数，并通过事件监听等方式来触发相应的操作。 最后，在服务器上配置相应的后台接口，使前端的AJAX请求能够与后台进行数据交互。这样，你就可以在微信开发者工具或其他小程序开发工具中预览并测试你的商城小程序了。 当然，以上仅是一个简单的示例，实际的商城小程序需要结合具体的需求来设计和实现。希望这个回答对你有所帮助。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值