Contoh dalam artikel ini menerangkan cara js melaksanakan kotak teks untuk menyokong operasi tambah dan tolak. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:
Ini ialah kesan borang web yang membolehkan kotak teks dalam borang menyokong operasi tambah dan tolak Walau bagaimanapun, anda perlu memasukkan formula pengiraan yang betul, jika tidak, ia tidak begitu bijak, contohnya, jika anda memasukkan 1 5 , pengiraan akan dipaparkan di sebelah kotak teks Akibatnya, ini boleh dilakukan berkat kuasa JavaScript.
Tangkapan skrin kesan berjalan adalah seperti berikut:
Alamat demo dalam talian adalah seperti berikut:
http://demo.jb51.net/js/2015/js-math-input-method-codes/
Kod khusus adalah seperti berikut:
<!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>
Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.