js模拟购物车商品价格的增减

效果图如下所示：比较粗糙哦！吐舌头

代码如下：

<!DOCTYPE HTML>
	<html>
	<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>无标题文档</title>
	<script>
	/*
	重用代码：
	1、尽量保证 HTML 代码结构一致，可以通过父级选取子元素
	2、把核心主程序实现，用函数包起来
	3、把每组里不同的值找出来，通过传参实现
	*/
	window.onload=function(){
	var oUl=document.getElementById('list');
	var aLi=oUl.getElementsByTagName('li');
	var oP=document.getElementsByTagName('p')[0];
	var pSpan=oP.getElementsByTagName("span");
	/*fn(ali[0]);
	fn(ali[1]);
	fn(ali[2]);
	fn(ali[3]);*/
	for(var i=0;i<aLi.length;i++){
	fn(aLi[i]);
	}
	function fn(oLi){
	var oBtn=oLi.getElementsByTagName("input");
	var oStrong=oLi.getElementsByTagName("strong")[0];
	var oEm=oLi.getElementsByTagName("em")[0];
	var oSpan=oLi.getElementsByTagName("span")[0];
	var num=Number(oStrong.innerHTML);
	var price=parseFloat(oEm.innerHTML);
	oBtn[1].onclick=function(){
	num++;
	oStrong.innerHTML=num;
	oSpan.innerHTML=num*price+"元";
	fn2();
	}
	oBtn[0].onclick=function(){
	num--;
	if(num<0){
	num=0;
	}
	oStrong.innerHTML=num;
	oSpan.innerHTML=num*price+"元";
	fn2();
	}
	}
	function fn2(){
	var oStrong=oUl.getElementsByTagName("strong");
	var oEm=oUl.getElementsByTagName("em");
	var oSpan=oUl.getElementsByTagName("span");
	var amountN=0;
	var amountP=0;
	var max_price=[];
	for(var i=0;i<aLi.length;i++){
	amountN+=parseInt(oStrong[i].innerHTML);
	amountP+=parseFloat(oSpan[i].innerHTML);
	if(parseInt(oStrong[i].innerHTML)){
	max_price[max_price.length]=parseFloat(oEm[i].innerHTML);
	}
	}
	max_price.sort(function(a,b){
	return b-a;
	})
	if(amountN==0){
	max_price=0;
	}
	pSpan[0].innerHTML=amountN+"件";
	pSpan[1].innerHTML=amountP+"元";
	pSpan[2].innerHTML=max_price[0]+"元";
	}
	}
	</script>
	</head>

	<body>

	<ul id="list">
	<li>
	<input type="button" value="-" />
	<strong>0</strong>
	<input type="button" value="+" />
	单价：<em>12.5元</em>
	小计：<span>0元</span>
	</li>
	<li>
	<input type="button" value="-" />
	<strong>0</strong>
	<input type="button" value="+" />
	单价：<em>10.5元</em>
	小计：<span>0元</span>
	</li>
	<li>
	<input type="button" value="-" />
	<strong>0</strong>
	<input type="button" value="+" />
	单价：<em>8.5元</em>
	小计：<span>0元</span>
	</li>
	<li>
	<input type="button" value="-" />
	<strong>0</strong>
	<input type="button" value="+" />
	单价：<em>8元</em>
	小计：<span>0元</span>
	</li>
	<li>
	<input type="button" value="-" />
	<strong>0</strong>
	<input type="button" value="+" />
	单价：<em>14.5元</em>
	小计：<span>0元</span>
	</li>
	</ul>

	<p>
	商品合计共：<span>0件</span>，共花费了：<span>0元</span><br />
	其中最贵的商品单价是：<span>0元</span>
	</p>

	</body>
	</html>

js模拟购物车商品价格的增减

猜你喜欢