简易计算器
时间:2019-10-24
本文章向大家介绍简易计算器，主要包括简易计算器使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定的参考价值，需要的朋友可以参考一下。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 4 <head> 5 <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 6 <title>简易计算器</title> 7 <style type="text/css"> 8 .style1 { 9 border: 2px solid #C0C0C0; 10 background-color: #C0C0C0; 11 } 12 .style2 { 13 border: 3px solid #C0C0C0; 14 } 15 .style3 { 16 border-left: 2px solid #C0C0C0; 17 border-right: 2px solid #808080; 18 border-top: 2px solid #C0C0C0; 19 border-bottom: 2px solid #808080; 20 background-color: #C0C0C0; 21 } 22 .style4{ 23 font-family: 华文新魏; 24 font-size: xx-large; 25 font-weight: bold; 26 background-color: #FFFFFF; 27 width: 80px; height: 50px; 28 } 29 #TextArea1 30 { 31 height: 63px; 32 width: 349px; 33 } 34 #txtResult 35 { 36 height: 61px; 37 width: 344px; 38 } 39 #Text1 40 { 41 height: 47px; 42 width: 343px; 43 } 44 </style> 45 </head> 46 <script language="javascript" > 47 48 49 //计算中要用到的变量 50 var formulaToShow=""; //要显示的计算式 51 var formulaToCalcu="";//要计算的计算式 52 var result=" "; //计算结果 53 var saved="0"; //存储的数 54 55 56 //生成计算式的函数 57 function TypeFormula(com) 58 { 59 //如果是已经求过值，则清屏并重新开始计算 60 if((result!=" "||result=="0") && com!="save"){ 61 formulaToShow=""; 62 result=" "; 63 } 64 65 //得到按钮信息 66 switch(com) 67 { 68 case "clear"://清空 69 formulaToShow=""; 70 result=" "; 71 break; 72 case "back"://退格（这个写的有些冗余） 73 {var f=formulaToShow; 74 if(f.substring(f.length-5,f.length)=="asin("||f.substring(f.length-5,f.length)=="acos("||f.substring(f.length-5,f.length)=="atan("||f.substring(f.length-5,f.length)=="sqrt(") 75 formulaToShow=formulaToShow.substring(0,formulaToShow.length-5); 76 else if(f.substring(f.length-4,f.length)=="sin("||f.substring(f.length-4,f.length)=="cos("||f.substring(f.length-4,f.length)=="tan("||f.substring(f.length-4,f.length)=="exp(") 77 formulaToShow=formulaToShow.substring(0,formulaToShow.length-4); 78 else if(f.substring(f.length-3,f.length)=="ln(") 79 formulaToShow=formulaToShow.substring(0,formulaToShow.length-3); 80 else 81 formulaToShow=formulaToShow.substring(0,formulaToShow.length-1); 82 } 83 break; 84 85 case "sign": 86 {if (formulaToShow=="")formulaToShow="-"; 87 else if(formulaToShow[0]=="-")formulaToShow=formulaToShow.substring(1,formulaToShow.length); 88 else formulaToShow="-"+formulaToShow;} 89 break; 90 case "save": 91 saved=formulaToShow; 92 break; 93 case "getsave": 94 formulaToShow=formulaToShow+saved; 95 break; 96 case "result"://计算结果 97 {if(formulaToShow=="") result=" "; 98 else { 99 formulaToCalcu=formulaToShow.toString(); 100 formulaToCalcu=formulaToCalcu.replace(/sin/g, "Math.sin"); 101 formulaToCalcu=formulaToCalcu.replace(/cos/g, "Math.cos"); 102 formulaToCalcu=formulaToCalcu.replace(/tan/g, "Math.tan"); 103 formulaToCalcu=formulaToCalcu.replace(/asin/g, "Math.asin"); 104 formulaToCalcu=formulaToCalcu.replace(/aMath.sin/g, "Math.asin"); 105 formulaToCalcu=formulaToCalcu.replace(/acos/g, "Math.acos"); 106 formulaToCalcu=formulaToCalcu.replace(/aMath.cos/g, "Math.acos"); 107 formulaToCalcu=formulaToCalcu.replace(/atan/g, "Math.atan"); 108 formulaToCalcu=formulaToCalcu.replace(/aMath.tan/g, "Math.atan"); 109 formulaToCalcu=formulaToCalcu.replace(/exp/g, "Math.exp"); 110 formulaToCalcu=formulaToCalcu.replace(/ln/g, "Math.log"); 111 formulaToCalcu=formulaToCalcu.replace(/sqrt/g, "Math.sqrt"); 112 113 try {result=eval(formulaToCalcu);} 114 catch (exception) { 115 window.alert(exception); } 116 } 117 } 118 break; 119 default: 120 formulaToShow+=com; 121 break; 122 } 123 124 txtShow.innerHTML=formulaToShow+"<br/>"+result+"<br/>"; 125 } 126 127 </script> 128 <body> 129 130 <form id="calculator" action="" method="post"> 131 <table align="center" class="style2" style="width: 24%"> 132 <tr> 133 <td class="style3" style="height: 27px; font-family: 华文新魏; font-size: medium; font-weight: bold; background-color: #FFFFFF;" colspan="7"> 134 <div id="txtShow" 135 style="font-family: 华文新魏; font-size: xx-large; font-weight: bold; text-align: right"> 136 <br/><br/> 137 </div> 138 </td> 139 </tr> 140 <tr> 141 <td class="style3" style="width: 20px"> 142 <input name="btnResult" class="style4" type="button" value="=" id="btnResult" onclick="TypeFormula('result')"/></td> 143 <td class="style1" style="width: 75px"> 144 <input name="btnLeft" class="style4" type="button" value="(" id="btnLeft" onclick="TypeFormula('(')"/></td> 145 <td class="style1" style="width: 75px"> 146 <input name="btnRight" class="style4" type="button" value=")" id="btnRight" onclick="TypeFormula(')')"/></td> 147 <td class="style1" style="width: 55px"> 148 <input name="btnBack" class="style4" type="button" value="退格" id="btnBack" onclick="TypeFormula('back')"/></td> 149 <td class="style1" style="width: 55px"> 150 <input name="btnClear" class="style4" type="button" value="清屏" id="btnClear" onclick="TypeFormula('clear')"/></td> 151 <td class="style1" style="width: 55px"> 152 <input name="btnSave" class="style4" type="button" value="存储" id="btnSave" onclick="TypeFormula('save')"/></td> 153 <td class="style1" style="width: 55px"> 154 <input name="btnGetSave" class="style4" type="button" value="取存" id="btnGetSave" onclick="TypeFormula('getsave')"/></td> 155 </tr> 156 <tr> 157 <td class="style1" style="width: 20px"> 158 <input name="btnNo7" class="style4" type="button" value="7" id="btnNo7" onclick="TypeFormula('7')"/></td> 159 <td class="style1" style="width: 75px"> 160 <input name="btnNo8" class="style4" type="button" value="8" id="btnNo8" onclick="TypeFormula('8')"/></td> 161 <td class="style1" style="width: 75px"> 162 <input name="btnNo9" class="style4" type="button" value="9" id="btnNo9" onclick="TypeFormula('9')"/></td> 163 <td class="style1" style="width: 55px"> 164 <input name="btnAdd" class="style4" type="button" value="+" id="btnAdd" onclick="TypeFormula('+')"/></td> 165 <td class="style1" style="width: 55px"> 166 <input name="btnMod" class="style4" type="button" value="%" id="btnMod" onclick="TypeFormula('%')"/></td> 167 <td class="style1" style="width: 55px"> 168 </td> 169 <td class="style1" style="width: 55px"> 170 </td> 171 </tr> 172 <tr> 173 <td class="style1" style="width: 20px"> 174 <input name="btnNo4" class="style4" type="button" value="4" id="btnNo4" onclick="TypeFormula('4')"/></td> 175 <td class="style1" style="width: 75px"> 176 <input name="btnNo5" class="style4" type="button" value="5" id="btnNo5" onclick="TypeFormula('5')"/></td> 177 <td class="style1" style="width: 75px"> 178 <input name="btnNo6" class="style4" type="button" value="6" id="btnNo6" onclick="TypeFormula('6')"/></td> 179 <td class="style1" style="width: 55px"> 180 <input name="btnSub" class="style4" type="button" value="-" id="btnSub" onclick="TypeFormula('-')"/></td> 181 <td class="style1" style="width: 55px"> 182 <input name="btnSqrt" class="style4" type="button" value="sqrt" id="btnSqrt" onclick="TypeFormula('sqrt(')"/></td> 183 <td class="style1" style="width: 55px"> 184 <input name="btnLn" class="style4" type="button" value="ln" id="btnLn" onclick="TypeFormula('ln(')"/></td> 185 <td class="style1" style="width: 55px"> 186 <input name="btnExp" class="style4" type="button" value="exp" id="btnExp" onclick="TypeFormula('exp(')"/></td> 187 </tr> 188 <tr> 189 <td class="style1" style="width: 20px"> 190 <input name="btnNo1" class="style4" type="button" value="1" id="btnNo1" onclick="TypeFormula('1')"/></td> 191 <td class="style1" style="width: 75px"> 192 <input name="btnNo2" class="style4" type="button" value="2" id="btnNo2" onclick="TypeFormula('2')"/></td> 193 <td class="style1" style="width: 75px"> 194 <input name="btnNo3" class="style4" type="button" value="3" id="btnNo3" onclick="TypeFormula('3')"/></td> 195 <td class="style1" style="width: 55px"> 196 <input name="btnMul" class="style4" type="button" value="*" id="btnMul" onclick="TypeFormula('*')"/></td> 197 <td class="style1" style="width: 55px"> 198 <input name="btnSin" class="style4" type="button" value="sin" id="btnSin" onclick="TypeFormula('sin(')"/></td> 199 <td class="style1" style="width: 55px"> 200 <input name="btnCos" class="style4" type="button" value="cos" id="btnCos" onclick="TypeFormula('cos(')"/></td> 201 <td class="style1" style="width: 55px"> 202 <input name="btnTan" class="style4" type="button" value="tan" id="btnTan" onclick="TypeFormula('tan(')"/></td> 203 </tr> 204 <tr> 205 <td class="style1" style="width: 20px"> 206 <input name="btnNo0" class="style4" type="button" value="0" id="btnNo0" onclick="TypeFormula(0)"/></td> 207 <td class="style1" style="width: 75px"> 208 <input name="btnPoint" class="style4" type="button" value="." id="btnPoint" onclick="TypeFormula('.')"/></td> 209 <td class="style1" style="width: 75px"> 210 <input name="btnPoint" class="style4" type="button" value="+/-" id="btnSign" onclick="TypeFormula('sign')"/></td> 211 <td class="style1" style="width: 55px"> 212 <input name="btnDiv" class="style4" type="button" value="/" id="btnDiv" onclick="TypeFormula('/')"/></td> 213 <td class="style1" style="width: 55px"> 214 <input name="btnAsin" class="style4" type="button" value="asin" id="btnAsin" onclick="TypeFormula('asin(')"/></td> 215 <td class="style1" style="width: 55px"> 216 <input name="btnacos" class="style4" type="button" value="acos" id="btnacos" onclick="TypeFormula('acos(')"/></td> 217 <td class="style1" style="width: 55px"> 218 <input name="btnAtan" class="style4" type="button" value="atan" id="btnAtan" onclick="TypeFormula('atan(')"/></td> 219 </tr> 220 </table> 221 </form> 222 223 </body> 224 225 </html>
原文地址：https://www.cnblogs.com/yanghx/p/11731181.html
- Jenkins迁移及日常操作的一点总结
- Nginx反向代理中使用proxy_redirect重定向url
- python try/except/finally
- Jumpserver双机高可用环境部署笔记
- 性能优化
- Nginx基于TCP/UDP端口的四层负载均衡（stream模块）配置梳理
- VB6对滚轮的支持
- 文件实时同步后防篡改的操作记录
- web中的水晶报表 "出现通信错误。将停止打印"
- nginx反向代理中proxy_set_header 运维笔记
- 期待已久的直播能力开放了！年底之前来波大的
- 两个目录中，删除其中一个目录中同名文件的做法
- linux下监控某个目录是否被更改
- centos下升级git版本的操作记录
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Flink部署及作业提交（On YARN）
- Flink部署及作业提交（On Flink Standalone）
- MySQL题集
- 《深入浅出SQL》问答录
- Python_字典实现简单预约系统
- java_二维数组简单快递系统
- RabbitMQ六种工作模式
- Java生成随机姓名、性别和年龄
- 商业数据分析从入门到入职（8）Python模块、文件IO和面向对象
- 7.13论坛常见问题以及解决办法
- 移植SDL到JZ2440显示BMP图片
- Vue图片验证码-自定义组件高级版
- Angular页面调试一个有用的小技巧 - normalizeDebugBindingName和normalizeDebugBindingValue
- 19个JS超有用的简写技巧
- 【教程】移植web server到Ubuntu就是这么简单！