运行效果：
可实现科学计算器的功能，如：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>