购物车结算功能
布局:
<ul>
<li></li>
<li></li>
<li></li>
…………
</ul>
<p><p>
每一个li标签代表每一个商品 里面有+ -商品数量功能 商品单价 以及小计
P标签中实现 商品总件数 商品总价格 已经购买的商品中最贵的价格是多少
实现思路:
第一步:首先完成一个商品的+ -数量及小计功能
代码:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</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>
</ul>
<p>
商品合计共:<span>0</span>件,共花费了:<span>0</span>元<br />
所购商品中最贵的商品单价是:<span>0</span>元
</p>
<script type="text/javascript">
var aBtn=document.getElementsByTagName('input');//加减按钮
var oStr=document.getElementsByTagName("strong")[0];//数量
var oSpan=document.getElementsByTagName('span')[0];//小计
var oEm=document.getElementsByTagName('em')[0];//单价
var number=parseFloat(oStr.innerHTML);
var sumprice=0;//小计
aBtn[0].onclick=function(){
if(number>0){number--;sumprice-=parseFloat(oEm.innerHTML);}
oStr.innerHTML=number;
oSpan.innerHTML=parseFloat(oEm.innerHTML)*number+"元"
}
aBtn[1].oncl