原生JS计算商品价格

最新推荐文章于 2023-10-24 22:58:27 发布

weixin_30343157

最新推荐文章于 2023-10-24 22:58:27 发布

阅读量613

点赞数

原文链接：http://www.cnblogs.com/web001/p/7989458.html

版权

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

先来看看布局：

<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].οnclick=function(){
                num1--;
                if(num1<0){ //z这里判断若为0，不能再减
                    num1=0
                }
                oBtxt.innerHTML = num1;
                oSpan.innerHTML=num1*num2+"元"
            };
            aBtn[1].οnclick=function(){
                num1++;
                oBtxt.innerHTML = num1;
                oSpan.innerHTML=num1*num2+"元"
            }
        }


    }

</script>

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

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

转载于:https://www.cnblogs.com/web001/p/7989458.html

weixin_30343157

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
原生JS计算商品价格

通常购物网站中会有一些价格计算，合计或者小计，今天写一个简单的计算商品价格的小例子：先来看看布局：<body> <ul id="lists"> <li> <input type="button" value="-"> <b>0</b> ...
复制链接

扫一扫