<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<script>
window.onload = function()
{
var oUl = document.getElementById('list');
var oTotalPrice = document.getElementById('totalPrice');
var oExpensive = document.getElementById('expensive');
var aLi = oUl.getElementsByTagName('li');
var aSpan = oUl.getElementsByTagName('span');
var aEm= oUl.getElementsByTagName('em');
var aFont = oUl.getElementsByTagName('font');
function fnComputer(aLi){
//var aLi = oUl.getElementsByTagName('li')[0];
var aInput = aLi.getElementsByTagName('input');
var aSpan = aLi.getElementsByTagName('span')[0];
var aEm= aLi.getElementsByTagName('em')[0];
var aFont = aLi.getElementsByTagName('font')[0];
aInput[1].onclick = function(){
var nProNum = parseInt(aSpan.innerHTML)+1;
aSpan.innerHTML = nProNum;
var nProPrice = parseFloat(aEm.innerHTML);
var totalPrice = nProPrice*nProNum;
aFont.innerHTML = totalPrice+ '元';
sum();
}
aInput[0].onclick = function(){
var nProNum = parseInt(aSpan.innerHTML)-1;
if(nProNum<0){
nProNum=0;
}
aSpan.innerHTML = nProNum;
var nProPrice = parseFloat(aEm.innerHTML);
var totalPrice = nProPrice*nProNum;
aFont.innerHTML = totalPrice+ '元';
sum();
}
}
for(var i=0;i<aLi.length;i++){
fnComputer(aLi[i]);
}
function sum(){
var totalPrice = 0;
var nProNum = 0;
var nExpenPrice = 0;
for(var i=0;i<aFont.length;i++){
totalPrice += parseFloat(aFont[i].innerHTML);
nProNum += parseInt(aSpan[i].innerHTML);
if(aSpan[i].innerHTML != 0){
if(parseFloat(nExpenPrice)<parseFloat(aEm[i].innerHTML)){
nExpenPrice = aEm[i].innerHTML;
}
}
}
oTotalPrice.innerHTML = '商品总价为：'+totalPrice+'$';
oExpensive.innerHTML = '最贵商品的单价：'+nExpenPrice+', 共'+nProNum+'件';
}
};
</script>
<body>
<ul id="list">
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>20$</em> <font>0元</font></li>
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>11$</em> <font>0元</font></li>
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>100$</em> <font>0元</font></li>
<li><input type="button" value="-"> <span>0</span> <input type="button" value="+" > <em>320$</em> <font>0元</font></li>
</ul>
<p id="totalPrice">商品总价为：0$</p>
<p id="expensive">最贵商品的单价：0$ , 共0件</p>
</body>
</html>