代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js购物?计算商品价格例子</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>
<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>
<script>
var aLi = document.getElementsByTagName("li");
var aStrong = document.getElementsByTagName("strong");
var aEm = document.getElementsByTagName("em");
var oP = document.getElementsByTagName("p")[0];
var aSpan = oP.getElementsByTagName("span");
var number = 0;
var price = 0;
for (var i = 0; i < aLi.length; i++) {
Price(aLi[i]);
}
function Price(obj) {
var aIn = obj.getElementsByTagName("input");
var oStrong = obj.getElementsByTagName("strong")[0];
var oEm = obj.getElementsByTagName("em")[0];
var oSpan = obj.getElementsByTagName("span")[0];
aIn[0].onclick = function() {
if (oStrong.innerHTML > 0) {
number--;
oStrong.innerHTML--;
price -= parseFloat(oEm.innerHTML);
oSpan.innerHTML = parseFloat(oEm.innerHTML) * oStrong.innerHTML + "元";
aSpan[0].innerHTML = number;
aSpan[1].innerHTML = price;
aSpan[2].innerHTML = getMax();
}
}
aIn[1].onclick = function() {
number++;
oStrong.innerHTML++;
price += parseFloat(oEm.innerHTML);
oSpan.innerHTML = parseFloat(oEm.innerHTML) * oStrong.innerHTML + "元";
aSpan[0].innerHTML = number;
aSpan[1].innerHTML = price;
aSpan[2].innerHTML = getMax();
}
}
function getMax() {
var arr = [];
for (var i = 0; i < aStrong.length; i++) {
if (aStrong[i].innerHTML != 0) {
arr.push(parseFloat(aEm[i].innerHTML));
}
}
return aStrong == 0 ? 0 : arr.sort(function(a, b) {
return b - a
})[0];
}
</script>
</body>
</html>
