javascript购物车

最新推荐文章于 2024-06-18 17:19:20 发布
最新推荐文章于 2024-06-18 17:19:20 发布
阅读量1.3k 收藏 27
点赞数 2
文章标签： javascript购物车
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/style201904/article/details/90762549
版权

购物车

<style type="text/css">
			body,html{
				background-color: whitesmoke;
			}
			.shopBox{
				width: 425px;
				height: 375px;
				background-color: white;
				margin: 0 auto;
				position: relative;
			}
			.shopLine{
				/*background-color: pink;*/
				height: 70px;
				padding: 15px;
				position: relative;
				box-shadow: 3px 3px 3px #dddddd;
				margin-bottom: 3px;
			}
			.shopLine img{
				float: left;
				width: 70px;
				height: 70px;
			}
			.inputBox{
				float: left;
				margin-top: 30px;
				margin-right: 10px;
			}
			.shopDetails{
				float: left;
				margin-left: 20px;
			}
			.shopDetails span{
				display: block;
				margin-bottom: 5px;
			}
			.shopDetails span:nth-child(2){
				color: gray;
				font-size: 13px;
				margin: 8px 0;
			}
			.shopDetails span:nth-child(3){
				color: #e4393e;
				font-size: 16px;
			}
			.shopCalc{
				position: absolute;
				bottom: 10px;
				right: 20px;
				border: 1px solid #9A9A9A;
				line-height: 30px;
				text-align: center;
				border-radius: 5px;
			}
			.calcDown,.calcUp{
				display: inline-block;
				width: 30px;
				height: 30px;
				cursor: pointer;
			}
			.calcNum{
				width: 28px;
				height: 28px;
				border: none;
				text-align: center;
				border-left: 1px solid #9A9A9A;
				border-right: 1px solid #9A9A9A;
				outline: none;
			}
			.shopCart{
				position: absolute;
				width: 100%;
				height: 70px;
				background-color: pink;
				bottom: 0;
				left: 0;
			}
			.shopCon{
				position: relative;
				padding: 0 15px;
			}
			.totalPrices{
				float: left;
				margin-left: 50px;
				line-height: 80px;
			}
		</style>
	</head>
	<body>
		<!--
			1、全选按钮的监听
			2、每一个商品中的复选框 都应该被监听
			3、单个商品的数量的加法
			4、单个商品的数量的减法
			5、数量的额手动输入
			6、总价的联动
		-->
		
		
		<div id="app">
			<div class="shopBox">
				<!--第一个商品-->
				<div class="shopLine">
					<div class="inputBox">
						<input class="sigChecked" type="checkbox" />
					</div>
					<img src="https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg" />
					<div class="shopDetails">
						<span>施华蔻伊采染发膏60ml</span>
						<span>规格:50克</span>
						<span>¥<label class="sigPrices">50</label></span>
					</div>
					<div class="shopCalc">
						<span  class="calcDown">-</span>
						<input class="calcNum" value="1" />
						<span  class="calcUp">+</span>
					</div>
				</div>	
				<!--第二个商品-->
				<div class="shopLine">
					<div class="inputBox">
						<input class="sigChecked" type="checkbox" />
					</div>
					<img src="https:\/\/fjlyl.xyz\/assets\/hairDye\/products (1).jpg" />
					<div class="shopDetails">
						<span>施华蔻伊采染发膏60ml</span>
						<span>规格:50克</span>
						<span>¥<label class="sigPrices">69</label></span>
					</div>
					<div class="shopCalc">
						<span  class="calcDown">-</span>
						<input class="calcNum" value="1" />
						<span  class="calcUp">+</span>
					</div>
				</div>	
				<!--底部-->
				<div class="shopCart">
					<div class="shopCon">
						<div class="inputBox">
							<input class="allChecked" type="checkbox" />全选
						</div>
						<div class="totalPrices">
							总价:¥ <span class="allPrices">0</span>
						</div>
					</div>
				</div>
				
			</div>
		</div>
	</body>
	<script type="text/javascript">
		//商品数组
		var shopLine = document.getElementsByClassName('shopLine');
		//价格数组
		var sigPrices = document.getElementsByClassName('sigPrices');
		//总价
		var allPrices = document.getElementsByClassName('allPrices')[0];
		//减法按钮数组
		var calcDown = document.getElementsByClassName('calcDown');
		//加法按钮数组
		var calcUp = document.getElementsByClassName('calcUp');
		//商品的数量的输入框数组
		var calcNum = document.getElementsByClassName('calcNum');
		//全选按钮
		var allChecked = document.getElementsByClassName('allChecked')[0];
		//单个勾选按钮的数组
		var sigChecked = document.getElementsByClassName('sigChecked');
		
		//全选按钮的监听onchange
		allChecked.onchange = function () {
			var checked = allChecked.checked;//全选按钮的已经被改变的那个值
			//全部的单个复选框  都应该和 全选按钮的值是一致的
			for(var i=0;i<sigChecked.length;i++){
				sigChecked[i].checked = checked;
			}
			arrCheck();
			totalPrices();
		}
		
		for(var i=0;i<shopLine.length;i++){
			//每个单个勾选的监听onchange
			sigChecked[i].onchange = function() {
				//arrChecked  这个数组中相对应的布尔值  来去判断  全选按钮是否被勾选上
				arrCheck();
				var checked = true;//假定全选按钮的值为true
				for(var i=0;i<arrChecked.length;i++){
					if(arrChecked[i] == false){
						checked = false;//只要有一个没选上  全选按钮 就没有被选上
						break;
					}
				}
				allChecked.checked = checked;
				totalPrices();
			}
			//加法
			calcUp[i].index = i;//
			calcUp[i].onclick = function () {
				//calcNum[this.index].value
				var num = parseInt(calcNum[this.index].value) + 1;
				
				calcNum[this.index].value = num;
				totalPrices();
			}
			//减法
			calcDown[i].index = i;
			calcDown[i].onclick = function () {
				//字符串 数值的时候  它是有隐式转换的嘛  '3'-1
				var num = parseInt(calcNum[this.index].value);
				num = num == 1?1:num - 1;
				calcNum[this.index].value = num;
				totalPrices();
			}
			//手动输入
			calcNum[i].index = i;
			//onblur监听 input框 脱离焦点的事件
			calcNum[i].onblur = function () {
				var num = calcNum[this.index].value;
				//判断是否为数字
				num = isNaN(num)? 1 : Math.ceil(num);
				
				num = num < 0 ? 1 : num;
				
				calcNum[this.index].value = num;
				totalPrices();
			}
		}
		//每次把变动的sigChecked的每个布尔值都重新获得
		var arrChecked = [];
//		var cart = [
//				{shopId:1,isChecked:true,prices:50,shopName:'name0',num:5},
//				{shopId:2,isChecked:true,prices:69,shopName:'name1',num:5}
//			]
		//一开始就刷新数组里的值
		arrCheck();
		//每个单个勾选的布尔值的数组
		function arrCheck () {
			for(var i=0;i<sigChecked.length;i++){
				arrChecked.splice(i,1,sigChecked[i].checked);
			}
			console.log(arrChecked);
			//totalPrices();
		}
		
		//计算总价  每处有变动就需要做计算
		function totalPrices () {
			var totalPrices = 0;
			for(var i=0;i<arrChecked.length;i++){
				if(arrChecked[i]){
					//单价*数量
					totalPrices += parseFloat(sigPrices[i].innerHTML) * calcNum[i].value
				}
			}
			allPrices.innerHTML = totalPrices;
		}
		
	</script>

效果图
在这里插入图片描述

大可&不必
关注
Javascript07购物车案例
m0_63772104的博客
03-12 1929
今天给大家分享用JS模拟购物车的案例 废话就不多说了，直接上代码 !DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table border=""> <tr> <td>全选<input typ
购物车 javascript
u011563656的博客
03-16 584
购物车                        商品名称价格数量小计        book110.00                 10.00              book25.00                 5.00       总计:  15.00          
javascript实现商品购物车功能
09-27
纯javascript实现购物车，完成从商品页向购物车中添加商品，购物车中删除商品，更改商品数量，删除商品，全选单选等购物车操作，涉及到javascript中BOM,DOM,json,cookie等知识点的应用操作，综合性较强，对于javascript学习进阶有一定的帮助。
javascript 购物车
weixin_34192816的博客
04-23 100
var cookie={        //读取COOKIES,n为COOKIE名          Get:function(n){              var re=new RegExp(n+'=([^;]*);?','gi');              var r=re.exec(document.cookie)||[];              return (r.length&...
基础购物车（Javascript）
2301_81449444的博客
06-18 409
使用Javascript写一个基础购物车，其中包含商品数量加加减减，下面的总价和总数量跟着商品数量变动，还可以自己添加需要的商品。
JS实现的购物车
weixin_33724059的博客
09-23 76
hoppingCart JScript 文件 //---------------- //read COOKIE function getCookie(cookiename) { var result; var mycookie = document.cookie; var start2 = mycookie.indexOf(cookiename + "="...
JavaScript购物车
m0_75007006的博客
12-17 141
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>购物车</title> <style> .cart { width: 700px; padding: 0 10px 10px; bo
javascript 购物车 有数据库
11-14
javascript 购物车 数据库 根据用户的登录状态，如果用户没有登录，则用户加入到购物车中的产品，存储到session中；如果用户登录，则将用户购物车中的产品存储到数据库中或者从数据库中读取数据显示购物车列表。
javascript购物车案例
weixin_67150631的博客
03-12 3971
JavaScript购物车案例
cartmine:浏览器中的简易JavaScript购物车
05-12
浏览器中的简易JavaScript购物车。 它是什么？ Cartmine是一个客户端Javascript购物车系统，旨在以最少的代码支持基本购物车。 避免设置复杂的数据库，处理数据持久性，会话或复杂的购物车软件。 通过添加具有数据...
JavaScript购物车.zip
08-11
项目介绍：https://blog.csdn.net/weixin_40805686/article/details/99221539 在线演示地址：http://www.weichufeng.cn/csdn/shopCar/shopCar.html
javascript实现简易购物车(高手勿喷)
04-21
用Javascript写的一个简易购物车，主要是对表格的操作。新手。。高手勿喷。。换个积分不容易啊。
基于JavaScript实现购物车功能
10-20
主要为大家详细介绍了基于JavaScript实现购物车功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
HTML+CSS+Javascript 购物车
03-25
总的来说，HTML+CSS+JavaScript购物车项目是Web开发中的一个基础实例，它涵盖了前端开发中的基本技术，同时也展示了如何通过这三种技术实现动态交互功能。通过学习和实践这样的项目，开发者可以深入理解网页开发的...
JavaScript实现购物车
cathei的博客
07-18 8499
    &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Document&lt;/title&gt;     &lt;style&gt;         .wrap{       
js实现购物车
m0_73481765的博客
06-30 3939
我们也添加了一个加入购物车的按钮，当这个按钮被点击时，我们会调用一个名为addToCart的函数。当用户点击“加入购物车”按钮时，商品将被添加到购物车中，并且购物车中商品的数量和总价将显示在HTML页面上。接下来，我们需要显示商品列表。我们将使用JavaScript循环遍历商品数组，并将每个商品的名称、价格和图片添加到HTML页面中。这个函数首先清空购物车HTML中的内容，然后遍历购物车数组，并将每个购物车物品的名称、价格和数量添加到HTML中。这个函数将从商品数组中取出商品，并将它添加到购物车数组中。
JavaScript.购物车
yifei_345678的博客
03-12 1498
今天小阿飞来给大家分享一个简单的购物车案例 直接上代码叭： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>计算每一行总价的功能</title> </head> <body> <table border> <tr> <td>全选<input type="check
JavaScript之购物车
m0_67331668的博客
03-12 2609
今日带来的是关于JavaScript的一个简单的界面版，但是有部分功能还存在着bug需要进一步的完善，请大家谅解，如果有解决方法也可以给我留言哦 一.登录 先看效果图吧 这就是登录界面，登录界面的所有输入都是用了正则判断，点击登录的时候会提示哪里错误，只有完全输入正确才可以进行登录。点击清除会把输入的东西全部清空。输入框也设置了特效，效果图如下 代码如下： <!DOCTYPE html> <html> <head> <meta chars.
javascript购物车代码
最新发布
06-28
JavaScript购物车功能通常是一个常见的前端应用示例，它允许用户添加、删除商品和计算总价。以下是一个简单的JavaScript购物车代码片段的概述： ```javascript // 假设我们有一个产品数组和一个购物车对象 const ...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值