js学习-数据类型转换小案例_js数据类型转换课堂小案例-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_48235555/article/details/107114337

<!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);          // '0'    =>   0
      var n2 = parseFloat(oEm.innerHTML);             // '12.5元' => 12.5
      
      aBtn[0].onclick = function (){
         n1 --;
         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>

<p>
商品合计共：0件，共花费了：0元<br />
其中最贵的商品单价是：0元
</p>

</body>
</html>