JavaScript实现科学计算器

时间:2024-03-09 22:36:24

运行效果:

可实现科学计算器的功能,如: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>