zoukankan      html  css  js  c++  java
  • 原生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不止一个,那么需要先实现出一个的效果,然后通过传参,来解决多个的计算!

    好了,今天就到这里,明天继续!

  • 相关阅读:
    单片机爬坑记-02-资源紧缺
    单片机爬坑记-01-内核差异
    操作系统-第6章习题解析
    操作系统-第5章习题解析
    操作系统-第4章习题解析
    操作系统-第3章习题解析
    操作系统-第2章习题解析
    操作系统-第1章习题解析
    BugKu之xxx二手交易市场
    BugKu之备份是个好习惯
  • 原文地址:https://www.cnblogs.com/web001/p/7989458.html
Copyright © 2011-2022 走看看