用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
计算器

ES6 Promise基础用法(resolve、reject、then、catch,a
Promise是JavaScript中处理异步操作的对象,它有三种状态：Pending、Fulfilled、Rejected,使用new Promise创建Promise对象,通过resolve和reject改变状态,then和catch方法用于处理成功和失败的结果,本文介绍ES6 Promise用法,感兴趣的朋友一起看看吧
2024-09-09
解决远程页面抓取中的乱码问题？
解决远程页面抓取中的乱码问题？...
2007-03-03
基于javascript实现数字英文验证码
这篇文章主要为大家详细介绍了javascript实现数字英文验证码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-01-01
JavaScript创建类/对象的几种方式概述及实例
JS中的对象强调的是一种复合类型，JS中创建对象及对对象的访问是极其灵活的，下面与大家分享下创建类/对象的几种方式，感兴趣的朋友可以了解下哈
2013-05-05
由document.body和document.documentElement想到的
不知道大家对这个标题有没有想法，反正此前我一直把他们混为了一谈。其实不然，首先需有个“标准”的概念。
2009-04-04
JavaScript中Promise的简单使用及其原理详解
Promise是ES6最重要的特性之一，今天小编就来带大家一起系统且细致的研究一下Promise的用法以及原理，感兴趣的小伙伴可以学习一下哦
2023-03-03
自适应方案postcss-pxtorem使用步骤
这篇文章主要介绍了如何使用postcss-pxtorem插件将px单位转换为rem单位,包括安装插件、创建配置文件和引入脚本的步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
2024-11-11
JS获得浏览器版本和操作系统版本的例子
通过分析各类浏览器的userAgent信息，不难得出分辨各类浏览器及其版本的正则表达式。而且，对浏览器类型的判断和版本的判断完全可以合为一体地进行。
2014-05-05
JavaScript ES6的函数拓展
这篇文章主要介绍了JavaScript ES6的函数拓展，
2022-01-01
在你的网页中嵌入外部网页的方法
在你的网页中嵌入外部网页的方法...
2007-04-04

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

相关文章

最新评论

大家感兴趣的内容

最近更新的内容

常用在线小工具