之前学习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>