JavaScript简单计算器
来源:互联网 发布:周易取名软件破解版 编辑:程序博客网 时间:2024/06/06 01:08
一个基于HTML/CSS和原生Js的简单计算器。
大体思路是通过Button提交获取算式,然后交付eval() 函数计算。eval(String) 函数可计算某个字符串,并执行其中的的 JavaScript 代码。如果参数中没有合法的表达式和语句,则抛出 SyntaxError 异常。
<script type="text/javascript">var a=eval("x=10;y=20;document.write(x*y)");var b=eval("2+3");/**a的输出结果为200,b的输出结果为5**/</script>
因为程序比较简单,以下是全部代码。
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算器</title> <style> *{ margin: 0; padding: 0; border-spacing:0px; border: none; } table{ background-color: #ff6000; } table tr{ height: 100px; } table tr th{ width: 110px; background-color: #000; color: #fff; font-size: 40px; } table tr th input { width: 100px; height: 100px; background-color: #000; border: none;color: #fff; font-size: 40px; font-family: "微软雅黑"; } </style> <script> var t = ""; //存贮算式 var jieguo = "";//存储结果 var t1; function getValue(x) //获取按键值 { t = t + x; document.getElementById("textview").innerHTML = t; } function backspace() //删除键 { t = t.substring(0,t.length-1); document.getElementById("textview").innerHTML = t; } function yunsuan() { t1 = t; t = t.replace(/\×/g,"*"); t = t.replace(/\√/g,"Math.sqrt"); // 正则表达式 全部√替换成Math.sqrt 代表开方 t = t.replace(/\^/g,"**"); // 正则表达式 全部^替换成**代表指数 try{ //try验证式子正确性 jieguo = eval(t); document.getElementById("textview").innerHTML = t1+"<br />"+jieguo; } catch(exception) { alert("算式出错!请重新输入!"); clearall(); } } function clearall() //c建清理 { t = ""; t1 = ""; jieguo = ""; document.getElementById("textview").innerHTML = ""; } </script> </head> <body> <form> <table> <tr> <th colspan="6" style="background-color: #000; height: 200px;" id="textview"></th> </tr> <tr> <th><input type="button" value="1" onclick="getValue(this.value)"/></th> <th><input type="button" value="2" onclick="getValue(this.value)"/></th> <th><input type="button" value="3" onclick="getValue(this.value)"/></th> <th><input type="button" value="+" onclick="getValue(this.value)"/></th> <th colspan="2"><input type="button" value="del" onclick="backspace()"/></th> </tr> <tr> <th><input type="button" value="4" onclick="getValue(this.value)"/></th> <th><input type="button" value="5" onclick="getValue(this.value)"/></th> <th><input type="button" value="6" onclick="getValue(this.value)"/></th> <th><input type="button" value="-" onclick="getValue(this.value)"/></th> <th><input type="button" value="(" onclick="getValue(this.value)"/></th> <th><input type="button" value=")" onclick="getValue(this.value)"/></th> </tr> <tr> <th><input type="button" value="7" onclick="getValue(this.value)"/></th> <th><input type="button" value="8" onclick="getValue(this.value)"/></th> <th><input type="button" value="9" onclick="getValue(this.value)"/></th> <th><input type="button" value="×" onclick="getValue(this.value)"/></th> <th><input type="button" value="^" onclick="getValue(this.value)"/></th> <th style="background-color: #ff6000;" rowspan="2"><input type="button" value="=" style="background-color: #ff6000;" onclick="yunsuan()"/></th> </tr> <tr> <th style="background-color: #ff6000;"><input type="button" value="c" style="background-color: #ff6000;" onclick="clearall()"/></th> <th><input type="button" value="0" onclick="getValue(this.value)"/></th> <th><input type="button" value="." onclick="getValue(this.value)"/></th> <th><input type="button" value="/" onclick="getValue(this.value)"/></th> <th><input type="button" value="√(" onclick="getValue(this.value)"/></th> </tr> </table> </form> </body></html>
本人初学js,这里只是写出来仅供参考,因为代码不可避免存在bug,方法感觉也是比较蠢,恳请各位大佬给出修改建议。
阅读全文
1 0
- 简单javascript计算器
- javaScript 简单计算器
- 简单的JavaScript计算器
- 简单的javascript计算器
- javaScript 简单计算器
- JavaScript 简单的计算器
- javaScript编写简单计算器
- 简单的javascript计算器
- JavaScript编写简单计算器
- JavaScript简单计算器
- JavaScript: 制作简单计算器
- 简单的JavaScript计算器
- JavaScript 简单计算器
- javascript简单计算器
- javascript实现简单计算器
- JavaScript简单计算器
- javascript简单计算器
- 用Javascript写简单计算器
- python2 去除 字符串中emoji 符号,去除所有4字节utf8字符
- 卷积神经网络(深度学习)一些问题总结
- 算法之最大子数组
- 利用Eclipse编写minigui的helloworld程序
- 给任何view添加全屏倾斜水印
- JavaScript简单计算器
- Spring Boot 中文乱码解决
- U盘格式化后容量变小了怎么恢复教程
- socketio-cpp-lib使用
- 一种C#读写二进制文件的通用方法
- Minicom 使用初步
- Codeforces 591E Three States【优先队列Bfs+思维】
- Spring Boot自定义PropertySourceLoader
- Zookeeper acl