运行效果：
可实现科学计算器的功能，如：PI，sin，cos，tan等
源代码：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title>计算器练习</title> 7 <style type="text/css"> 8 table { 9 margin: 15px auto; 10 font-size: 22px; 11 border: 5px outset orange; 12 13 } 14 15 #tab-1, 16 #tab-2, 17 #tab-3 { 18 border: 3px outset rgba(15, 10, 10, 0.3); 19 } 20 21 input { 22 outline: none; 23 box-shadow: 5px 5px 2px rgba(100, 100, 100, 0.8) inset; 24 } 25 26 #txtnum { 27 text-align: right; 28 height: 50px; 29 width: 100%; 30 background: #fff; 31 font-size: 22px; 32 } 33 34 td { 35 padding: 5px; 36 background: #ccc; 37 38 } 39 40 [type=button] { 41 width: 60px; 42 height: 40px; 43 border-radius: 5px; 44 background: #fff; 45 box-shadow: 5px 3px 2px rgba(100, 100, 100, 0.6) inset; 46 } 47 </style> 48 </head> 49 50 <body> 51 <!-- 主表设计 --> 52 <table id="main" cellspacing="0"> 53 <!-- (tr>td*3)*2 快捷方式--> 54 <tr> 55 <td colspan="2"> 56 <input type="text" id="txtnum" value="0"> 57 </td> 58 <td> 59 <table id="tab-1"> 60 <tr> 61 <td><input type="button" id="cc" value="清除" onclick="txtnum.value=\'0\';result=0 "></td> 62 <td><input type="button" id="tg" value="退格" onclick="backspace()"></td> 63 </tr> 64 </table> 65 </td> 66 </tr> 67 <tr> 68 <td> 69 <table id="tab-2"> 70 <!-- (tr>(td>input)*3)*4 --> 71 <tr> 72 <td><input type="button" id="sin" value="sin" onclick="math(\'sin\')"></td> 73 <td><input type="button" id="cos" value="cos" onclick="math(\'cos\')"></td> 74 <td><input type="button" id="tan" value="tan" onclick="math(\'tan\')"></td> 75 </tr> 76 <tr> 77 <td><input type="button" id="asin" value="asin" onclick="math(\'asin\')"></td> 78 <td><input type="button" id="acon" value="acon" onclick="math(\'acon\')"></td> 79 <td><input type="button" id="atan" value="atan" onclick="math(\'atan\')"></td> 80 </tr> 81 <tr> 82 <td><input type="button" id="PI" value="PI" onclick="math(\'PI\')"></td> 83 <td><input type="button" value="1/x" onclick="math(\'1/x\')"></td> 84 <td><input type="button" value="e" onclick="math(\'e\')"></td> 85 </tr> 86 <tr> 87 <td><input type="button" value="lnx" onclick="math(\'lnx\')"></td> 88 <td><input type="button" value="lgx" onclick="math(\'lgx\')"></td> 89 <td><input type="button" value="sqrt" onclick="math(\'sqrt\')"></td> 90 </tr> 91 </table> 92 </td> 93 <td> 94 <table id="tab-3"> 95 <!-- (tr>(td>input)*3)*4 --> 96 <tr> 97 <td><input type="button" id="" value="7" onclick="num(\'7\')"></td> 98 <td><input type="button" id="" value="8" onclick="num(\'8\')"></td> 99 <td><input type="button" id="" value="9" onclick="num(\'9\')"></td> 100 </tr> 101 <tr> 102 <td><input type="button" id="" value="4" onclick="num(\'4\')"></td> 103 <td><input type="button" id="" value="5" onclick="num(\'5\')"></td> 104 <td><input type="button" id="" value="6" onclick="num(\'6\')"></td> 105 </tr> 106 <tr> 107 <td><input type="button" id="" value="1" onclick="num(\'1\')"></td> 108 <td><input type="button" value="2" onclick="num(\'2\')"></td> 109 <td><input type="button" value="3" onclick="num(\'3\')"></td> 110 </tr> 111 <tr> 112 <td><input type="button" value="0" onclick="num(\'0\')"></td> 113 <td><input type="button" value="." onclick="decimal()"></td> 114 <td><input type="button" value="=" onclick="compute(\'=\')"></td> 115 </tr> 116 </table> 117 </td> 118 <td> 119 <table id="tab-3"> 120 <tr> 121 <td><input type="button" id="" value="+" onclick="compute(\'+\')"></td> 122 <td><input type="button" id="" value="取整" onclick="math(\'i\')"></td> 123 </tr> 124 <tr> 125 <td><input type="button" id="" value="-" onclick="compute(\'-\')"></td> 126 <td><input type="button" id="" value="取余" onclick="compute(\'%\')"></td> 127 </tr> 128 <tr> 129 <td><input type="button" id="" value="*" onclick="compute(\'*\')"></td> 130 <td><input type="button" id="" value="x^y" onclick="compute(\'x^y\')"></td> 131 </tr> 132 <tr> 133 <td><input type="button" id="" value="/" onclick="compute(\'/\')"></td> 134 <td><input type="button" id="" value="+/-" onclick="reverse()"></td> 135 </tr> 136 </table> 137 </td> 138 </tr> 139 </table> 140 <script type="text/javascript"> 141 //operator 运算符 142 var Boo = false; //判断是否按下计算符号的布尔变量； 143 var result = 0; //存储计算数据的变量 144 var ope; //存储计算符号的变量 145 146 function $(x) { 147 return document.getElementById(x); 148 } 149 150 function decimal() { 151 var txt = $(\'txtnum\'); 152 if (Boo) { 153 txt.value = \'0.\'; //若接受过运算符，文本框清零 154 } else { 155 if (txt.value.indexOf(\'.\') == -1) { //判断数值中是否已经有小数点 156 txt.value += \'.\'; //若没有则加上 157 } 158 } 159 Boo = false; //若接受过运算符，文本框不能清零 160 } 161 //indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。 162 //如果要检索的字符串值没有出现，则该方法返回 -1。 163 164 function num(Num) { 165 var txt = $(\'txtnum\'); 166 if (Boo) { 167 txt.value = Num; 168 Boo = false; 169 } else { 170 if (txt.value == \'0\') { 171 txt.value = Num; 172 } else { 173 txt.value += Num; 174 } 175 } 176 } 177 178 function compute(op) { 179 var onum = $(\'txtnum\').value; 180 if (onum == \'\') { onum = 0; } 181 Boo = true; 182 switch (ope) { 183 case \'+\': 184 result += parseFloat(onum); break; 185 case \'-\': 186 result -= parseFloat(onum); break; 187 case \'*\': 188 result *= parseFloat(onum); break; 189 case \'/\': 190 result /= parseFloat(onum); break; 191 case \'=\': 192 result = parseFloat(onum); break; 193 case \'%\': 194 result %= onum; break; 195 //{result%=onum;break;}break; 196 case \'x^y\': 197 result = Math.pow(result, onum); break; 198 //{result=Math.pow(result,onum);break;}break; 199 default: result = parseFloat(onum); break; 200 } 201 $(\'txtnum\').value = result; 202 ope = op; 203 204 } 205 206 function math(op) { 207 var onum = $(\'txtnum\').value; 208 if (onum == \'\') { alert(\'数据不能为空\'); }; 209 Boo = true; 210 with (Math) { 211 switch (op) { 212 case \'sin\': result = sin(onum); break; 213 case \'cos\': result = cos(onum); break; 214 case \'tan\': result = tan(onum); break; 215 case \'asin\': result = asin(onum); break; 216 case \'acos\': result = acos(onum); break; 217 case \'atan\': result = atan(onum); break; 218 case \'PI\': result = PI; break; 219 case \'1/x\': result = 1 / onum; break; 220 case \'e\': result = E; break; 221 case \'lnx\': result = log(onum); break; 222 case \'lgx\': result = log(onum) / log(10); break; 223 224 case \'i\': result = floor(onum); break; 225 226 case \'sqrt\': result = jc(onum); break; 227 default: result = parseFloat(onum); break; 228 } 229 } 230 $(\'txtnum\').value = result; 231 } 232 233 function jc(a) { 234 return Math.sqrt(a); 235 } 236 237 function reverse() { 238 var Num1 = $(\'txtnum\').value; 239 if (Num1 == \'\') { 240 alert(\'数据不能为空\'); 241 } else { 242 $(\'txtnum\').value *= -1; 243 } 244 245 } 246 247 function backspace() { 248 var txt = $(\'txtnum\'); 249 txt.value = txt.value.substring(0, txt.value.length - 1); 250 if (txt.value == \'\') { txt.value = 0; } 251 } 252 </script> 253 </body> 254 255 </html>