关于购物车的练习

最新推荐文章于 2024-07-15 13:17:25 发布

Head Above Water

最新推荐文章于 2024-07-15 13:17:25 发布

阅读量156

点赞数

文章标签： html javascript

本文链接：https://blog.csdn.net/qq_39227659/article/details/103916595

版权

最近学习了js中的DOM和BOM，有个关于购物车的练习，可以练习一下加深对知识点的巩固。

分析如何做出购物车

1.JS最开始学习的存储多种数据的采用的是数组来存储，由于目前我所学的js中还没有涉及到键值对的存储方式，所以存储类似于键值对的数据，采用二维数组来存储： [[“商品名称1”,“单价1”]，[“商品名称2”,“单价2”] ,[“商品名称3”,“单价3”]…]

			var arrData=[
					['牙膏',12.5],
					['毛巾',10],
					['牙刷',5.5],
					['被子',250],
					['电脑',4500],
					['鼠标',134],
					['手机',998],
					['充电宝',300],
					['移动硬盘',500],
					['键盘',100]
				];

2.最开始的html页面，有一个列表(< ul ></u l>)来分别显示二维数组中每一行的值。每个< li >< /li >标签中不仅包含二维数组中的一行数据，还应该包含控制商品添加和减少的按钮< button >< /button >。最后还应该有商品总共多少钱，和商品总共对应的总价。

2.1.最开始的页面布局（body标签中）：
< ul id=“list”>
< !–< li>
< div class=“name”>牙膏< /div>
< input type=“button” value="-" />
< strong>0< /strong>
< input type=“button” value="+" />
单价：< em>12.3元< /em>
小计：< span>0元< /span>
< /li >
- - >
< /ul>
< p >
商品合计共：
< span id=“numbers”>0< /span>
件，共花费了：
< span id=“all”>0< /span>
元< br />
< /p>
2.2.二维数组对应的< li >< /li >以及商品加减的按钮，通过for循环的方式添加到body中：
function show(datas){
var strHtml = “”;// 用于拼接html内容
for(var i=0;i<datas.length;i++){
var data = datas[i];// data是数组
strHtml += ‘< li>’
+’< div class=“name”>’+data[0]+’< /div>’
+’< input type=“button” value="-" class=“des”/>’
+’< strong class=“num”>0< /strong>’ // 数量
+’< input type=“button” value="+" class=“add”/> ’
+’：< em>’+data[1]+‘元< /em>’ // 单价
+’：< span>0元< /span>’ // 总价
+’< /li>’;
}
document.getElementById(“list”).innerHTML = strHtml;
}
基本的页面布局也就完成了：

3.1既然页面的数据添加成功，我们就可以获取页面上相应的数据了，获取数据的方式有很多：
document.getElementById()、document.getElementsByClassName()、document.getElementsByTagName()，他们分别通过id获取单个标签，通过class获取一组class相同的标签组（返回值是数组），通过标签名获取一组标签名相同的标签组（返回值是数组）。其实可以看getElement 是否有 “s”，有就是多个元素嘛，没有就是一个，可以便于区分。
3.2还有通过DOM获取元素的父子，兄弟节点:
1. 找孩子
node.childNodes, 孩子中包含文本节点。
node.children, 只找标签类型的节点。
firstChild – 可能是文本节点
firstElementChild – 标签节点
lastChild – 可能是文本节点
lastElementChild – 标签节点
2. 找父节点
node.parentNode , 找父节点
node.offsetParent, 找有定位的父节点，如果没有有定位的父节点，找body.
3. 找兄弟:
previousSibling – 找上一个兄弟，可能是文本节点
previousElementSibling – 找上一个兄弟, 找到的是标签节点
nextSibling — 找下一个兄弟，可能是文本节点
nextElementSibling - 找下一个标签兄弟
3.3我们通过上面的一些方法就可以实现获取body里面的所有的标签元素了。首先我们获取"-"（减号）的按钮。
var des=document.getElementsByClassName(“des”);
获取了之后，给每一个“-（减号）”按钮的添加点击事件，通过for循环的方式，因为每一个减号按钮都和属于一行，所有减号按钮所在的行的所有的标签数据我们都可以通过DOM的方法获取：
for(var i=0;i<des.length;i++){
des[i].οnclick=function(){//添加点击事件
number=this.nextElementSibling;//通过this来判断获取商品数量的标签
price=number.nextElementSibling.nextElementSibling;//同上
sum=price.nextElementSibling;//同上

			if(number.innerText==0){//判断当数量为0时，不能再减了，符合生活逻辑
				alert("不能减了")
			}else{
				number.innerText--;//点击一次商品的数量就减少
				var snumber_des=document.getElementById('numbers');//获取总共的商品的数量标签
				snumber_des.innerText--;//点击一次总的商品也减少一次。
				var all_des=document.getElementById("all");//获取总共的商品价格标签
				all_des.innerText=parseFloat(all_des.innerText)-parseFloat(price.innerText);//总共商品的价格其实是和单价相对应的，你点击对应商品的添加或减少按钮，都会伴随这单价的增加与减少，同时总价格也会增加减少。
			}
			sum.innerText=parseFloat(price.innerText)*number.innerText+"元";//因为获取的值要参与运算，商品价格包含小数，所以全部内容强转为float，浮点数，多余的非数字类型的值都会被去除。最后显示的时候添加  ’元‘ 让其数据易懂一点儿。
			
		}
		
	}

3.4加法与减法的方法类似。

##附上源码：
< !DOCTYPE HTML>
< html>

< head>
	< meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	< title>无标题文档</title>
	<link rel="stylesheet" type="text/css" href="css/base.css"/>
	<style type="text/css">
		.name{
			display: inline-block;
			width: 80px;
			background: cadetblue;
			color: #FFF;
			text-align: center;
		}
		li{
			padding: 4px 0;
		}
	</style>
</head>

<body>

	<ul id="list">
		<!--<li>
			<div class="name">牙膏</div>
			<input type="button" value="-" />
			<strong>0</strong>
			<input type="button" value="+" /> 
			单价：<em>12.3元</em>
			小计：<span>0元</span>
		</li>
		 -->
	</ul>
	<p>
		商品合计共：
		<span id="numbers">0</span>
		件，共花费了：
		<span id="all">0</span>
		元<br />
	</p>
</body>
<script type="text/javascript">
	// 商品信息相关数据
	var arrData=[
					['牙膏',12.5],
					['毛巾',10],
					['牙刷',5.5],
					['被子',250],
					['电脑',4500],
					['鼠标',134],
					['手机',998],
					['充电宝',300],
					['移动硬盘',500],
					['键盘',100]
				];
	
	// 1. 声明一个方法，将数据处理为html内容，写入到html页面中
	function show(datas){
		var strHtml = "";// 用于拼接html内容
		for(var i=0;i<datas.length;i++){
			var data = datas[i];// data是数组
			strHtml += '<li>'
			+'<div class="name">'+data[0]+'</div>'
			+'<input type="button" value="-" class="des"/>'
			+'<strong class="num">0</strong>' // 数量
			+'<input type="button" value="+" class="add"/> '
			+'：<em>'+data[1]+'元</em>' // 单价
			+'：<span>0元</span>' // 总价
		+'</li>';	
		}
		document.getElementById("list").innerHTML = strHtml;
	}
	show(arrData);// 调用方法
	//获取总商品的数量
	//1.获取<li></li>标签中的 "-" 的<button></button>
	var des=document.getElementsByClassName("des");
	//2.给每一个减号按钮添加点击事件
	for(var i=0;i<des.length;i++){
		des[i].onclick=function(){
			number=this.nextElementSibling;
			price=number.nextElementSibling.nextElementSibling;
			sum=price.nextElementSibling;
			
			if(number.innerText==0){
				alert("不能减了")
			}else{
				number.innerText--;
				var snumber_des=document.getElementById('numbers');
				snumber_des.innerText--;
				var all_des=document.getElementById("all");
				all_des.innerText=parseFloat(all_des.innerText)-parseFloat(price.innerText);
			}
			sum.innerText=parseFloat(price.innerText)*number.innerText+"元";
			
		}
		
	}
	var add=document.getElementsByClassName("add");
	for(var i=0;i<add.length;i++){
		add[i].onclick=function(){
			number=this.previousElementSibling;
			price=number.nextElementSibling.nextElementSibling;
			sum=price.nextElementSibling;
			number.innerText++;
			sum.innerText=parseFloat(price.innerText)*number.innerText+"元";
			var snumber_add=document.getElementById("numbers");
			snumber_add.innerText++;
			
			var all_add=document.getElementById("all");
			all_add.innerText=parseFloat(all_add.innerText)+parseFloat(price.innerText);
		}
	}
	
	var sum=document.getElementsByClassName('li').lastElementChild;
< /script>

< /html>

Head Above Water

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于购物车的练习

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫