Javascript实现计算器：

系列文章：

JS实现计算器详解及示例代码(一)

Javascript实现计算器时间功能的详细说明和示例(2)

小型JavaScript计算器

我想出了解决办法，很尴尬。虽然已经完成了，但是还是有很多bug，使用的方法也不是最有效的。基本功能完成，考虑了一些小细节，但还有其他细节需要处理。

总体设计思路是：先草图-设计UI-写UI代码-写CSS-写JS逻辑代码；

面板(主板)

面板整体尺寸设计

标题栏(板-标题)

字体：字体： 30px/50px“漫画无MS”、“微软雅黑”；宽度和高度：(100%，50px)；屏幕显示区(纸板-结果)

数字显示区(结果向上):表达式显示区(结果向下):按钮区(板键)，通过使用表格完成，然后onclick事件被添加到每个td

完整的界面

导入新字体

//main . CSS @ font-face { font-family : Lovelo-Black；/定义字体的名称/src : URL(' font/loveloblack . OTF ')；/*介绍下载的字体文件/}代码分析

代码组织结构

计算器对象：计算器；

计算器属性：

bdResult:计算器面板屏幕显示区域的DOM对象；运算符：运算符数组，包括'，-，，='；数字：有效的数字字符，包括“0-9”和点“.”；点，相等，零：“.”、“=”、“0”对应三个字符，点、等号和字符“0”；数字：屏幕显示区上层显示的当前输入的数字；表达式：屏幕显示区下层显示的输入数字和运算符组成的表达式；Resspan:在屏幕显示区上层显示当前数字的span对象；ResDown:屏幕显示区域下层显示表达式的div对象；最后：上次输入的按钮内容；AllDigits:由表达式解析的表达式中的所有有效数字；Ops:由表达式字符串解析的表达式中的所有运算符；HasEqual:确定是否按下了等号“=”的标识符；LastRes:还没有使用的最后一个计算结果[TODO]，可以连续计算实现；计算器方法：

Init:计算器初始化方法；AddTdClick:为每个td或计算器按钮添加一个Click事件；CalculatorClickEvent:点击事件；BtnClickHanlder:单击事件处理程序；ShowCurrRes:处理屏幕显示区上下两层要显示的内容；ShowText:显示showCurrRes处理的结果；AddZero:将“0”添加到表达式的前面；计算结果：计算结果；ClearData:清除数据；HasOperator:确定表达式中是否有运算符；IsOperator:判断当前字符是否为运算符；DelHeadZero:删除表达式开头的“0”；辅助方法

GetResSpan:获取屏幕显示上层的Span对象；$tag:根据标签名获取标签对象；$:根据id获取DOM对象；代码逻辑

施用方式

引入Calculator.js文件(在编写UI的基础上)创建一个对象并初始化：新的Calculator()。init()；计算器对象

//计算器对象函数Calculator() {//私有属性this . bdresult=$(' board-result ')；//这个。operator=[' '，'-'，''，'=']是计算机面板结果显示区域的对象。this.digits=['0 '，' 1 '，' 2 '，' 3 '，' 4 '，' 5 '，' 6 '，' 7 '，' 8 '，' 9 '，'];//this.dot=' . '，它是有效数字的数字数组；this.equal='=this.zero=' 0this.digit=//当前输入的数字this.expression=//表达式this . Resspan=GetResspan()；//数字显示区的this . resdown=$(' result-down ')；//表达式显示区域this.last=//最后按下的按钮内容this . all digits=[]；//从表达式中得到的所有数字组成的数组将用于计算结果this.ops=[]对应ops中的运算符；//由所有运算符this.hasEqual=false组成的数组；//判断是否按下了“=”键this . lastres=0；//最后一次计算的结果，即最后一次按等号后计算的值。//Private方法}增加一个点击事件(注意闭包中这个的引用问题)

//为任务描述添加点击事件计算器。原型。addtdclick=function(){ var TDS=$ tag(' TD ')；变量=这个；//需要注意保存这的引用//为每个任务描述添加点击事件for(var I=0；I TDS . lentigi){ TDS[I].onclick=function(){//alert(this。inner text)；var text=this . innertextthat . calculatorclickevent(文本);};}};计算器点击事件处理入口

//计算器按钮事件计算器。原型。calculatorclickevent=function(BTntext){//上一个按键是=' if(this。{这个。haseqal=false这个。cleardata()；} //结果显示在董事会结果里if (btnText！='AC' btnText！=' CE '){这个。btnclichandler(btnText)；} else { //AC或英国国教会清零这个。cleardata()；}};计算器点击事件处理程序

//计算器的按键事件处理计算器。原型。btnclichanlder=function(btnText){ if((btnText=' 0 ' btnText=' 9 ')| | btnText==this。点){//数字键处理//如果上一个是操作符，则清空当前数字区如果(这个。等压器(这个。最后一个){这个。雷斯潘。内部文本=' '；this . digit=} else if((btnText==this。dot)(这个。last==这个。点)){//如果上一个也是点，则对本次的点按钮不做响应返回；} this . digit=btntextthis . expression=btnText } else if(this。iso OPerator(btnText)){//操作符处理//如果当前表达式为'0',按'=',不给响应if((btnText==this。等于)这个。雷斯唐。内部文本==this。零| |这个。雷斯唐。内部文本==' ')返回；//如果上一个是非'='的操作符则不进行处理if(！这个。异操作者(这个。last)BTntext==this。相等){//'='处理这个. showCurrRes(这个.零，这个。表达式btnText)；//计算结果显示在表达式区域返回；} else if(这个。等压器(这个。last)){//上一个是操作符，此次的操作符不做记录返回；} else { this . expression=btnText } } this . show currres(this . digit，this。表情)；this . last=BTntext }；处理将要显示的表达式和当前输入的数字

//显示当前结果的触发方法计算器。原型。showcurrres=函数（数字，表达式){ if(！表达式)返回；this.showText(数字、表达式);//1.没有'=',表示还没有到计算结果的时候，直接退出if(表达式。indexof(此。相等)==-1)返回；//计算出了结果this . hasequl=true//2。处理只按了数字然后直接按了等号的情况，即：'234='则直接返回234 var TMPstr=这个。DelheadZero(表达式。substr(0，表达式。长度-1))；//去掉最后一个=' if(！这个。HasOperator(TMPstr)){ this。ShowText(TMPstr，表达式TMPstr)；返回；} //3.处理表达式字符串，且计算出结果var start=0；for(var I=0；一、表达。长度；i ) { var c=表达式[一]；如果(这个。isoverter(c)){//操作符这个。行动组。push(c)；//保存操作符var numStr=表达式。substr(start，I ^ 1)；//数字字符串定义变量数=0;//浮点数和整型处理if(numStr。indexof(此。dot)){ number=parseFloat(numStr)；} else { number=ParSeint(NumStr)；}这个。所有数字。push(数字)；//保存数字start=I 1；//重设数字起始位置，即操作符的下一个字符开始} } //用所有数字和工作去计算结果var RES=这个。cal result()；//保存此次计算结果，作为下一次计算用[TODO]这个。lastres=RES//将结果显示出来this.showText(res ' '，表达式RES)；};将处理结果显示到屏显区

//将表达式和计算结果显示到屏显区计算器。原型。show text=function(digitStr，expression) { //先删除开头的0' var expStr=this.delHeadZero(表达式);var DigStr=this。DelheadZero(DigitStr)；//然后再根据情况决定是否添加0' var tmp=expression==this.zero？表达式：这个。add zero(ExPStr)；var dig=digitStr==this.zero？digitStr :这个。add zero(Digstr)；这个。雷斯潘。内部文本=挖；//如果表达式第一个是操作符，则表示之前按的是'0',则给补上'0',因为前面将开头的'0'都删掉了如果(这个。iso OPerator(tmp[0]){ tmp=this。零tmp}这个。雷斯唐。innertext=tmp}计算结果函数

//计算结果计算器。原型。cal result=function(){ var first=0；定义变量秒=0;var RES=0；for(var I=0；我。本。行动组。长度；我){首先=这个。所有数字[I]；第二个=这个。所有数字[I ^ 1]；开关(this.ops[i]) { case ' ': res=第一秒；打破；案例： res=第一秒；打破；大小写'' : RES=first * second；打破；案例' : RES=第一/第二；打破；default: break}这个。所有数字[I ^ 1]=RES；}返回RES }；清空数据

//计算完一次，清空所有数据，以备下次计算使用计算器。原型。cleardata=function(){ this。所有数字=[]；这个。ops=[]；这个。表达式=这个。零；这个数字=这个。雷斯潘。内部文本=这个。零；这个。雷斯唐。内部文本=这个。零；};辅助函数

处理表达式开头的'0'问题（第一个按钮是0键或者第一个是小于一的浮点数，表达式需要补零；)

//开头添加'0',防止重复出现或者没有'0'情况Calculator.prototype.addZero=函数（表达式){ if(！表达式)返回this.zeroif(表达式[0]==this.dot) { //浮点数返回这个零表达式；} else {返回表达式；}};开头去零函数

//去开头的零计算器。原型。DelheadZero=函数(str){//先把开头的'0'都删掉var tmp=tmp=str.replace(/^[0/gi ' ')；if (tmp[0]==this.dot) { //浮点数重新补上0 ' tmp=this.zero tmp}返回tmp }；判断字符串里是否含有操作符

//判断表达式中是否含有操作符计算器。原型。HasOperator=function(str){ if(！字符串)返回；for(var I=0；我喜欢这个。操作员。长度；I){ if(str。indexof(此。运算符[I])=0 } {返回true} }返回false }；其他函数

//获取输入的数字显示区对象函数GetResspan(){ return $(“result-up”).getElementsByTagName(' span ')[0]；}//根据标签名获取数字正射影像图对象function $标记(标记名){返回文档。getelementsbytagname(标记名);}//根据身份获取数字正射影像图对象函数$(id){返回文档。getelementbyid(id)；}问题

文字底部显示：通过设置行高处理；通过一次性解析表达式需要考虑表达式开头是否需要'0'存在；感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！