`
yaojialing
  • 浏览: 255495 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS 金额自动计算与合计(监听事件)

    博客分类:
  • JAVA
阅读更多

1:

项目中有时要在页面里面自动计算金额,如:左边框里面是数量,右边被禁用的文本框里是金额,而这个金额是根据客户输入数量的多少来自动计算的(数量*单价=金额)

<input type="text" name="batchCount"  style="width: 150px" maxlength="8" onkeyup="isNumber(this);cul_charge(this);" onblur="checkInput(this);"/>

 

这里是用到onkeyup事件来调用cul_charge函数计算金额。JS里面计算用eval(bat_v*bat_charge),有时候金额额度大需要格式化金额(见本博客 JS格式化金额)

 

2(监听事件):

上面的是简单的计算金额,放到被禁用的文本框里面。现在这种情况不同,这种是所有 被禁用的文本框里面金额的总计

当几个文本框中的金额发生变化时,总计框里面也会变化,并重新计算,这就需要监听事件了。

 

 

//----------------------------------监听开始(邮资合计和收费总计)---------------------------------//
		var g_tp;
		//这里是解决window onload 覆盖body onload的方法,否则onload="pageInit();" 将失效.
		if (document.all){
			window.attachEvent('onload',pageInit)
		}else{
			window.addEventListener('load',pageInit,false);
		}
		//监听邮资合计和收费总计
		function $(id){return document.getElementById(id);}
		function ie(){if(navigator.userAgent.indexOf("MSIE")>0){return true}else{return false}}
		function addevent(){//添加事件,onpropertychange 遇到disabled时无效
			if(ie()==true){//IE 
				  //收费总计
				  $('baseCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('batchClickCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('billClickCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('batchPaperCharges').attachEvent("onpropertychange",totalCharges_Sum);
				  $('billPaperCharges').attachEvent("onpropertychange",totalCharges_Sum);
					//邮资
				  $('localAdjustPostages').attachEvent("onkeyup",local_AP_Sum); 
				  $('outerAdjustPostages').attachEvent("onkeyup",local_AP_Sum); 
				  $('localPostages').attachEvent("onpropertychange",local_AP_Sum); 
				  $('outerPostages').attachEvent("onpropertychange",local_AP_Sum);
			}else{ //其他浏览器
				//收费总计
				  $('baseCharges').addEventListener("input",totalCharges_Sum,false);
				  $('batchClickCharges').addEventListener("input",totalCharges_Sum,false);
				  $('billClickCharges').addEventListener("input",totalCharges_Sum,false);
				  $('batchPaperCharges').addEventListener("input",totalCharges_Sum,false);
				  $('billPaperCharges').addEventListener("input",totalCharges_Sum,false);
					//邮资
				  $('localAdjustPostages').addEventListener("keyup",local_AP_Sum,false); 
				  $('outerAdjustPostages').addEventListener("keyup",local_AP_Sum,false);
				  $('localPostages').addEventListener("input",local_AP_Sum,false);  
				  $('outerPostages').addEventListener("input",local_AP_Sum,false);
			}
		}
		function deleteevent(){//销毁事件
			if(ie()==true){
				//收费总计
			    $('baseCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('batchClickCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('billClickCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('batchPaperCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    $('billPaperCharges').detachEvent("onpropertychange",totalCharges_Sum);
			    
				$('localAdjustPostages').detachEvent("onkeyup",local_AP_Sum);
				$('outerAdjustPostages').detachEvent("onkeyup",local_AP_Sum);
				$('localPostages').detachEvent("onpropertychange",local_AP_Sum);
				$('outerPostages').detachEvent("onpropertychange",local_AP_Sum);
			}else{
				$('localAdjustPostages').removeEventListener("keyup",local_AP_Sum,false);
				$('outerAdjustPostages').removeEventListener("keyup",local_AP_Sum,false);
				$('localPostages').removeEventListener("input",local_AP_Sum,false);
				$('outerPostages').removeEventListener("input",local_AP_Sum,false);
			  //收费总计
			  $('baseCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('batchClickCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('billClickCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('batchPaperCharges').removeEventListener("input",totalCharges_Sum,false);
			  $('billPaperCharges').removeEventListener("input",totalCharges_Sum,false);
			}
		}
		//邮资合计,当lp,op,lap,oap这四个中有一个改变,邮资合计则重新计算
		function local_AP_Sum(){
			deleteevent();
			//略......................
			addevent();
		}
		//如果bc,bacc,bicc,bapc,bipc内值有改变,则收费总计重新计算
		function totalCharges_Sum(){
			deleteevent();
			//略..........................
			
			addevent();
		}
		
		
		window.onload=addevent; //时间调用首先从这里开始
		//----------------------------------结束---------------------------------//

 

分享到:
评论

相关推荐

    js监听鼠标点击和键盘点击事件并自动跳转页面

    最后,文章中提到一个在线查询工具,它帮助归纳总结了JavaScript中常用的事件类型与函数功能。这是一个实用的资源,可以让开发者快速查阅和理解不同JavaScript事件的功能和用法。 总结来说,通过本文,我们可以学习...

    jquery监听鼠标滚轮事件+js监听滚轮事件

    为了捕捉这一行为并根据需要做出响应,开发者通常会使用JavaScript或jQuery来监听滚轮事件。本篇将详细介绍如何使用jQuery和原生JavaScript实现鼠标滚轮事件的监听。 一、jQuery监听鼠标滚轮事件 jQuery库提供了一...

    JS针对浏览器窗口关闭事件的监听方法集锦

    在JavaScript中,监听浏览器窗口关闭事件对于实现特定的用户交互或数据保存功能至关重要。下面将详细介绍几种常用的浏览器关闭事件监听方法。 1. 方式一:适用于IE浏览器,仅在关闭时提示 ```javascript window....

    输入数量和价格自动计算输出金额的js代码

    对于自动计算金额的需求,可以使用乘法运算符来计算"数量"和"单价"的乘积。 4. 输出显示:可以通过修改HTML元素的内容来显示计算后的总金额。通常,这涉及到获取一个DOM元素的引用,然后将其`innerHTML`或`...

    js实现自动计算

    【标题】:“js实现自动计算” ...总结来说,JavaScript实现自动计算涉及了事件处理、DOM操作、数据验证、数学运算、函数封装等多个方面,掌握这些技能可以帮助开发者创建出交互性强且功能完善的Web应用。

    js事件监听机制(事件捕获)总结

    JavaScript事件监听机制是前端开发中极其重要的一环,它允许开发者对用户行为(如点击、按键、鼠标移动等)作出响应。事件监听涉及的几个核心概念包括事件传播的两种方式:事件捕获和事件冒泡,以及兼容性问题和事件...

    JS监听关闭浏览器事件

    ### JS监听关闭浏览器事件 在Web开发中,有时我们需要对用户关闭浏览器窗口或标签页的行为进行监测,并在这些行为发生前执行某些操作。这通常涉及到`onbeforeunload`和`onunload`这两个事件处理程序。 #### 1. `...

    使用JS监听键盘按下事件(keydown event)

    在现代网页设计与开发中,实现用户与网页的交互是至关重要的一部分,其中监听键盘事件就是实现交云的一个常见方法。JavaScript作为网页开发的主要脚本语言,提供了多种方式来监听键盘事件。本文将详细介绍如何使用...

    jquery监听DIV的事件

    然而,jQuery并没有直接提供对`resize`事件的支持,所以这通常需要配合原生JavaScript来实现,例如使用MutationObserver来监听元素属性的更改,包括尺寸变化。 此外,为了提高性能,我们应该尽可能地使用事件委托。...

    windchill交流第三篇:Windchill中的事件监听

    4. **处理事件**:当事件发生时,Windchill会自动调用监听器中相应的方法,执行预定义的逻辑。 【标签】:“源码”和“工具”表明了我们讨论的是与代码实现和Windchill开发工具相关的技术细节。 源码方面,我们...

    jQuery购物车自动计算金额表单

    【jQuery购物车自动计算金额表单】是一个基于jQuery技术实现的简单购物车功能,它能够自动计算用户在购物车中选择商品的总价。这个功能在电商网站中非常常见,为用户提供了一个直观的方式来查看他们所选商品的总价值...

    js实现监听浏览器关闭和刷新事件

    js实现监听浏览器关闭和刷新事件支持三大浏览器,点击直接看效果

    各种Android Dialog创建及其监听事件实现

    查阅JavaDoc API文档 读者可根据JavaDoc API文档来了解如何实现单击item选项监听事件 如下列出的setItems 方法第2个参数易知只要为第2个参数提供OnClickListener实例即可实现监听事件 读者可通过这种方式触类旁通...

    js 监听 隐藏元素的变化事件

    对隐藏元素的监听,例如,隐藏的input框,普通change事件是无法监控的。

    ext.js监听事件

    ext封装的太死板,里面有常用到的15个ext.js触发事件和监听事件,对ext了解的不是特别深入,大部分都是经常碰到的

    js监听键盘事件的方法_原生和jquery的区别详解.docx

    ### JS监听键盘事件的方法:原生与jQuery的区别详解 #### 一、引言 JavaScript (JS) 是一种广泛使用的编程语言,特别是在Web开发领域。它提供了丰富的API来处理各种用户交互,包括监听键盘事件。监听键盘事件对于...

    微信小程序在页面中使用计算属性,监听

    在这个例子中,当`items`数组发生变化时,`total`计算属性会自动更新,并通过监听器再次设置到页面数据中,确保视图与数据的一致性。 总结来说,计算属性和监听是微信小程序中处理数据变化和业务逻辑的重要工具。...

    Js自动计算(平均分配)例子

    在给定的“Js自动计算(平均分配)例子”中,我们关注的是一个JavaScript功能,该功能允许用户输入一系列数值,并自动计算这些数值的平均值,确保最后一个输入的值保持不变,然后将剩余的值平均分配到其他输入项中。...

    jQuery购物车自动计算金额表单.zip

    总的来说,"jQuery购物车自动计算金额表单"是一个结合了DOM操作、事件处理、计算逻辑、AJAX交互以及可能的动画效果的JavaScript应用实例。开发者可以通过这个项目学习如何使用jQuery构建动态、交互性强的前端功能,...

Global site tag (gtag.js) - Google Analytics