js實現科學計算機
一、總結
1、算法：這個科學計算機是用普通基礎算法實習的，沒有用棧，用棧要簡單很多，
2、發現規律，編程分類：編程的時候，運算符分兩種，一元運算符和二元運算符，分類了就好寫很多了。
3、用了一個全局變量來記錄是否已經按下了運算符鍵。
4、js中with()函數：with函數中，屬性的對象名可以省略，因為with中有。
5、substring函數：截取字符串，退格的時候用。
6、(tr>(td>input)*3)*4：快速輸出html標簽，>號表示從屬，*n表示n個
7、css樣式要好好看看
二、js實現科學計算機
截圖
代碼
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>計算器練習</title> 6 <style type="text/css"> 7 table{ 8 margin: 15px auto; 9 font-size: 22px; 10 border:5px outset orange; 11 12 } 13 #tab-1,#tab-2,#tab-3{ 14 border:3px outset rgba(15,10,10,0.3); 15 } 16 input{ 17 outline: none; 18 box-shadow:5px 5px 2px rgba(100,100,100,0.8) inset; 19 } 20 21 #txtnum{ 22 text-align: right; 23 height: 50px; 24 width: 100%; 25 background:#fff; 26 font-size: 22px; 27 } 28 td{ 29 padding: 5px; 30 background: #ccc; 31 32 } 33 [type=button]{ 34 width: 60px; 35 height: 40px; 36 border-radius: 5px; 37 background: #fff; 38 box-shadow:5px 3px 2px rgba(100,100,100,0.6) inset; 39 } 40 </style> 41 </head> 42 <body> 43 <!-- 主表設計 --> 44 <table id="main" cellspacing="0"> 45 <!-- (tr>td*3)*2 快捷方式--> 46 <tr> 47 <td colspan="2"> 48 <input type="text" id="txtnum" value="0" > 49 </td> 50 <td> 51 <table id="tab-1"> 52 <tr> 53 <td><input type="button" id="cc" value="清除" 54 onclick="txtnum.value='0';result=0 "></td> 55 <td><input type="button" id="tg" value="退格" 56 onclick="backspace()"></td> 57 </tr> 58 </table> 59 </td> 60 </tr> 61 <tr> 62 <td> 63 <table id="tab-2"> 64 <!-- (tr>(td>input)*3)*4 --> 65 <tr> 66 <td><input type="button" id="sin" value="sin" 67 onclick="math('sin')"></td> 68 <td><input type="button" id="cos" value="cos" 69 onclick="math('cos')"></td> 70 <td><input type="button" id="tan" value="tan" 71 onclick="math('tan')"></td> 72 </tr> 73 <tr> 74 <td><input type="button" id="asin" value="asin" 75 onclick="math('asin')"></td> 76 <td><input type="button" id="acon" value="acon" 77 onclick="math('acon')"></td> 78 <td><input type="button" id="atan" value="atan" 79 onclick="math('atan')"></td> 80 </tr> 81 <tr> 82 <td><input type="button" id="PI" value="PI" 83 onclick="math('PI')"></td> 84 <td><input type="button" value="1/x" 85 onclick="math('1/x')"></td> 86 <td><input type="button" value="exp" 87 onclick="math('exp')"></td> 88 </tr> 89 <tr> 90 <td><input type="button" value="lnx" 91 onclick="math('lnx')"></td> 92 <td><input type="button" value="lgx" 93 onclick="math('lgx')"></td> 94 <td><input type="button" value="n!" 95 onclick="math('n!')"></td> 96 </tr> 97 </table> 98 </td> 99 <td> 100 <table id="tab-3"> 101 <!-- (tr>(td>input)*3)*4 --> 102 <tr> 103 <td><input type="button" id="" value="7" 104 onclick="num('7')"></td> 105 <td><input type="button" id="" value="8" 106 onclick="num('8')"></td> 107 <td><input type="button" id="" value="9" 108 onclick="num('9')"></td> 109 </tr> 110 <tr> 111 <td><input type="button" id="" value="4" 112 onclick="num('4')"></td> 113 <td><input type="button" id="" value="5" 114 onclick="num('5')"></td> 115 <td><input type="button" id="" value="6" 116 onclick="num('6')"></td> 117 </tr> 118 <tr> 119 <td><input type="button" id="" value="1" 120 onclick="num('1')"></td> 121 <td><input type="button" value="2" 122 onclick="num('2')"></td> 123 <td><input type="button" value="3" 124 onclick="num('3')"></td> 125 </tr> 126 <tr> 127 <td><input type="button" value="0" 128 onclick="num('0')"></td> 129 <td><input type="button" value="." onclick="decimal()"></td> 130 <td><input type="button" value="=" 131 onclick="compute('=')"></td> 132 </tr> 133 </table> 134 </td> 135 <td> 136 <table id="tab-3"> 137 <tr> 138 <td><input type="button" id="" value="+" 139 onclick="compute('+')"></td> 140 <td><input type="button" id="" value="取整" 141 onclick="math('i')"></td> 142 </tr> 143 <tr> 144 <td><input type="button" id="" value="-" 145 onclick="compute('-')"></td> 146 <td><input type="button" id="" value="取余" 147 onclick="compute('%')"></td> 148 </tr> 149 <tr> 150 <td><input type="button" id="" value="*" 151 onclick="compute('*')"></td> 152 <td><input type="button" id="" value="x^y" 153 onclick="compute('x^y')"></td> 154 </tr> 155 <tr> 156 <td><input type="button" id="" value="/" 157 onclick="compute('/')"></td> 158 <td><input type="button" id="" value="+/-" 159 onclick="reverse()"></td> 160 </tr> 161 </table> 162 </td> 163 </tr> 164 </table> 165 <script type="text/javascript"> 166 //operator 運算符 167 var Boo=false; //判斷是否按下計算符號的布爾變量； 168 var result=0; //存儲計算數據的變量 169 var ope; //存儲計算符號的變量 170 171 function $(x){ 172 return document.getElementById(x) 173 } 174 175 function decimal(){ 176 var txt=$('txtnum'); 177 if(Boo){ 178 txt.value='0.' //若接受過運算符，文本框清零 179 } else{ 180 if (txt.value.indexOf('.')==-1) { //判斷數值中是否已經有小數點 181 txt.value+='.'; //若沒有則加上 182 } 183 } 184 Boo=false; //若接受過運算符，文本框不能清零 185 } 186 //indexOf() 方法可返回某個指定的字符串值在字符串中首次出現的位置。 187 //如果要檢索的字符串值沒有出現，則該方法返回 -1。 188 189 function num(Num){ 190 var txt=$('txtnum'); 191 if (Boo) { 192 txt.value=Num; 193 Boo=false; 194 }else{ 195 if (txt.value=='0') { 196 txt.value=Num 197 }else{ 198 txt.value+=Num; 199 } 200 } 201 } 202 203 function compute(op){ 204 var onum=$('txtnum').value; 205 if (onum=='') {onum=0} 206 Boo=true; 207 switch(ope){ 208 case '+': 209 result+=parseFloat(onum);break; 210 case '-': 211 result-=parseFloat(onum);break; 212 case '*': 213 result*=parseFloat(onum);break; 214 case '/': 215 result/=parseFloat(onum);break; 216 case '=': 217 result=parseFloat(onum);break; 218 case '%': 219 result%=onum;break; 220 //{result%=onum;break;}break; 221 case 'x^y': 222 result=Math.pow(result,onum);break; 223 //{result=Math.pow(result,onum);break;}break; 224 default:result=parseFloat(onum) 225 } 226 $('txtnum').value=result; 227 ope=op; 228 229 } 230 231 function math(op){ 232 var onum=$('txtnum').value; 233 if (onum==''){alert('數據不能為空')}; 234 Boo=true; 235 with(Math){ 236 switch(op){ 237 case 'sin':result=sin(onum);break; 238 case 'cos':result=cos(onum);break; 239 case 'tan':result=tan(onum);break; 240 case 'asin':result=asin(onum);break; 241 case 'acos':result=acos(onum);break; 242 case 'atan':result=atan(onum);break; 243 case 'PI':result=PI;break; 244 case '1/x':result=1/onum;break; 245 case 'exp':result=exp(onum);break; 246 case 'lnx':result=log(onum);break; 247 case 'lgx':result=log(onum)/log(10);break; 248 249 case 'i':result=floor(onum);break; 250 251 case 'n!':result=jc(onum);break; 252 default:result=parseFloat(onum); 253 } 254 } 255 $('txtnum').value=result; 256 } 257 258 function jc(a){ 259 if(a==1){ 260 return 1; 261 }else{ 262 return jc(a-1)*a 263 } 264 } 265 function reverse(){ 266 var Num1=$('txtnum').value; 267 if (Num1=='') { 268 alert('數據不能為空') 269 }else{ 270 $('txtnum').value*=-1; 271 } 272 273 } 274 275 function backspace(){ 276 var txt=$('txtnum'); 277 txt.value=txt.value.substring(0,txt.value.length-1); 278 if (txt.value=='') {txt.value=0} 279 } 280 </script> 281 </body> 282 </html>