js实现简单“商品总价计算”

最新推荐文章于 2023-12-12 20:05:23 发布

♛琉璃

最新推荐文章于 2023-12-12 20:05:23 发布

阅读量8.4k

点赞数 5

分类专栏： JavaScript 文章标签： JavaScript 简易计算器

本文链接：https://blog.csdn.net/qq_44419617/article/details/110712680

版权

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

实现思路

一、搭建html结构，凡是需要操作数值的地方都用一个小盒子划分开（商品选中数量、单价、小计（已选同类商品价值总和）、商品总数、已选商品价值总和、选中商品中最高单价）

二、给每一个加/减操作button绑定一个onclick事件

1、获取当前button的父节点，用于快速找到其他需要操作的节点

2、点击button同类商品选中数量的加/减操作：
1）获取到存放商品数量的元素
2）获取到button属性flag，根据flag属性值判断进行何种运算
3）运算前保存元素中已有值oldNum，并创建变量存放计算所得新值nowNum
4）为避免出现负值，减法操作前首先判断oldNum数值是否大于0，大于0时才进行减法运算
5）将newNum写入元素

3、同类商品价值小计
1）获取存放小计数值的元素
2）获取存放单价的元素中的值（innerText）
3）将计算出的同类商品数量newNum与单价的乘积写入存放小计的元素

4、商品总件数
1）获取存放商品总件数的元素
2）获取到所有存放同类商品数量的元素
3）创建新变量存储商品总数量totalNum
4）for循环求和
5）将totalNum写入存放商品总件数的元素

5、商品总价值（同商品总件数）

6、已选商品中最贵单价
1）获取存放最贵单价的元素
2）获取所有li元素
3）将所有已选类型商品的单价存储入数组：判断这类商品的数量（通过其父元素li获取）是否大于0，只要大于0即将其单价（通过其父元素li获取）push入数组
4）创建新变量存储最贵单价maxMoney
5）如果单价数组中有值，就将数组升序排列并获取其中最大值：判断数组长度是否大于0，大于0将其最大值赋值给maxMoney
6）将maxMoney写入存放最贵单价的元素

具体实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        ol {
            list-style: none;
        }

        #main {
            width: 479px;
            height: 591px;
            background: url("images/bg1.png");
            margin: 0 auto;
            color: #fff;
            padding: 30px;
            box-sizing: border-box;
            position: relative;
        }

        .shopContent li {
            display: flex;
            justify-content: space-evenly;
            align-items: center;
        }

        .shopContent button {
            width: 52px;
            height: 44px;
            border: none;
        }

        .add {
            background: url("images/add.png");
        }

        .sub {
            background: url("images/sub.png");
        }

        .num {
            width: 44px;
            height: 36px;
            line-height: 36px;
            text-align: center;
            border-radius: 5px;
            background: #fff;
            color: #333;
        }

        .shopInfo {
            position: absolute;
            bottom: 20px;
            left: 30px;
        }

        .shopInfo p {
            line-height: 40px;
        }
    </style>
</head>

<body>
    <div id="main">
        <ul class="shopContent">
            <li>
                <button class="add" flag="1"></button>
                <b class="num">0</b>
                <button class="sub" flag="0"></button>
                <span class="info">
                    单价：<b class="itemPrice">1</b>元 小计：<span class="xjMoney">0</span>元
                </span>
            </li>
            <li>
                <button class="add" flag="1"></button>
                <b class="num">0</b>
                <button class="sub" flag="0"></button>
                <span class="info">
                    单价：<b class="itemPrice">2</b>元 小计：<span class="xjMoney">0</span>元
                </span>
            </li>
            <li>
                <button class="add" flag="1"></button>
                <b class="num">0</b>
                <button class="sub" flag="0"></button>
                <span class="info">
                    单价：<b class="itemPrice">3</b>元 小计：<span class="xjMoney">0</span>元
                </span>
            </li>
        </ul>
        <div class="shopInfo">
            <p>
                商品共<span class="totalNum">0</span>件
            </p>
            <p>
                共花了<span class="totalMoney">0</span>元
            </p>
            <p>
                选中的商品中最贵的单价是<span class="specialItemPrice">0</span>元
            </p>
        </div>
    </div>
</body>
</html>
<script>
    /* 
    点击按钮的时候：让数量相应的增减

    怎么知道是加法按钮还是减法按钮？
    1.在结构中增加一个自定义属性flag，值1为加法，值0为减法
    2.用dom方法获取所有的加法、减法按钮
    3.根据li下面的第几个孩子button判断加减法按钮
    ...
    */
    //所有按钮（加、减）
    var btns = document.querySelectorAll(".shopContent button");
    //所有“件数”盒子
    var numArrayEle = document.querySelectorAll(".shopContent .num");
    //“总件数”盒子
    var totalNumEle = document.querySelector(".shopInfo .totalNum");
    //所有“小计”盒子
    var xjMoneyArrayEle = document.querySelectorAll(".shopContent .xjMoney");
    //“总钱数”盒子
    var totalMoneyEle = document.querySelector(".shopInfo .totalMoney");
    //li列表
    var lis=document.querySelectorAll(".shopContent li");
    //“选中商品最贵单价”盒子
    var specialItemPriceEle=document.querySelector(".shopInfo .specialItemPrice");

    for (var i = 0; i < btns.length; i++) {
        //给按钮绑定点击事件
        btns[i].onclick = function () {
            //获取当前button的flag属性，用于判断是加法还是减法按钮
            var flag = this.getAttribute("flag");
            //console.log(flag);
            //当前button的父节点，通过父节点可以获取需要操作的子盒子
            var parentEle = this.parentNode;
            //console.log(parentEle);
            //单价
            var itemPrice = Number(parentEle.querySelector(".itemPrice").innerText);
            //console.log(itemPrice);
            //“小计”盒子
            var xjMoneyEle = parentEle.querySelector(".xjMoney");
            //console.log(xjMoneyEle);
            //“件数”盒子，点击加/减法按钮影响里面的件数，每次变动 1
            var numEle = parentEle.querySelector(".num");
            //console.log(numEle);
            //记录“件数”盒子中原始数值，用于计算
            var oldNum = Number(numEle.innerText);
            //console.log(oldNum);
            //存放加/减运算后的“新件数”
            var nowNum = 0;
            //总件数
            var totalNum = 0
            //总钱数
            var totalMoney = 0;
            //件数大于0的商品单价数组
            var numAry=[];
            //选中商品中最贵的单价
            //var maxMoney=null;
            var maxMoney=0;
            //加法按钮
            if (flag == 1) {
                nowNum = oldNum + 1;
            } else {
                //减法按钮
                /* if (oldNum - 1 < 0) {
                    nowNum = 0;
                    return;
                }
                nowNum = oldNum - 1; */
                if(oldNum>0){
                    nowNum=oldNum-1;
                }
            }
            //修改“件数”盒子中的值为 新件数
            numEle.innerText = nowNum;
            //修改“小计”盒子中的值为 新件数*单价
            xjMoneyEle.innerText = nowNum * itemPrice;
            //通过for循环计算总数（拿到每一个件数小盒子中的值进行求和）
            for (var i = 0; i < numArrayEle.length; i++) {
                //总件数
                totalNum += Number(numArrayEle[i].innerText);

                //总钱数
                totalMoney += Number(xjMoneyArrayEle[i].innerText);
            }
            //console.log(totalNum);
            //修改“总件数”盒子中的数值
            totalNumEle.innerText = totalNum;
            //通过for循环计算总数（拿到每一个小计盒子中的值进行求和）
            /* for(var i=0;i<xjMoneyArrayEle.length;i++){
                totalMoney+=Number(xjMoneyArrayEle[i].innerText);
            } */
            //修改“总钱数”盒子中的数值
            totalMoneyEle.innerText = totalMoney;

            //获取已选商品的单价数组
            for(var i=0;i<lis.length;i++){
                var item=lis[i];
                //选中的商品（件数大于0）
                if(item.querySelector(".num").innerText>0){
                    //获取单价
                    var value=item.querySelector(".itemPrice").innerText;
                    numAry.push(value);
                }
            }
            /* 
            //未选择商品
            if(numAry.length<1){
                maxMoney="---";
            }else{
                //获取已选商品单价数组中的最大值
                maxMoney=numAry.sort(function(a,b){return a-b;})[numAry.length-1];
            } 
            */
            if(numAry.length>0){
                maxMoney=numAry.sort(function(a,b){return a-b})[numAry.length-1];
            } 

            //修改“选中商品最贵单价”盒子中的值
            specialItemPriceEle.innerText=maxMoney;
        }
    }
</script>