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不止一个,那么需要先实现出一个的效果,然后通过传参,来解决多个的计算!

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

  • 相关阅读:
    javascript一个重要知识点:事件。
    null和undifned的区别
    javascript中常用数组方法详细讲解
    在网站中数据缓存的重要性
    谈谈我对闭包知识的深刻理解
    FormData上传文件(不是所有的浏览器都支持)
    iframe+form表单提交数据
    伪AJAX
    ajax之发送post请求
    AJAX之发送GET请求
  • 原文地址:https://www.cnblogs.com/web001/p/7989458.html
Copyright © 2011-2022 走看看