用Javascript制作会计算的表单

691865863

691865863

2016-02-19 17:35

图老师设计创意栏目是一个分享最好最实用的教程的社区,我们拥有最用心的各种教程,今天就给大家分享用Javascript制作会计算的表单的教程,热爱PS的朋友们快点看过来吧!

  我们在制作定购单时,往往要计算客户定购物品的货款,HTML并没有提供这种在线计算的功能,但我们用Javascript程序可以实现这种在线汇总计算的功能。当然一个完整的定货单可能涉及许多表单标记,如何获取各表单标记的value值是解决问题的关键。本例的方法将告诉你如何去获得各表单元素的value值,并加以计算。你看下面这张定货单,它虽涉及多种表单元素(如单选框、复选框、单行文本框等等),但你可以随意选取物品,只要一按计算货款按钮,立即计算好全部货款,分毫不差。满意吧!

  制作方法:

  1、制作一个定货单, 用表单元素制作定货单在这里不细讲了,若你不会做的话,请去看看《HTML高级进阶技巧》专题的有关文章。但在制作这种要用程序进行计算的表单有两点要注意:

  1)所有表单元素都要给取一个确切的名字,也就是要设置好name参数的值,以便在程序中引用;

  2)对于象单选框、复选框这样的供用户选择的表单元素,要把具体的值定义到它的value参数上,否则,程序在计算时无法获得实际数值,写在它边上的那个数值是给用户看,程序是无法获取的,这一点切勿忽视,否则计算结果不正确。例如:本例中两种电脑单价(5000元和7000元)的两个单选框的源代码如下:

  单价: input type="radio" name="r1" value="5000"5000元

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  input type="radio" name="r1" value="7000"7000元

  看到了吧,除了在单选框的边上要写上单价的数值,还在单选框标记中设置好value的相应数值。

  2、在表单的后面插入下面这段程序:

  

script language="JavaScript"!--function jshk(){obj=document.dhform;var dj=0;for (i=0;i(obj.item.length);i++){ //查找那种单价被选中if ((obj.item(i).checked) && (obj.item(i).name="r1")) {dj=parseInt(obj.item(i).value);break}}hk=parseInt(obj.t1.value); hk=hk*dj; //计算电脑的货款(数量*单价)if (obj.c1.checked) hk+=parseInt(obj.c1.value); //如果该复选框被选中,加上该项货款。if (obj.c2.checked) hk+=parseInt(obj.c2.value); //如果该复选框被选中,加上该项货款。if (obj.c3.checked) hk+=parseInt(obj.c3.value); //如果该复选框被选中,加上该项货款。if (obj.c4.checked) hk+=parseInt(obj.c4.value); //如果该复选框被选中,加上该项货款。obj.t3.value=hk+".00";}//--/script

  该程序不复杂,关键的要注意以下几点:

(本文来源于图老师网站,更多请访问https://m.tulaoshi.com/webkaifa/)

  1)对于所有表单元素的value参数值,它们都是字符形式,要参于计算,必须先用parseInt()函数把它转换成数值形式;

  2)对于单选框,要先找出用户选中的是那一个单选框,然后再取其value值进行计算;

  3)对于复选框,要逐个判断是否被选中,如果被选中,则计算,否则不计算。

  4)对于单行文本框,一般是要求用户输入的,所以其值可直接转换后进行计算。

  3、在开始计算按钮中加上一个事件:onclick="jshk()"来调用程序进行计算。

  由于定购单的样式千变万化,所以本文的程序直接引用的可能性是很少,但不管表单如何变化,万变不离其宗,其获取表单元素value参数值的方法是相同的,所以本文介绍的方法是很实用的。

展开更多 50%)
分享

猜你喜欢

用Javascript制作会计算的表单

Web开发
用Javascript制作会计算的表单

请先学会计算卡路里

生活常识 生活小常识
请先学会计算卡路里

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

Javascript 验证表单插件

Web开发
Javascript 验证表单插件

Javascript表单应用的对象

Web开发
Javascript表单应用的对象

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript验证整个表单

Web开发
JavaScript验证整个表单

JavaScript表单验证年龄

Web开发
JavaScript表单验证年龄

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

JavaScript/JS实现图象淡出效果

JavaScript/JS实现图象淡出效果

JavaScript引用对象的途径

JavaScript引用对象的途径
下拉加载更多内容 ↓