本文實例講述了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程序設計有所幫助。
新聞熱點
疑難解答
