简易的商品加减与统计结果

最新推荐文章于 2022-05-20 18:43:51 发布
最新推荐文章于 2022-05-20 18:43:51 发布
阅读量211 收藏
点赞数
分类专栏： 前端js基础学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/x1432553805/article/details/81975620
版权 
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>商品加减与统计结果</title>
<script>
window.onload = function () {
	var oUl = document.getElementById('list');
	var aLi = oUl.getElementsByTagName('li');
	var num = 0;   //所有商品件数
	var pay = 0;   //总金额
	var spe = 0;   //商品最贵单价
	
	for ( var i=0; i<aLi.length; i++ ) {
		fnCount ( aLi[i] );
	}
	
	function fnCount ( li ) {
		var aBtn = li.getElementsByTagName ('input');
		var oStrong = li.getElementsByTagName ('strong')[0];  //个数
		var oEm = li.getElementsByTagName ('em')[0];          //单价
		var oSpan = li.getElementsByTagName ('span')[0];      //小计
		var n = Number(oStrong.innerHTML);			// '0'
		var price = parseFloat(oEm.innerHTML);			// 12.5         
		var oP = document.getElementsByTagName ('p')[0];
		

		aBtn[0].onclick = function () {
			if ( n > 0 ) {
				n--;
				num --;
				pay = pay - price;
			}
			oStrong.innerHTML = n;
			oSpan.innerHTML = n*price + '元';
			spe = Max();
			oP.innerHTML = '商品合计共：' + num + '件，共花费了：' + pay + '元' + '<br />' + '其中最贵的商品单价是：' + spe + '元';
		};
		aBtn[1].onclick = function () {
			n++;
			oStrong.innerHTML = n;
			oSpan.innerHTML = n*price + '元';
					num ++;
				pay = pay + price;
				spe = Max();
			oP.innerHTML = '商品合计共：' + num + '件，共花费了：' + pay + '元' + '<br />' + '其中最贵的商品单价是：' + spe + '元';
		}
	};
	//该函数用来判断最大单价
		function Max(){
			var arr = [];   //定义一个数组，储存单价
    		var aStrong=document.getElementsByTagName('strong');    
    		var aEm=document.getElementsByTagName('em');
			for(var i=0;i<aStrong.length;i++)
			if(Number(aStrong[i].innerHTML) >0) arr.push(parseFloat(aEm[i].innerHTML));   //需知innHTML获取的为字符串
            spe = 0;
			if(arr.length > 0)   spe = arr[0];
			for (var j=1;j<arr.length;j++){
				if(spe < arr[j])   spe = arr[j];  //判断最大单价
				}
				return spe ;
		};
};
</script>
</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>
商品合计共：0件，共花费了：0元<br />
其中最贵的商品单价是：0元
</p>

</body>
</html>

 

效果图：

 

信管117229谢胜祥
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现商品加减及统计
a5421901的专栏
10-27 5356
商品加减 0 单价：12.5元 小计：0元 0 单价：3.5元 小计：0元 0 单价：2.5元 小计：0元 0 单价：10元 小计：0元 0 单价：15元 小计：0元 商品合计共：0件 商品总价为：0元 其中最贵的商品单价为：0元 var oUl =
jQuery购物车商品数量加减计算代码
09-22
在本文中，我们将深入探讨如何使用jQuery来实现购物车中的商品数量加减计算功能，这是一个常见且重要的用户体验优化点。 首先，jQuery是一个轻量级的JavaScript库，它简化了DOM操作、事件处理、动画效果以及Ajax...
购物车数量加减，并统计选中数量和选中总价
08-11
购物车，listview列表，点击+ - 号 增加减少数量，计算单个条目总价，点击checkbox选中，并统计选中数量，统计选中所有商品的总价。
js实现购物车加减和价格运算
热门推荐
qq_39879340的博客
09-23 3万+
主要实现功能：购物车的加减，单件商品价格的运算，总价格的运算。价格保留两位小数。 <div class="content"> <div class="logo"> <img src="images/dd_logo.jpg"><span onclick="guan()">关闭</span> </div> <div class="cartList" id="zo
Js代码实现商品价钱总和（模拟购物车功能）
Freya_yyy的博客
05-11 1万+
用js简单实现商品数量的选购、小计的计算以及总的价钱数、总的商品数量等一系列操作。代码如下：题设的主体HTML代码如下：（以作事例）&lt;body&gt; &lt;ul id="list"&gt; &lt;li&gt;樱桃&lt;br&gt; &lt;input type="button" value="-" /&gt; &lt;stron
用JS实现商品加减与统计结果
weixin_43571052的博客
04-07 788
效果图 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta htt...
Javascript实现页面商品个数增减功能
哈
05-20 2040
效果 后台返回代码 Map<GoodsVO, Integer> cart = new HashMap(); cart.put(new GoodsVO(1001,"苹果",100),5); cart.put(new GoodsVO(1002,"桔子",300),3); cart.put(new GoodsVO(1003,"香蕉",150),3); request.getSession().setAttribute("cat",cart); 前端页面 <c:forEach items="$
小储云商城网页加减款系统源码
08-26
3. **数据记录与查询**：所有加减款操作都会被详细记录，包括金额、时间、类别、操作人等信息，同时提供强大的查询功能，可按日期、类别等多种条件快速查找历史记录。 4. **权限控制**：考虑到网站可能有多个管理员...
连加、连减、加减混合_《连加、连减、加减混合》练习3.pdf
03-03
连加、连减、加减混合_《连加、连减、加减混合》练习3.pdf 在数学领域中，「连加、连减、加减混合」是一个重要的概念，它涉及到各种数学运算的组合和应用。本资源摘要将对该主题进行详细的解释和分析。 知识点1：...
西师大版二年级数学下册《三位数的加减》综合练习二.docx
11-12
1. **三位数的加减法**：在第一部分的口算题中，学生需要快速准确地进行三位数与两位数或一位数的加减运算，如50 - 16、380 - 250等，这训练了学生的计算能力和对数位的理解。 2. **加减法的验算**：第二部分要求...
商品加减,总计
sunjunyue的博客
10-10 180
&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
js小练习：利用getElementsByTagName方法、for循环、this指针、数组实现对多个相同元素value值的改变
一个程序员-二白的博客
10-18 3015
1.练习内容： 在页面中添加三个按钮，当点击按钮时，按钮的值循环发生改变。 例如三个按钮的默认值都为A,当任意点击一个按钮时，其默认值变成B，再次点击变成C，再点一次又变为A. 2.源代码：     pageEncoding="utf-8"%> ??????? input{ height:30px; width:50px; } windo
document.getElementsByTagName
D的专栏
05-31 1113
<br /><script type="text/javascript"><br />function changeCSS(obj){<br /> var ls=document.getElementsByTagName('li');<br /> for(var i=0;i<ls.length;i++){<br />  ls[i].className='';<br /> }<br /> obj.className='on';<br />}<br /></script><br /><div id="steps
avif-0.5.0-cp37-cp37m-manylinux2010_i686.whl
07-27
python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！ python库，可以直接安装使用，再也不怕自己pip下载，出现等待超时的现象。欢迎下载使用，使用过程中如有使用问题，请及时与我沟通交流，帮你解决！
[毕设]HTTP代理服务器开发与实现.zip
07-27
[毕设]HTTP代理服务器开发与实现
PyQt5-5.15.11-cp38-abi3-win32.whl
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
jupyterlab_broccoli_turtle-0.4.7-py3-none-any.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pillow-10.4.0-cp311-cp311-win32.whl
07-27
基本介绍 名称与起源：Pillow，原名为PIL（Python Imaging Library），但PIL只支持Python 2版本。随着Python 3的普及，Pillow作为PIL的一个分支出现，兼容Python 3并提供更多的功能和改进。 主要功能：Pillow支持多种图像格式的打开、保存、显示以及基本的图像操作和处理，如裁剪、缩放、旋转、翻转、滤镜应用等。 跨平台性：Pillow库可以在不同的操作系统上运行，包括Windows、Linux和MacOS等。 主要功能模块 Pillow库包含多个功能模块，每个模块都提供了特定的图像处理功能。以下是一些常用的模块： Image：用于处理图像文件，提供打开、保存、调整大小、旋转、裁剪、滤镜等功能。 ImageDraw：提供在图像上绘制各种形状（如线条、矩形、圆形）和文本的功能。 ImageFont：用于加载和使用TrueType字体文件，以便在图像上绘制文本时设置字体样式、大小和颜色。 ImageFilter：提供各种滤镜效果，如模糊、锐化、边缘增强等，用于图像增强、特效处理和图像识别等应用。 ImageEnhance：用于调整图像的亮度、对比度、颜色饱和度等参数，使图像更加清晰、明亮或具有特定的调色效果。 高级功能 除了基本的图像处理功能外，Pillow还支持一些高级功能，如色彩空间转换、直方图均衡化等。这些功能可以帮助用户进行更复杂的图像处理和分析。
pi_heif-0.17.0-cp38-cp38-macosx_12_0_x86_64.whl
最新发布
07-27
pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。pip install 直接安装，无需再下载，直接用。
JS+CSS+HTML写出购物车表格 加减总价小计
05-26
好的，以下是一个简单的购物车表格的示例代码，包括加减按钮和总价小计功能： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>购物车</title> <style> table { border-collapse: collapse; width: 100%; } th, td { text-align: center; padding: 8px; border: 1px solid #ddd; } th { background-color: #f2f2f2; } .total { font-weight: bold; } </style> </head> <body> <table> <thead> <tr> <th>商品名称</th> <th>单价</th> <th>数量</th> <th>小计</th> </tr> </thead> <tbody> <tr> <td>商品1</td> <td>10.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">10.00</td> </tr> <tr> <td>商品2</td> <td>20.00</td> <td> <button class="reduce">-</button> <span class="amount">1</span> <button class="add">+</button> </td> <td class="subtotal">20.00</td> </tr> <tr> <th colspan="3" class="total">总价</th> <td id="totalPrice">30.00</td> </tr> </tbody> </table> <script> // 获取元素 const reduceBtns = document.querySelectorAll('.reduce'); const addBtns = document.querySelectorAll('.add'); const amountEles = document.querySelectorAll('.amount'); const subtotalEles = document.querySelectorAll('.subtotal'); const totalPriceEle = document.querySelector('#totalPrice'); // 定义变量 let totalPrice = 0; // 绑定事件 for (let i = 0; i < reduceBtns.length; i++) { reduceBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); if (amount > 1) { amount--; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount + 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) - price; totalPriceEle.textContent = totalPrice.toFixed(2); } }); } for (let i = 0; i < addBtns.length; i++) { addBtns[i].addEventListener('click', function() { let amount = parseInt(amountEles[i].textContent); amount++; amountEles[i].textContent = amount; let price = parseFloat(subtotalEles[i].textContent) / (amount - 1); subtotalEles[i].textContent = (price * amount).toFixed(2); totalPrice = parseFloat(totalPrice) + price; totalPriceEle.textContent = totalPrice.toFixed(2); }); } // 计算初始总价 for (let i = 0; i < subtotalEles.length; i++) { totalPrice += parseFloat(subtotalEles[i].textContent); } totalPriceEle.textContent = totalPrice.toFixed(2); </script> </body> </html> ``` 代码解释： 1. HTML部分：使用`<table>`标签创建表格，包括表头和表体两部分。每个商品行都有一个数量`<td>`单元格，里面包含一个减少按钮、一个显示数量的`<span>`元素和一个增加按钮。总价小计使用`<td>`标记，总价使用`<td>`标记和一个`id`属性。 2. CSS部分：设置表格样式，包括边框、对齐和背景色。 3. JavaScript部分：获取所有需要操作的元素，并定义一个变量`totalPrice`用于统计总价。为减少按钮和增加按钮绑定`click`事件，用于修改数量和小计，并更新总价。在页面加载时计算初始总价。 以上代码仅供参考，实际应用中可能需要根据实际情况进行调整和优化。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值