商品加减合计单价 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<script>
window.onload = function (){
    var oUl = document.getElementById('list');
    var aLi = oUl.getElementsByTagName('li');
    
    for( var i=0; i<aLi.length; i++ ){
        fn1(aLi[i]);
    }
    
    function fn1(oLi){
        var aBtn = oLi.getElementsByTagName('input');
        var oStrong = oLi.getElementsByTagName('strong')[0];
        var oEm = oLi.getElementsByTagName('em')[0];
        var oSpan = oLi.getElementsByTagName('span')[0];
        var n1 = Number(oStrong.innerHTML);            // 从HTML中获取的元素都是字符串，number()函数把字符串0变成了数字0
        var n2 = parseFloat(oEm.innerHTML);            
        
        aBtn[0].onclick = function (){
            n1 --;  //如果没用number()函数把获取到的字符串变成数字，则只能使用n1++,不能用n1+=1。因为“+”是把数字变成字符串
            if ( n1 < 0 ) {
                n1 = 0;
            }
            oStrong.innerHTML = n1;
            oSpan.innerHTML = n1*n2 + '元';
        };
        aBtn[1].onclick = function (){
            n1 ++;
            oStrong.innerHTML = n1;
            oSpan.innerHTML = n1*n2 + '元';
        };
    }
};
</script>
</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>

</body>
</html>

 

posted @ 2017-03-16 13:24  念念念不忘  阅读(150)  评论(0)    收藏  举报