js实现文本框支持加减运算的方法

2019-11-20 11:47:51

字体：大中小

来源：转载

供稿：网友

本文实例讲述了js实现文本框支持加减运算的方法。分享给大家供大家参考。具体如下：

这是一个网页表单效果，让表单内的文本框支持加减运算，不过你要按正确的运算式输入，要不然它没有那么智能哦，比如输入1+5，文本框旁边会显示计算结果，这要归功于JavaScript的功能。

运行效果截图如下：

在线演示地址如下：

http://demo.VeVB.COm/js/2015/js-math-input-method-codes/

具体代码如下：

<!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><title>支持加减运算的文本框</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">body{color:#000;font-size:14px;font-family:Verdana,Arial,Helvetica,sans-serif,"宋体";}input{border-style:solid;border-color:#868275;background-color:#f9f9f9;border-width:1px;color:#505050;vertical-align:middle;}</style><script language=javascript>function FloatAdd(arg1,arg2){ var r1,r2,m; try{r1=arg1.toString().split(".")[1].length}catch(e){r1=0} try{r2=arg2.toString().split(".")[1].length}catch(e){r2=0} m=Math.pow(10,Math.max(r1,r2)) return (arg1*m+arg2*m)/m}function FloatSubtr(arg1,arg2){ return FloatAdd(arg1,-arg2);}function IsMoney(Money){ if(/^[/d|+|.|-]+$/.test(Money)) return true; return false;}function result(){ str=document.getElementById("buy").value; if(!(IsMoney(str))){  document.getElementById("amount").innerHTML ="无效金额";  return false; } var len=str.length,money=0,Num=0; var NumStr="",ctrlflag="x",cflag=0; for(var i=0;i<len; i++){  c= str.charAt(i);  if((c=="+")||(c=="-")){   if(i+1<len){    if ((str.charAt(i+1)=="+")||(str.charAt(i+1)=="-")) continue;   }   if((NumStr!="")&&(isNaN(NumStr))){    if(isNaN(NumStr)){     document.getElementById("amount").innerHTML ="输入无效金额";     return false;    }   }   if(NumStr!=""){   //alert("i："+i+"NumStr:"+NumStr);    if ((ctrlflag=="+")||(ctrlflag=="x")){     Num=parseFloat(NumStr);     //alert(ctrlflag+"money："+money+"Num："+Num);     money=FloatAdd(money,Num);     NumStr="";     Num=0;     ctrlflag=c;    }    else{     //alert(money+"里面减了"+NumStr);     Num=parseFloat(NumStr);     money=FloatSubtr(money,Num);     NumStr="";     Num=0;     ctrlflag=c;    }   }   else{    ctrlflag=c;   }  continue;  }  else{   NumStr=NumStr+""+c;  } } if((NumStr!="")&&(isNaN(NumStr))){  if (isNaN(NumStr)){   document.getElementById("amount").innerHTML ="无效金额"+NumStr;   return false;  } } if((ctrlflag=="-")&&(NumStr!="")){  Num=parseFloat(NumStr);   money=FloatSubtr(money,Num); } if(((ctrlflag=="+")||(ctrlflag=="x"))&&((NumStr!=""))){  Num=parseFloat(NumStr);  money=FloatAdd(money,Num); } document.getElementById("amount").innerHTML =money;}</script></head><body>请输入加减计算式：<input id="buy" name="buy" maxlength="30" type="text" onkeyup="javascript:result();"><span id="amount"></span></body></html>

希望本文所述对大家的javascript程序设计有所帮助。

上一篇：jQuery蓝色风格滑动导航栏代码分享

下一篇：JS实现方向键切换输入框焦点的方法