商品加减,总计

最新推荐文章于 2021-05-29 13:30:39 发布

sjy7329

最新推荐文章于 2021-05-29 13:30:39 发布

阅读量180

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/sunjynyue/article/details/82996842

版权

js 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul id="list">
    <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 id="all">0</span>件，共花费了：<span id="money">0</span>元<br/>
</p>
</body>
<script>
    window.οnlοad=function () {
        var oIpt=document.getElementsByTagName('input');
        var oSpan=list.getElementsByTagName('span');
        var allNum=0;

        for(var i=0;i<oIpt.length;i++){
            oIpt[i].οnclick=function(){
                //点击增加减少
                if(this.value=='+'){
                   var Num=this.parentNode.children[1].innerHTML;
                   Num++;
                   allNum++;
                   this.parentNode.children[1].innerHTML=Num;
                }else{
                    var Num=this.parentNode.children[1].innerHTML;
                    Num--;
                    if(Num<0){
                        this.parentNode.children[1].innerHTML=0;
                    }else{
                        this.parentNode.children[1].innerHTML=Num;
                        allNum--;
                    }
                }
                Num=this.parentNode.children[1].innerHTML; //获取数量
                var Pri=this.parentNode.children[3].innerHTML.replace('元',''); //获取单价
                var Tol=this.parentNode.children[4].innerHTML.replace('元',''); //获取原总价
                Tol=Num*Pri; //计算总价
                this.parentNode.children[4].innerHTML=Tol+'元'; //赋值给总价
                all.innerHTML=allNum;  //计算商品总件数
                //计算总商品总价格
                var allMoney=0;
                for(var i=0;i<oSpan.length;i++){
                    Sum=Number(oSpan[i].innerHTML.replace('元',''));
                    allMoney+=Sum;
                }
                money.innerHTML=allMoney;
            }
        }
    }
</script>
</html>

sjy7329

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
商品加减,总计

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt;&lt;/head&gt;&lt;body&gt;&lt;ul id=&q
复制链接

扫一扫