<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10.淘宝商品价格计算实例</title>
<!-- <script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script> -->
<style type="text/css">
li{line-height: 26px}
</style>
</head>
<body>
<ul id="list">
<li>
<input type="button" value="-">
<strong>0</strong>
<input type="button" value="+">
单价：<em>20元</em>
小计：<span>0元</span>
</li>
<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>12.5元</em>
小计：<span>0元</span>
</li>
<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>12.5元</em>
小计：<span>0元</span>
</li>
</ul>
</body>
</html>
<script type="text/javascript">
window.onload=function (){
var oList=document.getElementById('list');
var aLi=oList.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++){
fn1(aLi[i]);
}
}
function fn1(oLi){
var aBtn=oLi.getElementsByTagName('input');
var aStrong=oLi.getElementsByTagName('strong')[0];
var aEm=oLi.getElementsByTagName('em')[0];
var aSpan=oLi.getElementsByTagName('span')[0];
var n1=parseFloat(aStrong.innerHTML);
var n2=parseFloat(aEm.innerHTML);
aBtn[0].onclick=function(){
n1--;
if(n1<0){
n1=0;
}
aStrong.innerHTML=n1;
aSpan.innerHTML=n1*n2+'元';
}
aBtn[1].onclick=function(){
n1++;
aStrong.innerHTML=n1;
aSpan.innerHTML=n1*n2+'元';
}
}
</script>