Javascript实现基本运算器
网络 2017-09-02 2646
用Javascript实现一个基本的运算器，具体内容如下
使用表格布局，JS添加事件
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 | <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>计算器</title> </head> <style> *{ margin: 0; padding: 0; } table{ width:400px; height: 600px; border-collapse: collapse; margin: auto; } .trr{ width: 400px; height: 100px; } .trr1{ width: 400px; height: 50px; } .tdd{ width: 100px; height: 100px; border: 1px solid silver; text-align: center; line-height: 100px; } .btn{ width: 100%; height: 100%; font-size: 2.5em; } .btn1{ width: 100%; height: 100%; font-size: 2.5em; } .tdd1{ width: 100px; height: 50px; } .text{ height: 100%; font-size: 2.5em; text-align: right; } </style> <body> <table> <tr class="trr text1"> <td class="tdd" colspan="4"><input class="text" type="text" disabled value="0" /></td> </tr> <tr class="trr1"> <td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="c"/></td> <td class="tdd1" colspan="2"><input class="btn1 btn" type="button" value="d"/></td> </tr> <tr class="trr"> <td class="tdd"><input class="btn" type="button" value="7"/></td> <td class="tdd"><input class="btn" type="button" value="8"/></td> <td class="tdd"><input class="btn" type="button" value="9"/></td> <td class="tdd"><input class="btn" type="button" value="/"/></td> </tr> <tr class="trr"> <td class="tdd"><input class="btn" type="button" value="4"/></td> <td class="tdd"><input class="btn" type="button" value="5"/></td> <td class="tdd"><input class="btn" type="button" value="6"/></td> <td class="tdd"><input class="btn" type="button" value="*"/></td> </tr> <tr class="trr"> <td class="tdd"><input class="btn" type="button" value="1"/></td> <td class="tdd"><input class="btn" type="button" value="2"/></td> <td class="tdd"><input class="btn" type="button" value="3"/></td> <td class="tdd"><input class="btn" type="button" value="-"/></td> </tr> <tr class="trr"> <td class="tdd"><input class="btn" type="button" value="0"/></td> <td class="tdd"><input class="btn" type="button" value="."/></td> <td class="tdd"><input class="btn" type="button" value="+"/></td> <td class="tdd"><input class="btn" type="button" value="="/></td> </tr> </table> <script> var obtn=document.getElementsByClassName("btn"); var otext=document.getElementsByClassName("text")[0]; var arr=[];//定义一个数组，向其中存入数字和运算符。 for(var i=0;i<obtn.length;i++){ obtn[i].onclick= function () { if(!isNaN(this.value)||this.value=="."){ //this:代表鼠标点击的obtn if(otext.value.indexOf(".")==-1){ //消除重复"."的BUG if(otext.value.length==0){ if(this.value!="0"){ //---------------------- otext.value+=this.value; //| } //| } //| else if(otext.value.length==1&&otext.value=="0"){//| otext.value=this.value; //| } //| else if(otext.value.length==1&&otext.value!="0"){//初始状态时，若计算器屏幕为"0", otext.value+=this.value; //实现输入一个非零数字的时候，计算器 } //上的数值替换为输入的非零值 else if(otext.value.length>1){ //| otext.value+=this.value; //| } //-------------------- } else { if(this.value!="."){ //消除重复"."的BUG if(otext.value.length==0){ if(obtn[i].value!="0"){ otext.value+=this.value; } } if(otext.value.length>=1){ otext.value+=this.value; } } } } if(this.value=="/"||this.value=="*"||this.value=="+"||this.value=="-"){ if(otext.value!="0"&&otext.value!=""&&otext.value!="-"){ //消除输入重复运算符的BUG， arr[arr.length]=otext.value; //当输入一个运算符的时候，otext内的value值 arr[arr.length]=this.value; //为""(空)，所以判断条件为若otext内的value值不为空 otext.value=""; //则向数字中传值。 } //此时出现无法输入负数值运算的BUG else if(otext.value==""&&this.value=="-"){ //消除无法输入负数值运算的BUG otext.value=this.value; //当点击运算符后otext的value值为空， } //此时判断若this的值为"-",就替换进去。 else if(otext.value=="0"&&this.value=="-"){//此时出现无法执行类似"3--3"的双减法运算BUG， otext.value=this.value; //因为eval()无法识别有双减的字符串值。 } //若初始时，otext值为"0"，并且this的值为 } //"-",则用"-"替换otext中的值。 if(this.value=="="){ if(otext.value.length>=1){ //-------------------- var string=""; //| if(arr[arr.length-1]=="-"&&otext.value<0){ //→消除无法执行类似"3--3"的双减法运算的BUG arr[arr.length-1]="+"; //→当输入负数值的时候，判断arr数组中的 otext.value=Math.abs(otext.value); //→末尾值是否为"-"，若为"-"则把其改为"+", } //→并且让otext.value值取绝对值。 arr[arr.length]=otext.value; //| for(var i=0;i<arr.length;i++){ //| string+=arr[i]; //| } //|把存入数组中的数字和运算符遍历存储到一个字符串中， otext.value=eval(string); //|直接使用eval()方法就可以识别一个的字符串，执行 arr=[]; //|该字符串中的运算 } //| } //--------------------- if(this.value=="c"){ otext.value="0"; arr=[]; } if(this.value=="d"){ otext.value=otext.value.substr(0,otext.value.length-1);//每一次删除otext中的末尾值 if(otext.value==""){ //当把otext中的值删除完后，给 otext.value="0"; //otext复值"0". } } } } </script> </body> </html> |
计算器的”c”功能为清屏；”d”功能为删除一个数；
