之前學習java的時候就一直想做一個計算器，能讓用戶輸入完所有的數據按等於號再出現結果的那種，在網上找了很久都沒找到我要的，基本都是輸入一個數，輸入第二個就計算出結果的那種，這次學習js，就自己花時間做了一個，大家看看，找找bug，給我點建議，謝謝！
先來張圖：
總體思路：
1、首先要接收用戶輸入的所有數，運算符不能重復輸入
2、實現退格和清除功能
3、計算結果：在這一步花費了我不少的時間，之前是定義連個數組，一個存數，一個存運算符；
通過判斷用戶輸入運算符之后，將前面的輸入的數存入數組，然后將運算符存入數組，可是后來發現太麻煩了，因為使用了退格能夠之后，又要去數組找到那個下標，清除退格掉的，操作起來更復雜了；后來我就直接獲取輸入框的字符串，通過正則表達式拆分字符串存入數組的方式進行計算，省了很多事。
具體的大家就看代碼吧：
script代碼：
1 <script type="text/javascript"> 2 //存輸入的數值 3 var arr=new Array(); 4 //存入輸入的運算符 5 var fuhao=new Array(); 6 //獲取輸入框的字符串 7 var str="0"; 8 var i=0; //記錄下標 9 var j=0; //記錄運算符下標 10 //計算器文本框初始化 11 function chushihua(){ 12 document.myForm.txt2.value=str; 13 } 14 15 //清除文本框初始值 16 function cleanValue(){ 17 document.myForm.txt2.value=""; 18 } 19 //點擊按鈕顯示獲取事件並在文本框顯示 20 function anniu(type){ 21 //接收數據 22 if(type=="0"){ 23 if(document.myForm.txt2.value=="0"){ 24 cleanValue(); 25 str=type; 26 document.myForm.txt2.value=str; 27 }else{ 28 str=str+type; 29 document.myForm.txt2.value=str; 30 } 31 }else if(type=="1"||type=="2"||type=="3"||type=="4"||type=="5"||type=="6"||type=="7"||type=="8"||type=="9"){ 32 if(document.myForm.txt2.value=="0"){ 33 cleanValue(); 34 str=""; 35 str=str+type; 36 document.myForm.txt2.value=str; 37 }else{ 38 str=str+type; 39 document.myForm.txt2.value=str; 40 } 41 }else if(type=="."){ 42 str=str+type; 43 document.myForm.txt2.value=str; 44 }else if(type=="+"||type=="-"||type=="×"||type=="÷"||type=="%"){ 45 //判斷最后一次輸入是不是數字 46 var counet=str.charAt(str.length-1); //獲取輸入的最后一個字符 47 if(isNaN(counet)){ //不是數字，是運算 48 str=str.substring(0,str.length-1); //刪除最后一位 49 str=str+type; 50 document.myForm.txt2.value=str; 51 }else{ //是數字 52 str=str+type; 53 document.myForm.txt2.value=str; 54 } 55 }else if(type=="C"){ //清除數據 56 str=""; 57 number=""; 58 arr.length=0; 59 fuhao.length=0; 60 i=0; 61 j=0; 62 }else if(type=="≮"){ //退格。刪除一位 63 //如果最后一位沒有數字或者為0時顯示為0 64 if(str.length-1==0||str==0){ 65 document.myForm.txt1.value=""; 66 document.myForm.txt2.value="0"; 67 }else{ 68 str=str.substring(0,str.length-1); 69 document.myForm.txt2.value=str; 70 } 71 } 72 } 73 //先計算乘除取余 74 function jisuan_1(){ 75 for(var a=0;a<fuhao.length;a++){ 76 for(var h=0;h<arr.length;h++){ 77 if(fuhao[a]=="*"){ 78 arr[a]=parseFloat(arr[a])*parseFloat(arr[a+1]); 79 arr[a+1]=""; 80 fuhao[a]=""; 81 yidong(); 82 }else if(fuhao[a]=="/"){ 83 arr[a]=parseFloat(arr[a])/parseFloat(arr[a+1]); 84 arr[a+1]=""; 85 fuhao[a]=""; 86 yidong(); 87 }else if(fuhao[a]=="%"){ 88 arr[a]=parseFloat(arr[a])%parseFloat(arr[a+1]); 89 arr[a+1]=""; 90 fuhao[a]=""; 91 yidong(); 92 } 93 }//for 94 }//for 95 } 96 //再算加減 97 function jisuan_2(){ 98 for(var a=0;a<fuhao.length;a++){ 99 for(var h=0;h<arr.length;h++){ 100 if(fuhao[a]=="+"){ 101 arr[a]=parseFloat(arr[a])+parseFloat(arr[a+1]); 102 arr[a+1]=""; 103 fuhao[a]=""; 104 yidong(); 105 }else if(fuhao[a]=="-"){ 106 arr[a]=parseFloat(arr[a])-parseFloat(arr[a+1]); 107 arr[a+1]=""; 108 fuhao[a]=""; 109 yidong(); 110 } 111 }//for 112 113 }//for 114 } 115 //將數組往前移一位 116 function yidong(){ 117 //數字前移 118 for(var a=0;a<arr.length;a++){ 119 if((a+1)<arr.length){ 120 if(arr[a]==""&&arr[a+1]!=""){ 121 arr[a]=arr[a+1]; 122 arr[a+1]=""; 123 } 124 } 125 } 126 //清除符號數組空值 127 for(var i = 0 ;i<fuhao.length;i++){ 128 if(fuhao[i] == "" || typeof(fuhao[i]) == "undefined") { 129 fuhao.splice(i,1); 130 i= i-1; 131 } 132 } 133 } 134 135 //點擊等於算答案 136 function answer(type){ 137 //將等號加上 138 str=str+type; 139 document.myForm.txt2.value=str; 140 //獲取文本框的字符串進行拆分存入數組 141 var string=document.getElementById("txt2").value; 142 document.getElementById("txt1").value=string; 143 var var shu=/[+,\-,×,÷,%,=]/； 144 var fu=/[0-9,.,=]/; 145 for(var h=0;h<string.length;h++){ 146 arr=string.split(shu); 147 } 148 for(var h=0;h<string.length;h++){ 149 fuhao=string.split(fu); 150 } 151 //更換乘除號 152 for(var h=0;h<fuhao.length;h++){ 153 if(fuhao[h]=="×"){ 154 fuhao[h]="*"; 155 }else if(fuhao[h]=="÷"){ 156 fuhao[h]="/"; 157 } 158 } 159 //去除數組空值 160 yidong(); 161 //先乘除取余，后加減 162 jisuan_1(); 163 jisuan_2(); 164 document.getElementById("txt2").value =parseFloat(arr[0]); 165 //清空前面已經計算好的 166 str=""; 167 //測試 168 /*var aa=""; 169 var bb=""; 170 for(i=0;i<arr.length;i++){ 171 aa=aa+arr[i]+","; 172 } 173 for(i=0;i<fuhao.length;i++){ 174 bb=bb+fuhao[i]+","; 175 } 176 document.getElementById("pp").innerHTML =aa+bb;*/ 177 } 178 </script>
html代碼：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>計算器</title> 6 <style type="text/css"> 7 #div2 input{ font-size:40px; height:50px; width:70px; margin-top:10px;} 8 </head> 9 10 <body> 11 12 <div style="width:305px; height:400px; margin:0px auto; border:1px solid #00F; text-align:center;"> 13 <form id="myForm" name="myForm"> 14 <!--文本1，顯示結果--> 15 <div style="width:300px; height:90px; background-color:#0F6; float:left;"> 16 <p><input type="text" id="txt1" name="txt1" size="19" readonly="readonly" style="height:40px; margin-top:-15px; font-size:28.2px; direction:ltr; text-align:right; color:#CCC;"/></p> 17 <!--文本2，顯示輸入數據--> 18 <p><input type="text" id="txt2" name="txt2" value="0" size="19" readonly="readonly" style="height:40px; margin-top:-16px; font-size:28.2px; direction:ltr; text-align:right;"/></p> 19 </div> 20 <!--全部的按鈕--> 21 <div id="div2" style="width:305px; height:310px; background-color:#CCC; float:left;"> 22 <input type="reset" id="clean" value="C" onclick="anniu(this.value);chushihua()"/> 23 <input type="button" id="shanchu" value="≮" onclick="anniu(this.value)"/> 24 <input type="button" id="chu" value="÷" onclick="anniu(this.value)"/> 25 <input type="button" id="cheng" value="×" onclick="anniu(this.value)"/> 26 <input type="button" id="yi" value="1" onclick="anniu(this.value)"/> 27 <input type="button" id="er" value="2" onclick="anniu(this.value)"/> 28 <input type="button" id="san" value="3" onclick="anniu(this.value)"/> 29 <input type="button" id="jia" value="+" onclick="anniu(this.value)"/> 30 <input type="button" id="si" value="4" onclick="anniu(this.value)"/> 31 <input type="button" id="wu" value="5" onclick="anniu(this.value)"/> 32 <input type="button" id="liu" value="6" onclick="anniu(this.value)"/> 33 <input type="button" id="jian" value="-" onclick="anniu(this.value)"/> 34 <input type="button" id="qi" value="7" onclick="anniu(this.value)"/> 35 <input type="button" id="ba" value="8" onclick="anniu(this.value)"/> 36 <input type="button" id="jiu" value="9" onclick="anniu(this.value)"/> 37 <input type="button" id="quyu" value="%" onclick="anniu(this.value)"/> 38 <input type="button" id="lin" value="0" style="width:110px;" onclick="anniu(this.value)"/> 39 <input type="button" id="dian" value="." onclick="anniu(this.value)"/> 40 <input type="button" id="dengyu" value="=" style="width:100px;" onclick="answer(this.value)"/> 41 </div> 42 </form> 43 </div> 44 45 <!--測試--> 46 <h1 id="pp"></h1> 47 48 </body> 49 </html>