本文通过三个演示案例介绍JavaScript中不同类型的数值运算及其转换方法，包括整数与浮点数的加法运算，并展示了如何使用加号进行字符串拼接。
演示了三种情况下的运算,当然这里只是演示了 + 其实减,乘,除,都差不多，但是切记,只有加号可以用与连接字符串,别试图用减号等去操作字符串!!
<%
@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>简单运算/类型转换</title>
<script language="javascript">
function ABadd()
{//下面申明两个变量,并把文本框的值拿过来转换成整数类型交给变量
var a=parseInt(document.add.inputa.value);
var b=parseInt(document.add.inputb.value);
//下面是把名称为C的文本框的值赋成 上面两变量相加的结果
document.add.c.value=a+b;
}
function FABadd()
{//这里大部分和上面的一样,只是转换成浮点类型数据的
var fa=parseFloat(document.form1.fa.value);
var fb=parseFloat(document.form1.fb.value);
document.form1.fc.value=fa+fb;
}
function Tostr()
{
var sa=document.str.sa.value;
var sb=document.str.sb.value;
document.str.sc.value= sa + sb ;
}
</script>
</head>
<body>
<form name="add">
<p>演示一 : 在下面两个文本框里分别输入一个数字,看结果 </p>
<p>
<input type="text" name="inputa" />
+
<input type="text" name="inputb" onchange="ABadd()" /><!--本文本框输入完成后调用 ABadd()函数处理 -->
=
<input type="text" name="c" />
</p>
</form>
<p>演示二:上面的演示有一个严重的问题,他都是转换成整数类型的,如果输入小数,也只能得出整数,这就导致了结果的不准确,下面演示则转换成了浮点型数据换句话说就是可以得到精确的小数位运算</p>
<form id="form1" name="form1">
<input type="text" name="fa" />
+
<input type="text" name="fb" onchange="FABadd()" />
=
<input type="text" name="fc" />
</form>
<p>但是这里还是会有个问题,如果用户在里面输入的是字符呢?怎么办?那么请继续关注 <a href="http://thcjp.cnblogs.com">http://thcjp.cnblogs.com</a> 或者搜索 <a href="http://thcjp.cnblogs.com">天轰穿</a>我将会从JS到AJAX和ATLAS一直到.net(c#)与AJAX的整合出一系列的入门级实例教程</p>
<p>演示三 : 加号(+) 被用着连接符,这里他是不会当成算术运算符用的</p>
<form id="str" name="str" method="post" action="">
<input name="sa" type="text" id="sa" />
+
<input name="sb" type="text" id="sb" onchange="Tostr()" />
=
<input name="sc" type="text" id="sc" />
</form>
<p> </p>
</body>
</html>
<%@LANGUAGE="JAVASCRIPT" CODEPAGE="936"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>简单运算/类型转换</title><script language="javascript">function ABadd(){//下面申明两个变量,并把文本框的值拿过来转换成整数类型交给变量 var a=parseInt(document.add.inputa.value); var b=parseInt(document.add.inputb.value); //下面是把名称为C的文本框的值赋成 上面两变量相加的结果 document.add.c.value=a+b;}function FABadd(){//这里大部分和上面的一样,只是转换成浮点类型数据的 var fa=parseFloat(document.form1.fa.value); var fb=parseFloat(document.form1.fb.value); document.form1.fc.value=fa+fb;}function Tostr(){ var sa=document.str.sa.value; var sb=document.str.sb.value; document.str.sc.value= sa + sb ;}</script></head><body><form name="add"> <p>演示一 : 在下面两个文本框里分别输入一个数字,看结果 </p> <p> <input type="text" name="inputa" /> + <input type="text" name="inputb" onchange="ABadd()" /><!--本文本框输入完成后调用 ABadd()函数处理 --> = <input type="text" name="c" /> </p></form><p>演示二:上面的演示有一个严重的问题,他都是转换成整数类型的,如果输入小数,也只能得出整数,这就导致了结果的不准确,下面演示则转换成了浮点型数据换句话说就是可以得到精确的小数位运算</p><form id="form1" name="form1"> <input type="text" name="fa" /> + <input type="text" name="fb" onchange="FABadd()" /> = <input type="text" name="fc" /></form><p>但是这里还是会有个问题,如果用户在里面输入的是字符呢?怎么办?那么请继续关注 <a href="http://thcjp.cnblogs.com">http://thcjp.cnblogs.com</a> 或者搜索 <a href="http://thcjp.cnblogs.com">天轰穿</a>我将会从JS到AJAX和ATLAS一直到.net(c#)与AJAX的整合出一系列的入门级实例教程</p><p>演示三 : 加号(+) 被用着连接符,这里他是不会当成算术运算符用的</p><form id="str" name="str" method="post" action=""> <input name="sa" type="text" id="sa" /> + <input name="sb" type="text" id="sb" onchange="Tostr()" /> = <input name="sc" type="text" id="sc" /></form><p> </p></body></html>
扫一扫
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
