用JS实现商品加减与统计结果

最新推荐文章于 2022-05-20 18:43:51 发布

静颍流年

最新推荐文章于 2022-05-20 18:43:51 发布

阅读量787

点赞数 2

本文链接：https://blog.csdn.net/weixin_43571052/article/details/89067597

版权

效果图

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style type="text/css">
    </style>
</head>
<body>
    <ul>
        <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>
            商品合计共：<span>0</span> 件，共花费了：<span>0</span>元<br />
            所购商品中最贵的商品单价是：<span>0</span>元
            </p>
            
    <script>
            var aLi = document.getElementsByTagName("li");
            var aSpan = document.getElementsByTagName("p")[0].getElementsByTagName("span");
            var iNum = 0;
            var iPrice = 0;
            for(var i=0;i<aLi.length;i++){
                    price(aLi[i]);
            }
            function price(oParent){
                    //获取每个Li里的各个标签
                    var aBtn = oParent.getElementsByTagName("input");
                    var oStr = oParent.getElementsByTagName("strong")[0];
                    var oEm = oParent.getElementsByTagName("em")[0];
                    var oSpan = oParent.getElementsByTagName("span")[0];
                    //商品减法
                    aBtn[0].onclick = function(){
                            if(oStr.innerHTML>0){
                                    oStr.innerHTML--;
                                    iNum--;
                                    iPrice -=parseFloat(oEm.innerHTML);
                                    oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStr.innerHTML+"元";
                                    aSpan[0].innerHTML = iNum;
                                    aSpan[1].innerHTML = iPrice;
                                    aSpan[2].innerHTML = maxPrice();
                            }
                    }
                    //商品加法
                    aBtn[1].onclick = function(){
                            oStr.innerHTML++;
                            iNum++;
                            iPrice += parseFloat(oEm.innerHTML);
                            oSpan.innerHTML = parseFloat(oEm.innerHTML)*oStr.innerHTML+"元";
                            aSpan[0].innerHTML = iNum;
                            aSpan[1].innerHTML = iPrice;
                            aSpan[2].innerHTML = maxPrice(); 
                    }
            }
            //获取所选商品中最大单价
            function maxPrice(){
                   var oEm = document.getElementsByTagName("em");
                   var oStr = document.getElementsByTagName("strong");
                   var arr = [];
                   var iMax = 0;
                   for(i=0;i<oStr.length;i++){
                        if(oStr[i].innerHTML!=0){
                           arr.push(parseFloat(oEm[i].innerHTML));
                        }
                   }
                   for(i=0;i<arr.length;i++){
                           if(iMax<arr[i]){
                                   iMax = arr[i];
                           }
                   }
                   return iMax;
            }


    </script>
</body>
</html>

知识点

getElementById() 通过id属性获取一个元素节点对象。

getElementsByTagName（）通过标签名获取一组元素节点对象。

parseFloat（）可解析一个字符串，并返回一个浮点数，如果字符串中的首个字符串不是数字，将返回NaN。

静颍流年

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
用JS实现商品加减与统计结果

效果图代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
复制链接

扫一扫