用JS写的简单的计算器实现代码

更新时间：2009年09月13日 21:50:17 作者：

参加某公司的面试后，有一机试题目：用web技术开发一个B/S结构的公式解析器。于是想了想思路，神来一笔想先写个计算器程序做基础，于是便写了这个程序。

1.本页效果图片

2.美化后的效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <script> Array.prototype.remove=function(index) { if(isNaN(index)||index>this.length){return false;} for(var i=0,n=0;i<this.length;i++) { if(this[i]!=this[index]) { this[n++]=this[i] } } this.length-=1 } function commonMath(){ //类初始化 this.init = function(){ this.tmp = ''; this.debug = 0; this.output = ''; this.method = ''; this.sign = 1;//0:-;1:+ this.register = Array();//寄存器 } //设置报错信息 this.showmsg = function(msg){ if(this.debug == 1) alert(msg); } //设置运算符 this.setMethod = function(_method){ this.method = _method; _length = this.register.length; if(_length == 0){ if(this.tmp == '') return; this.register[0] = this.tmp; this.register[1] = _method; this.tmp = ''; return; } if(_length = 2 || this.tmp == ''){ this.register[1] = _method; } if(_length == 2 && this.tmp != ''){ this.register[2] = this.tmp; this.run(1); } if(_length == 3) this.run(1); } //设置显示值 this.setValue = function(_value){ var tmp = parseInt(eval(this.tmp+'+"'+_value+'"')); max = /^-?\d{1,9}$/i; if( max.test(tmp) == false){ return; } this.tmp = tmp; this.output.value = this.tmp; } //设置符号 this.setSign = function(){ var del = 0; var sign = Array('-','+'); this.sign = this.sign ^ 1; _sign = sign[this.sign]; if(/\d/i.test(this.tmp)== false && this.register.length > 0){ del = 1; this.tmp = this.register[0]; } if(_sign == '-'){ this.tmp = -this.tmp; }else{ this.tmp = Math.abs(this.tmp); } this.output.value = this.tmp; if(del == 1){ this.register[0] = this.tmp; this.tmp = ''; } } //获取按键 this.getValue = function(input){ var _in = input; var inputList = document.getElementsByTagName("input"); this.output = inputList[0]; regMethod = /^[\+|\-|\*|\/]$/i; if(regMethod.test(_in)){ this.setMethod(_in); return; } regNum = /^\d$/i; if(regNum.test(_in)){ this.setValue(_in); return; } regSign = /^\+\/\-$/i; if(regSign.test(_in)){ this.setSign(_in); return; } regResult = /^=$/; if(regResult.test(_in)){ this.run(); return; } } //计算结果 this.run = function(type){ if(this.register.length < 2) return this.showmsg(1); if(this.register.length == 2 && (this.tmp == '')) return this.showmsg(2); if(this.register.length == 2 && this.tmp != ''){ this.register[2] = this.tmp; this.run(); } this.showmsg(this.register.join(' ')); var _exp = parseInt(eval(this.register.join(' '))); this.output.value = _exp; for(i=0;i<3;i++){ this.register.remove(i); } this.register[0] = _exp; this.tmp = ''; if(type) this.register[1] = this.method; return; } } var commonMath = new commonMath(); commonMath.init(); </script> <style> #main{ width:100%; height:100%; } #inputs{ position:relative; top:50%; left:50%; } .inbutton{ width:30px; } .outbutton{ width:145px; text-align:right; } .tcenter{ text-align:center; } </style> </head> <body> <div id="main"> <div> <span class="outbutton tcenter">etongchina@gmail.com</span> </div> <div> <span><input id="output" type="text" class="outbutton" maxlength="9" value="." /></span> </div> <div> <span><input type="button" class="inbutton" value="7" onclick="commonMath.getValue(this.value)" /></span> <span><input type="button" class="inbutton" value="8" onclick="commonMath.getValue(this.value)" /></span> <span><input type="button" class="inbutton" value="9" onclick="commonMath.getValue(this.value)" /></span> <span><input type="button" class="inbutton" value="+" onclick="commonMath.getValue(this.value)" /></span> </div> <div> <span><input type="button" class="inbutton" value="4" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="5" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="6" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="-" onclick="commonMath.getValue(this.value);" /></span> </div> <div> <span><input type="button" class="inbutton" value="1" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="2" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="3" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="*" onclick="commonMath.getValue(this.value);" /></span> </div> <div> <span><input type="button" class="inbutton" value="0" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="+/-" onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="." onclick="commonMath.getValue(this.value);" /></span> <span><input type="button" class="inbutton" value="/" onclick="commonMath.getValue(this.value);" /></span> </div> <div> <span><input type="button" class="outbutton tcenter" value="计算" onclick="commonMath.getValue('=');" /></span> </div> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

您可能感兴趣的文章:

JS
计算器

JavaScript实现飞舞的泡泡效果
这篇文章主要为大家详细介绍了JavaScript实现飞舞的泡泡效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-02-02
javascript实现选中复选框后相关输入框变灰不可用的方法
这篇文章主要介绍了javascript实现选中复选框后相关输入框变灰不可用的方法,涉及javascript针对页面元素属性的相关操作技巧,具有一定参考借鉴价值,需要的朋友可以参考下
2015-08-08
删除table表格行的实例讲解
下面小编就为大家带来一篇删除table表格行的实例讲解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
ES6新特性之Symbol类型用法分析
这篇文章主要介绍了ES6新特性之Symbol类型用法,结合形式分析了Symbol类型的功能、使用方法及相关注意事项,需要的朋友可以参考下
2017-03-03
JavaScript 中从 URL 获取数据的方法
这篇文章主要介绍了在 JavaScript 中从 URL 获取数据,我们使用了open函数，将请求方法类型和URL作为参数传递，并调用XMLHttpRequest()的send()方法，结合示例代码介绍的非常详细，需要的朋友可以参考下
2023-05-05
详解JavaScript中的闭包是如何产生的
这篇文章主要为大家详细介绍了从内存管理的角度来看，JavaScript中的闭包是如何产生的。文中的示例代码简洁易懂，感兴趣的小伙伴可以了解一下
2022-12-12
JS倒计时实例_天时分秒
下面小编就为大家带来一篇JS倒计时实例_天时分秒。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08
layui实现登陆界面验证码
这篇文章主要为大家详细介绍了layui实现登陆界面验证码，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-11-11
JS中appendChild追加子节点无效的解决方法
这篇文章主要给大家介绍了关于JS中appendChild追加子节点无效的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习
2018-10-10
利用jsonp与代理服务器方案解决跨域问题
这篇文章主要给大家介绍了关于利用jsonp与代理服务器方案解决跨域问题的相关资料，文中通过示例代码给大家介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧。
2017-09-09