首页 / JAVASCRIPT / JavaScript实现科学计算器

JavaScript实现科学计算器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript实现科学计算器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9946字，纯文字阅读大概需要15分钟。

内容图文

运行效果：

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实现科学计算器全部内容，希望文章能够帮你解决JavaScript实现科学计算器所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/688553.html

来源：【匿名】

【上一篇】JavaScript-W3School-Browser 对象：Window open() 方法【下一篇】javascript 怎么调用php方法

更多 ►

【JavaScript实现科学计算器】教程文章相关的互联网学习教程文章

使用HTML+CSS+javascript实现简易计算器【代码】【图】

使用HTML+CSS+javascript实现简易计算器奉上在javascript学习期间写的小程序（简易计算机）一、先上图：二、实现过程：1.页面结构如下：<body><div id="sDiv"><div id="show"><div id="showme"></div></div><input type="text" id="result" readOnly="true" value="0"><br><input type="button" onclick="s(‘0‘)" id="res" class="btncss" value="C"><input type="button" onclick="operator(‘backspace‘)" id="del" class="b...

JavaScript简易计算器【代码】【图】

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。javascript组成 ECMAScript，描述了该语言的语法和基本对象。文档对象模型（DOM），描述处理网页内容的方法和接口。浏览器对象模型（BOM），描述与浏览器进行交互的方法...

JavaScript-计算器【代码】

1事件周期2DOM：3个阶段3 1.捕获:从最外层元素,向内层元素,逐个记录绑定的事件处理函数。默认,暂不触发任何事件4 2.目标触发:优先触发目标元素绑定的事件处理函数5 目标元素:实际点击的元素6 3.冒泡:按照捕获的顺序，由内层，向外层逐层触发捕获的事件处理函数7修改事件触发的顺序:8 btn.addEventListener("事件名称",函数对象,capture)9其中:capture表示是否在捕获阶段就提前触发 10 默认false,只在冒泡阶段才触发 11 ...

用js 写计算器【代码】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html><head><meta http-equiv = "content-type" content="text/html;charset=utf-8"/><script src="js.js" type="text/javascript" language="javascript"></script></head><body><form><input type="button" value="1" onclick = "cal(this.value);"/> <input type="button" value="2" onclick ...

JS简易计算器——代码优化【代码】【图】

这里用一个简易计算器的案例，来说明代码的一种优化思路和具体方法结构和样式　　先放上该项目的HTML和CSS部分 1<!DOCTYPE html> 2<html lang="en"> 3<head> 4<meta charset="UTF-8"> 5<meta name="viewport" content="width=device-width, initial-scale=1.0"> 6<meta http-equiv="X-UA-Compatible" content="ie=edge"> 7<title>简易计算器</title> 8<style> 9 ...

如何用HTML+CSS+JavaScript制作简易计算器【图】

JavaScript是前端开发中必不可少的一部分，因为页面功能的实现离不开JS，作为一个前端开发人员，你会用JavaScript制作一个简易计算器吗？这篇文章就给大家讲讲如何用HTML、CSS、JavaScript制作一个简易计算器，并且能够实现加减乘除的功能，有一定的参考价值，感兴趣的朋友可以看看。制作一个简单的计算器需要用到很多CSS属性、HTML标签和JavaScript知识，如有不清楚的同学可以参考PHP中文网的相关文章，或者访问 JavaScript视频教...

javascript脚本实现贷款计算器功能（代码全）

<!DOCTYPE html> <html lang="en" dir="ltr"><head><meta charset="utf-8"><title>javascript学习</title><style>.output {font-weight: bold;}#payment {text-decoration: underline;}#graph {border: solid black 1px;}th,td {vertical-align: top;}</style></head><body><table><tr><th>Enter Loan Data:</th><td></td><th>Loan Balance,Cumulative Equity,and Interest Payments</th></tr><tr><td>Amount of the loan ($):</td...

在JS中如何实现网页版计算器

这篇文章主要介绍了JS基于递归实现网页版计算器的方法,结合实例形式分析了javascript采用递归算法实现网页版计算器的步骤与相关操作技巧,需要的朋友可以参考下本文实例讲述了JS基于递归实现网页版计算器的方法。分享给大家供大家参考，具体如下：递归实现网页版计算器可以简化代码，设计思路：1、css＋html实现计算器的外观，给每个button绑定number(z)事件，传入z的不同来区分触发事件的按钮。<style>放入head中这个p放在body中，...

使用JavaScript如何实现计算器【图】

这篇文章主要介绍了JavaScript实现的超简单计算器功能,可实现基本的四则运算并带有验证功能,代码中备有较为详尽的注释便于理解,需要的朋友可以参考下本文实例讲述了JavaScript实现的超简单计算器功能。分享给大家供大家参考，具体如下：先来看看运行效果：具体代码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com JS计算器</title><script type="text/javascript">// window.onload 获取元...

JS实现计算器步骤详解【图】

这次给大家带来JS实现计算器步骤详解，JS实现计算器步的注意事项有哪些，下面就是实战案例，一起来看一下。自己期末复习的时候就一直想要写一个计算器，闲暇的时候也在想具体怎么实现，觉得应该不难，但就是想写。昨天终于可以开始动工，刚开始还以为实现出来需要一个周左右至少两天的时间，想着实现完我就可以先回家两天了。但没想到整个实现过程算比较顺利吧，昨天用了大概六个小时完成了从设计到具体实现。有大概一个月没怎么写...

JS实现一个简易的计算器步骤详解【图】

这次给大家带来JS实现一个简易的计算器步骤详解，JS实现一个简易的计算器的注意事项有哪些，下面就是实战案例，一起来看一下。自己期末复习的时候就一直想要写一个计算器，闲暇的时候也在想具体怎么实现，觉得应该不难，但就是想写。昨天终于可以开始动工，刚开始还以为实现出来需要一个周左右至少两天的时间，想着实现完我就可以先回家两天了。但没想到整个实现过程算比较顺利吧，昨天用了大概六个小时完成了从设计到具体实现。有...

js代码实现计算器

这篇文章介绍的内容是关于js代码实现计算器，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function myjs(){ var ft = document.getElementById("fhv").value; var v1 = document.getElementById("v1").value; var v2 = document.getElementById("v2").value; var v3 = ; //alert(ft); //alert(v1); //al...

JS使用递归实现网页版简洁计算器

这次给大家带来JS使用递归实现网页版简洁计算器，JS使用递归实现网页版简洁计算器的注意事项有哪些，下面就是实战案例，一起来看一下。递归实现网页版计算器可以简化代码，设计思路：1、css＋html实现计算器的外观，给每个button绑定number(z)事件，传入z的不同来区分触发事件的按钮。<style>放入head中这个p放在body中，是计算器的html，number()通过传入不同的数字，区分触发按钮。<p class="bg"><p id="txt"></p><button id="bt...

JS实现计算器功能最简洁方法

这次给大家带来JS实现计算器功能最简洁方法，JS实现计算器功能的注意事项有哪些，下面就是实战案例，一起来看一下。具体代码：<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>www.gxlcms.com JS计算器</title><script type="text/javascript">// window.onload 获取元素getElementByIdwindow.onload = function(){var oTxt1 = document.getElementById(val01);var oTxt2 = document.getElementById(val02);...

javascript如何实现计算器功能【图】

这次给大家带来javascript如何实现计算器功能，javascript实现计算器功能的注意事项有哪些，下面就是实战案例，一起来看一下。这个计算机主要通过二维数组将其存在一个数组中，再通过函数控制显示出的效果，有些键位占着两列，通过colspan函数合并两列，先将整个计算机的外部样式设计出来，主要实现代码以及效果图如下所示：var btns=[[{text:"AC",id:"btn_C",value:"c",col:1},{text:"Del",id:"btn_JJ",value:"?",col:1},{text:"%...

首页 / JAVASCRIPT / JavaScript实现科学计算器

JavaScript实现科学计算器

内容导读

内容图文

内容总结

内容备注

内容手机端

【JavaScript实现科学计算器】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程