首页分享 js实现简单“商品总价计算”

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

来源：花匠小妙招时间：2026-02-05 06:04

实现思路

一、搭建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>

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232