原生JS计算商品价格 - 麦兜家园

通常购物网站中会有一些价格计算，合计或者小计，今天写一个简单的计算商品价格的小例子：

先来看看布局：

<body>
   <ul id="lists">
       <li>
           <input type="button" value="-">
           <b>0</b>
           <input type="button" value="+">
           单价：<em>10.5元</em>
           小计：<span>0元</span>
       </li>
       <li>
           <input type="button" value="-">
           <b>0</b>
           <input type="button" value="+">
           单价：<em>12.5元</em>
           小计：<span>0元</span>
       </li>
       <li>
           <input type="button" value="-">
           <b>0</b>
           <input type="button" value="+">
           单价：<em>12.5元</em>
           小计：<span>0元</span>
       </li>
       <li>
           <input type="button" value="-">
           <b>0</b>
           <input type="button" value="+">
           单价：<em>32.0元</em>
           小计：<span>0元</span>
       </li>
   </ul>
</body>

效果图如下：

看看js代码：

<script>
    window.onload=function(){
        var oUl=document.getElementById("lists");
        var aLi=oUl.getElementsByTagName("li");
        for(var i=0;i<aLi.length;i++){
            fn(aLi[i]);
        }

        function fn(aLi){
            var aBtn=aLi.getElementsByTagName("input");
            var oEm=aLi.getElementsByTagName("em")[0];
            var oSpan=aLi.getElementsByTagName("span")[0];
            var oBtxt=aLi.getElementsByTagName("b")[0];
            var num1=Number(oBtxt.innerHTML);
            var num2=parseFloat(oEm.innerHTML);
            aBtn[0].onclick=function(){
                num1--;
                if(num1<0){ //z这里判断若为0，不能再减
                    num1=0
                }
                oBtxt.innerHTML = num1;
                oSpan.innerHTML=num1*num2+"元"
            };
            aBtn[1].onclick=function(){
                num1++;
                oBtxt.innerHTML = num1;
                oSpan.innerHTML=num1*num2+"元"
            }
        }


    }

</script>

因为li不止一个，那么需要先实现出一个的效果，然后通过传参，来解决多个的计算！

好了，今天就到这里，明天继续！

posted on 2017-12-05 21:19 麦兜家园阅读(4356) 评论(0) 收藏举报

刷新页面返回顶部