<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>练习</title>
</head>
<style>
*{padding:0;margin:0;}
em,i{font-style:normal;font-size:20px;margin:0 20px;}
input{width:50px;height:50px;text-align:center;line-height:50px;}
</style>
<script>
window.onload=function(){
var oUl=document.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
for(var i=0;i<oLi.length;i++){
fn1(oLi[i]);
}
function fn1(a) {
var oInp=a.getElementsByTagName('input');
var oEm=a.getElementsByTagName('em')[0];
var oSpan=a.getElementsByTagName('span')[0];
var oI=a.getElementsByTagName('i')[0];
var par=parseFloat(oSpan.innerHTML);
oInp[0].onclick = function () {
oEm.innerHTML--;
if (oEm.innerHTML < 0) {
oEm.innerHTML = 0
}
oI.innerHTML = oEm.innerHTML * par + '元';
};
oInp[1].onclick = function () {
oEm.innerHTML++;
oI.innerHTML = oEm.innerHTML * par + '元';
};
}
}
</script>
<body>
<ul>
<li>
<input type="button" value="-">
<em>0</em>
<input type="button" value="+">
<p>单价<span>12.5元</span>;合计<i>0元</i></p>
</li>
<li>
<input type="button" value="-">
<em>0</em>
<input type="button" value="+">
<p>单价<span>20.5元</span>;合计<i>0元</i></p>
</li>
<li>
<input type="button" value="-">
<em>0</em>
<input type="button" value="+">
<p>单价<span>9.5元</span>;合计<i>0元</i></p>
</li>
<li>
<input type="button" value="-">
<em>0</em>
<input type="button" value="+">
<p>单价<span>10.5元</span>;合计<i>0元</i></p>
</li>
</ul>
<div>
你购买的商品合计<b>0</b>件;共<span>0</span>元
</div>
</body>
</html>