JavaScript实现科学计算器
运行效果：
可实现科学计算器的功能，如：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>
JavaScript实现科学计算器的更多相关文章
- 科学计算器的Java实现
简易的科学计算器的实现 ---Java版 import javax.swing.*;//新的窗口组件包 import java.awt.*; import java.awt.event.*; publ ...
- 想找个计算器当本命？来试试UWP应用《纸书科学计算器》
久违了.上次在博客园发文还是4年前,正是高中参加NOIP的时候.这4年里发生了很多事,乃至再次看到过去的文章时,仿佛看到了自己也不熟悉的风景.最近很想把我的博客重新拾起来,慢慢灌溉,写一些微不足道的技 ...
- 纯javascript代码编写计算器程序
今天来分享一下用纯javascript代码编写的一个计算器程序,很多行业都能用到这个程序,例如做装修预算.贷款利率等等. 首先来看一下完成后的效果: 具体代码如下:(关注我的博客,及时获取最新WEB前 ...
- 整理一些《纸书科学计算器》的小Tips
本文最开始是在2016年的文章 Win10应用<纸书科学计算器>更新啦! 发表之后撰写的,当时那篇文章收到了不少人点赞,应用在国内市场的日下载量也突然上涨,让我感到受宠若惊,这里要感谢Wp ...
- Win10应用《纸书科学计算器》更新啦！
<纸书科学计算器>在2016年8月拿了计算机设计大赛国家一等奖,现在仍记得我在答辩时还给评委们普及了一波UWP平台的知识.受此鼓励,这款应用也不会停下更新的脚步^_^.最近从1.9小幅升级 ...
- html+css+js实现科学计算器
代码地址如下:http://www.demodashi.com/demo/13751.html 项目描述 纯html+css+js实现一个科学计算器,支持平方开方指数对数等基本函数,支持键盘输入,有简 ...
- 调用JavaScript实现字符串计算器
调用JavaScript实现字符串计算器 如果表达式是字符串的形式,那么一般我们求值都会遇到很大的问题. 这里有一种直接调用JavaScript的方法来返回数值,无疑神器. 代码如下: @Fros ...
- 《学习R》笔记：科学计算器、检查变量和工作区、向量、矩阵和数组、列表和数据框
一.第二章 科学计算器 要检查两个数字是否一样,要使用 all.equal() ,不要使用 == ,== 符号仅用于比较两个整型数是否存在相同 . > all.equal(sqrt(2)^2,2 ...
- 数据结构之栈—强大的四则复杂运算计算器(超过windows自带的科学计算器)【中缀转后缀表达式】
比windows自带计算器还强的四则复杂运算计算器! 实测随机打出两组复杂算式:-7.5 * 6 / ( -2 + ( -6.5 - -5.22 ) )与7.5+-3*8/(7+2) windows ...
随机推荐
- Android 12(S) 图形显示系统 - 初识ANativeWindow/Surface/SurfaceControl（七）
题外话 "行百里者半九十",是说步行一百里路,走过九十里,只能算是走了一半.因为步行越接近目的地,走起来越困难.借指凡事到了接近成功,往往是最吃力.最艰难的时段.劝人做事贵在坚持, ...
- LGP6694题解
第一眼似乎很困难,实际上非常简单( 好吧这题我做了一个小时( 首先期望具有线性性,我们转化为计算点对对答案的贡献. 发现相对位置一样的点对对答案的贡献是一样的.我们把相对位置一样的点对铃出来,乘了之后 ...
- Web网站建站过程（白嫖）——域名
目录 1.域名注册商(选一个吧) 2.域名注册 没有域名建啥站? 1.域名注册商(选一个吧) 到时候你们就会想起: ...... 但是我们不用上面的,因为上面的太费Q,我们要用的是-- 2.域名注册 ...
- 切换阿里巴巴开源镜像站镜像——Kali镜像
参考链接: 阿里巴巴开源镜像站 镜像切换参考链接:阿里云Kali镜像源 安装Kali Linux系统参考链接:使用VMware虚拟机安装kali Linux 一.打开终端命令窗口 二.进入source ...
- springcloud学习00-开发工具相关准备
用maven构建springcloud项目,目录结构(图片来源:https://blog.csdn.net/qq_36688143/article/details/82755492) 1.maven ...
- jdr挖的大坑
计数问题小结 很多计数问题在直接拆分计算贡献时都会出现不容易直接表示的情况.在解决这些问题时,往往需要解决一些子问题方案数的递推, 再套用组合数或者分块计算来降低难度或时间复杂度,这里给出几种递推方法 ...
- P2P图书馆实践：让知识更好的传播
人才是每个公司最重要的资产,而人的成长自然就成了最重要的事.苏轼曾经说过:"腹有诗书气自华,代码万行零缺陷",阅读对人成长的影响是巨大的.相信不同的团队都有着自己打造学习氛围.技术 ...
- 【Spring AOP】暴力打通两个切面之间的通信
场景描述 在秒杀微服务中,笔者在需要各种校验前端传来的参数后,通过 Redis 加锁限流(切面A)并返回,最后封装订单数据推送到 RabbitMQ 消息队列(切面B)做善后工作. 问题:如何将 切面 ...
- Dubbo 和 Dubbox 之间的区别？
Dubbox 是继 Dubbo 停止维护后,当当网基于 Dubbo 做的一个扩展项目,如 加了服务可 Restful 调用,更新了开源组件等.
- spring-boot-learning-配置文件相关
Spring-boot的配置文件 springboot通过那个下面的依赖去读取配置文件的上下文: <!-- https://mvnrepository.com/artifact/org. ...