Js代码实现商品价钱总和（模拟购物车功能）

最新推荐文章于 2024-05-28 18:30:26 发布
最新推荐文章于 2024-05-28 18:30:26 发布
阅读量1.3w 收藏 42
点赞数 6
分类专栏： JavaScript 文章标签： js实现商品总价钱 html
本文为博主原创文章，未经博主允许不得转载。
本文链接：https://blog.csdn.net/Freya_yyy/article/details/80283894
版权

用js简单实现商品数量的选购、小计的计算以及总的价钱数、总的商品数量等一系列操作。代码如下：

题设的主体HTML代码如下：（以作事例）

<body>
<ul id="list">
  <li>樱桃<br>
    <input type="button" value="-" />
    <strong>0</strong>
    <input type="button" value="+" />
    单价：<em>12.5元</em>
    小计：<span>0元</span>
  </li>
  <li>香蕉<br>
    <input type="button" value="-" />
    <strong>0</strong>
    <input type="button" value="+" />
    单价：<em>2.5元</em>
    小计：<span>0元</span>
  </li>
  <li>火龙果<br>
    <input type="button" value="-" />
    <strong>0</strong>
    <input type="button" value="+" />
    单价：<em>8.5元</em>
    小计：<span>0元</span>
  </li>
  <li>榴莲<br>
    <input type="button" value="-" />
    <strong>0</strong>
    <input type="button" value="+" />
    单价：<em>28元</em>
    小计：<span>0元</span>
  </li>
  <li>车厘子<br>
    <input type="button" value="-" />
    <strong>0</strong>
    <input type="button" value="+" />
    单价：<em>14.5元</em>
    小计：<span>0元</span>
  </li>
  <li>菠萝<br>
    <input type="button" value="-" />
    <strong>0</strong>
    <input type="button" value="+" />
    单价：<em>7元</em>
    小计：<span>0元</span>
  </li>
</ul>
<p>
商品合计共：<em>0件</em>，共花费了：<em>0元</em><br />
其中最贵的商品单价是：<strong>0元</strong>
</p>
</body>
  • 《原生版》JavaScript代码如下：
<script>
window.onload = function(){
	var  oP = document.getElementsByTagName('p')[0];
	var  aEm = oP.getElementsByTagName('em');
	var  aStrong = oP.getElementsByTagName('strong')[0];
	
	var  oUl = document.getElementById('list');
	var  oLi = oUl.getElementsByTagName('li');
	var  oStrong = oUl.getElementsByTagName('strong');
	var  oSpan = oUl.getElementsByTagName('span');
	var  oEm = oUl.getElementsByTagName('em');

	var sum = 0;
	var emMax = 0;
	for(var i=0;i<oEm.length;i++){
		//最大的那个单价值
       if(parseFloat(oEm[i].innerHTML)>emMax){
       emMax=parseFloat(oEm[i].innerHTML);
       }
	   aStrong.innerHTML=emMax+'元';
	}
       //调用fn1（）函数实现商品数量的选取
	for(var i=0;i<oLi.length;i++){
        fn1(oLi[i]);
	}
       //添加点击事件获取总的商品数量
        aEm[0].onclick = function(){
	for(var i=0;i<oStrong.length;i++){
		var a = Number(oStrong[i].innerHTML);
		sum+=a;
		aEm[0].innerHTML = sum+'件';
		}
		sum= 0;
	}
       //添加点击事件获取总的价钱
       aEm[1].onclick = function(){
	for(var i=0;i<oSpan.length;i++){
		var a = parseFloat(oSpan[i].innerHTML);
		sum+=a;
		aEm[1].innerHTML = sum+'元';
		}
		sum= 0;
	}
	
	
	function fn1(aLi){
		var oBtn = aLi.getElementsByTagName('input');
	    var	oStrong = aLi.getElementsByTagName('strong')[0];
		var	oEm = aLi.getElementsByTagName('em')[0];
		var	oSpan = aLi.getElementsByTagName('span')[0];
		var n1 = Number(oStrong.innerHTML);
		var n2 = parseFloat(oEm.innerHTML);
		

	   oBtn[0].onclick = function(){
			n1--;
			if(n1<0){
			   n1 = 0;
			}
			oStrong.innerHTML = n1;
			oSpan.innerHTML = n1*n2+'元';
			};
		oBtn[1].onclick = function(){
			n1++;
			oStrong.innerHTML = n1;
			oSpan.innerHTML = n1*n2+'元';
			};
	}
}
</script>


反思：上述代码添加点击事件获取商品的总价钱数以及总的商品数量，可能增加了用户负担。需要改进

  • 《改进版》JavaScript代码如下：
window.onload = function(){
	var oP = document.getElementsByTagName('p')[0];
	var	aEm = oP.getElementsByTagName('em');
	var	aStrong = oP.getElementsByTagName('strong')[0]；
	var oUl = document.getElementById('list');
	var oLi = oUl.getElementsByTagName('li');
	var oStrong = oUl.getElementsByTagName('strong');
	for(var i=0;i<oLi.length;i++){
        fn1(oLi[i]);
	}

	function fn1(aLi){
		var oBtn = aLi.getElementsByTagName('input');
	    var	oStrong = aLi.getElementsByTagName('strong')[0];
		var	oEm = aLi.getElementsByTagName('em')[0];
		var	oSpan = aLi.getElementsByTagName('span')[0];
		var n1 = Number(oStrong.innerHTML);
		var n2 = parseFloat(oEm.innerHTML);
		//合计总价，必然要相加所有的小计
       function fn2(){
          var sum1=0;//定义一个临时变量，用来储存所加过的件数
          var sum2=0;//定义一个临时变量，用来储存所加过的小计
          var emMax=0;//定义一个临时变量，用来比较单价的大小
          for(var i=0;i<oLi.length;i++){
	     var strongs=oLi[i].getElementsByTagName("strong")[0];//获取到所有li的数量
             var spans=oLi[i].getElementsByTagName("span")[0];//获取到所有li的小计
             var em=oLi[i].getElementsByTagName("em")[0];//获取到所有li的单价
	     sum1=sum1+Number(strongs.innerHTML);
             sum2=sum2+parseFloat(spans.innerHTML);//合计即所有小计相加的结果，因为有小数所以要用parseFloat
          if(parseFloat(em.innerHTML)>emMax){//最大的那个单价值
              emMax=parseFloat(em.innerHTML);
                    }
                }
		aEm[0].innerHTML=sum1+'件';
                aEm[1].innerHTML=sum2+'元';
                aStrong.innerHTML=emMax+'元';
            }
	  fn2();
	  oBtn[0].onclick = function(){
			n1--;
			if(n1<0){
			   n1 = 0;
			}
			oStrong.innerHTML = n1;
			oSpan.innerHTML = n1*n2+'元';
			fn2();//调用合计之后的值
			};
	 oBtn[1].onclick = function(){
			n1++;
			oStrong.innerHTML = n1;
			oSpan.innerHTML = n1*n2+'元';
			fn2();
			};
	}
}
</script>
此时总的商品件数和商品总计会随用户的商品选择进行实时改变。
Freya_yyy
关注
  • 6
    点赞
  • 踩
  • 42
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS 金额自动计算与合计（监听事件）
My Way
11-30 2455
1： 项目中有时要在页面里面自动计算金额，如：左边框里面是数量，右边被禁用的文本框里是金额，而这个金额是根据客户输入数量的多少来自动计算的（数量*单价=金额） &lt;input type="text" name="batchCount"  style="width: 150px" maxlength="8" onkeyup="isNumber(this);cul_charge(this);"..
js实现简单“商品总价计算”
qq_44419617的博客
12-05 7849
实现思路 一、搭建html结构，凡是需要操作数值的地方都用一个小盒子划分开（商品选中数量、单价、小计（已选同类商品价值总和）、商品总数、已选商品价值总和、选中商品中最高单价） 二、给每一个加/减操作button绑定一个onclick事件 1、获取当前button的父节点，用于快速找到其他需要操作的节点 2、点击button同类商品选中数量的加/减操作： 1）获取到存放商品数量的元素 2）获取到button属性flag，根据flag属性值判断进行何种运算 3）运算前保存元素中已有值oldNum，并创建变量存.
js实现购物车基本功能
最新发布
m0_71606684的博客
05-28 328
js实现购物车加、减、单选、全选、删除、价格总汇、数量总汇；
JS，通过增减商品数量，统计商品总价
weixin_56538213的博客
04-01 420
求教，怎么修改代码才能统计多个数量和计算最终商品总价？
JQ实现前台购物车按钮及输入数量算总金额传输到后台
尹盼的博客
09-05 2209
最近给公司做了一个H5扫码付款的项目。 其中用到了购物车按钮 如下图 数据库字段 款式名称shopName 款式单价 price 推荐数量commend_num 进入页面初始化要取的数据（2） 最大数量 max 最小数量 min 输入框不能小于最小数量 min 也不能大于最大数量 前台html @foreach (var item in result) //读取后台的数...
JS计算价格根据单价算总价
sugang666的博客
11-01 9458
思路:         1. 当单价改变的时候,计算出这件商品的总金额,同时计算出所有商品的总金额;        2.当单件商品的总金额改变时,计算出所有商品的总金额       3.页面初始化的时候,单价有初始值,自动计算出商品的总金额,同时计算出所有商品的总金额; 注意事项:单价,总金额:input输入框输入的是只能是非负的浮点数或者整数.切只能保留两位小数点   &lt;!DO...
使用Html+Css+JS实现商品的展示，价格计算等功能
weixin_45866961的博客
05-29 7735
源码在后面 效果展示图片 功能 调用外部数据，动态建立路径导航 调用外部数据，动态建立图片展示页面，为并未主图绑定鼠标移入、移动、移出事件，实现放大镜详情展示 3.并为其绑定左右按钮事件，进行切换 4. 为小图绑定切换事件，由小图切换主图， ...
文章购物车功能实现（HTML学习笔记）对应代码
02-06
为了展示购物车的总价，需要编写JavaScript函数来计算所有商品的价格总和。这可以通过读取`localStorage`中的商品价格，进行累加得到。 6. **移除商品**： 用户应能从购物车中删除商品。为此，为每个购物车内的...
js的购物车简单实现，可用于平时代码学习
07-15
在这个“购物车简单实现”的项目中，我们将深入探讨如何利用JavaScript来模拟一个基本的在线购物车功能。 首先，我们要理解购物车的基本功能：添加商品、删除商品、修改商品数量以及计算总价。这些功能都需要我们用...
asp.net实现购物车代码.zip
12-08
5. **计算总和**：在后台，ASP.NET代码会处理每个商品的价格和数量，计算购物车的总价格。这可能涉及到遍历购物车中的每个商品项，应用价格和数量的乘法，然后累加结果。 6. **数据库交互**：尽管没有明确提及，但...
Vue.js购物车商品结算表单页面代码
06-11
Vue.js购物车商品结算表单页面是Web应用中常见的功能模块，它允许用户选择并管理他们想要购买的商品。在这个场景中，Vue.js被用来构建一个交互性强、用户体验良好的页面。以下将详细介绍Vue.js在实现这一功能时涉及...
js某一列值的合计统计
12-21
js某一列值的合计统计，这是对前端某一字段的值进行统计，不是从后台数据库中调取数据。对于某一列值有进行过运算处理过的统计，就很值得一用了。
vue实现商品加减计算总价的实例代码
10-18
在Vue.js中实现商品加减计算总价的功能是一个常见的电商应用需求。这个实例代码演示了如何在用户选择商品并调整数量时动态计算总价。下面我们将详细解释这个实例中的关键点。 首先，HTML结构是整个功能的基础。`...
原生js实现购物车添加删除商品、计算价格功能
热门推荐
蒲公英芽的博客
02-05 1万+
购物车 功能需求： 根据数据创建购物车内容； 实现购物车添加商品功能； 实现购物车商品数量的增加、减少； 实现购物车商品的删除功能； 购物车的全选功能； 底部计算总件数、总价； 看一下效果： 分析： 分了三个文件来写，GoodsList.js，用来创建商品列表；ShoppingCart.js，用来创建购物车内容，StepNumber.js，用来创建购物车中，操作商品数量的组件。 要分清各个...
js实现购物车数量增减联动价格变化
Love.Hope.Faith
01-16 1万+
如题。        使用js实现一个购物车中常见的功能：购物数量增减功能。        我实现的效果如图：                 两边是两个input，中间是一个input输入框。 HTML：      JS： //根据选择的数量计算总价，并显示出来 function setTotal(){ var t = $("#num"); var tmp = docume
购物车实现选中商品算出总价（js）
weixin_44423938的博客
03-26 6599
思想：a:首先可以通过数据库，当你点击一次选择时，对复选框进行扫描，查出所有已经被选中的复选框，这个复选框需要加一个自定义属性，这个属性就是这个商品的id号，通过id号在数据库查询相应的价格进行累加。b:我这里没有用数据库，因为我的上一个需求已经把价格从数据库拿出来了，所以我直接在复选框上加了一个商品价格的自定义属性，当每次点击复选框时对复选框进行扫描，查出所有已经被选中的复选框，然后获取到价格进...
微信小程序制作简单的商品列表页，实现价格求和
sx17860543449的博客
10-22 1万+
微信小程序制作简单的商品列表页，实现价格求和 准备工作 1、node.js 2、微信开发者工具 目录结构 客户端代码实现 index.wxml <view class="contain"> <form bindsubmit="submit"> <view> <text id="top">商品</text> <checkbox-group name="skills"> <label wx:f
购物车js代码_JS实现购物车商品列表结算功能代码
ICode联盟
12-24 1292
下载地址 js代码window.onload = function () { if (!document.getElementsByClassName) { document.getElementsByClassName = function (cls) { var ret = []; var els = document.getElementsByTagName("*"); for (var i = 0, len = els.length; i < len; i++) { if (els[i].c
购物车javascript代码（二）
weixin_47439712的博客
10-20 496
class Cart { // 静态方法声明在class中 static checkOne; static all; constructor() { Cart.all = document.querySelectorAll(’.check-all’); Cart.list(); // 等待商品数据追加完成 Cart.checkOne = document.getElementsByClassName(‘check-one’); Cart.checkAll(); } /**商品列表/ static list
js和MySQL提取商品价格，设置商品数量并计算购物车价格总和
05-30
好的，这是一个比较复杂的问题，需要分几个步骤来完成。首先，你需要从MySQL数据库中提取商品的价格和数量信息。可以使用如下的MySQL语句： ```sql SELECT price, quantity FROM products WHERE id = 1; ``` 上面的语句中，products 表是存储商品信息的表，id=1 表示需要提取的商品的编号为 1。假设你已经得到了商品的价格和数量信息，将它们保存到 JavaScript 变量 price 和 quantity 中。 接下来，你需要设置购物车中商品的数量。可以创建一个 input 元素，让用户输入购买数量。假设你将这个元素的 id 设置为 "quantity-input"，那么可以使用如下的 JavaScript 代码获取用户输入的数量： ```javascript var quantityInput = document.getElementById('quantity-input'); var quantity = parseInt(quantityInput.value); ``` 上面的代码中，parseInt() 函数用于将用户输入的字符串转换成整数类型。假设用户输入的数量为 3，那么 quantity 变量的值就为 3。 最后，你可以计算购物车中商品的总价。可以使用如下的 JavaScript 代码： ```javascript var totalPrice = price * quantity; ``` 上面的代码中，* 运算符用于计算商品的总价。假设商品的价格为 10 元，数量为 3 个，那么 totalPrice 变量的值就为 30 元。 综上所述，你可以使用如下的 JavaScript 代码来提取商品价格，设置商品数量并计算购物车价格总和： ```javascript // 从MySQL数据库中提取商品价格和数量信息 var price = 10; // 假设商品价格为 10 元 var quantity = 3; // 假设购买数量为 3 个 // 获取用户输入的购买数量 var quantityInput = document.getElementById('quantity-input'); var quantity = parseInt(quantityInput.value); // 计算购物车中商品的总价 var totalPrice = price * quantity; console.log(totalPrice); // 输出购物车价格总和 ``` 注意，上面的代码仅供参考，实际情况可能会有所不同，需要根据具体情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值