`
cerany
  • 浏览: 17879 次
  • 性别: Icon_minigender_1
  • 来自: 北京
最近访客 更多访客>>
社区版块
存档分类
最新评论

采用js的计算器的设计

阅读更多
一 计算器的设计需求清单
1. 支持鼠标点击按钮的操作方式
2. 提供普通的四则运算功能
3. 支持乘方开方、倒数、百分比功能
4. 提供记忆功能
5. 运算范围、精度达到要求
6. 运算异常时,返回异常状态和异常提示信息
7. 提供清除并从异常恢复的功能
二 如何实现计算器
1. 一个用来保存中间计算结果的对象,初始值为0
2. 一个用来保存当前操作符的对象,初始值为空
3. 一个操作符与运算函数的映射表
4. 一个根据当前操作符来返回中间结果和当前数值运算结果的闭包
5. 一个保存记忆结果的对象
我们用两个堆栈n和p来保存操作的计算数a,b和操作函数o,需要机算的时候将我们的a,b和o分别弹出并传入闭包d,机算d(a,b,o)的值,将该值传入到堆栈n。
   算法描述如下:
   n.push(a);
   p.push(o);
   n.push(b);
   n.push(p.pop()(n.pop(),n.pop()));
   p.push(o);
   n.push(b);
   //操作符与运算函数的映射表
   Var opMap ={
     “+”:function (a,b){ return b+a}, //处理加法运算的闭包
     “-”:function (a,b){ return b-a},
“*”:function (a,b){ return b*a},
“/”:function (a,b){ return b/a},
“=”:function (a,b){ return  a},
}
  
   //用来存储数值、操作符和输入缓存的数据结构
   var oMemery = {
      numStack : [], //存储数值
      operStack :[], //存储字符串
      inBuffer :””  //输入显示缓存
}

三 实现计算器关键js
   (function(){
      //实现代码
})();

(function({
    //这里是定义一个控制器,用来对外开放计算接口和拦截计算中出现的异常
oController = {
addNumber:function(tok){
if(errorState()) return errorResult(); else return addNumber(tok);
},
addOper : function(tok){if(errorState()) return errorResult(); else return addOper(tok)},
doFun :  function(tok){if(errorState()) {return errorResult();} else return doFun(tok)},
cleanError : cleanError
      }
    //用来保存记忆的变量
var memery = 0;
     //这是符号对应的计算规则,这里采用一个闭包的对照表来处理
var opMap = {
"+":function(a,b){return b + a}, //处理加法运算的闭包
"-":function(a,b){return b - a}, //处理减法运算的闭包
"*":function(a,b){return b * a}, //处理乘法运算的闭包
"/":function(a,b){return b / a}, //处理除法运算的闭包
"=":function(a,b){return a}, //处理最终结果
"C":init, //清零
"CE":init, //清零
"sqrt":function(a){return Math.sqrt(a)}, //计算开方
"1/x":function(a){return 1/a}, //计算倒数
"%":function(a){return a/100}, //求余数
"+/-":function(a){return -a}, //正负号
"MS":function(a){memery = a; return a}, //记忆
"M+":function(a){memery += a; return a}, //累加记忆
"MR":function(a){return memery}, //从记忆中读取
"MC":function(a){memery = 0; return a} //清除记忆
}
//用来存储数值、操作符和输入缓存的数据结构
var oMemery = {
numStack : [], //存储数值
operStack : [], //存储字符串的操作符,比如“+”
inBuffer : "" //输入显示缓存
}
    //检测计算中出现的数字异常,若有,返回给控制器进行处理
function errorState()
{
with(oMemery)
{
var n = numStack[numStack.length - 1];

return n == Infinity || isNaN(n);
}
}
//若出现异常,这个函数提供出现异常时的数值结果(数值堆栈顶的值)
function errorResult()
{
with(oMemery)
{
return formatBuff(numStack[numStack.length - 1]);
}
}
//清除异常并从错误中恢复
function cleanError()
{
with(oMemery)
{
numStack[numStack.length - 1] = 0;
}
}

  function init()  //初始化
{
with(oMemery)
{
numStack.length = 0; //清空数值堆栈
operStack.length = 0; //清空操作符堆栈
numStack.push(0); //在数值堆栈中推入一个0作为栈顶
inBuffer = ""; //清空输入缓存
return inBuffer; //将清空后的缓存值(实际上是空字符串'')返回
}
}
function doOper()   //计算表达式
{
with(oMemery)
{
if(operStack.length) //如果运算符堆栈中有值
{
try
{
//取得栈顶运算符对应的操作方法
var op = opMap[operStack.pop()];
var args = [];
//该方法需要提供几个操作数,可以通过检查op.length得到
for(var i = 0; i < op.length; i++)
{
//从数值堆栈中依次取相应的操作数进行处理
args.push(numStack.pop());
}
//在这里实际进行计算,并把计算结果重新压入堆栈
numStack.push(op.apply(this, args)); //存在的覆盖,不存在的追加进去
}
catch(ex)
{
alert(ex.message);
}
}
return numStack[numStack.length - 1];
}
}

//格式化显示的数值,主要是为了符合计算器的习惯,比如0显示成0.(带小数点)
function formatBuff(buf)
{
if(buf == "")
return "0.";
else{
buf = parseFloat(buf);
return /\./.test(buf) ? buf : buf + ".";
}
}

function addNumber(tok)  //输入数值
{
with(oMemery)
{
try
{
var token;
if(tok == "\b") //如果输入的是一个退格
token = inBuffer.slice(0,-1); //那么把缓存中的内容去掉一个
else
token = inBuffer + tok.toString(); //否则接受新输入的数字
//如果数值的第一位是小数点,显示的时候要补一个0
if(token.slice(0,1) == ".") token = 0 + token;
//判断输入接收后的结果是否满足数值的格式
if(/^([\d]+(\.)?[\d]*)?$/.test(token))
{
inBuffer = token; //如果满足,则确认接受,写入缓存
}

return formatBuff(inBuffer);

}
catch(ex)
{
alert(ex.message);
}
}
}

function addOper(tok) //输入运算符
{
with(oMemery)
{
try
{
//如果缓存中有数值,将它推入数值堆栈
if(inBuffer != "")
numStack.push(parseFloat(inBuffer));
//否则从操作符堆栈中将前一个输入的操作符弹出用当前操作符替代
else
operStack.pop();
var ret = doOper(); //计算表达式
operStack.push(tok); //将新输入的运算符推入堆栈
inBuffer = ""; //清空输入缓存
return formatBuff(ret);
}
catch(ex)
{
alert(ex.message);
}
}
}

function doFun(tok) //处理函数
{
with(oMemery)
{
try{
//假如是一些函数如sqrt
var fun = opMap[tok];
//如果输入缓存无内容
if(inBuffer == "")
inBuffer = numStack.pop(); //从数值堆栈中取数
else
operStack.push(tok); //否则将函数推入操作符堆栈

//计算函数调用结果并放入数值堆栈
numStack.push(fun(parseFloat(inBuffer)));

inBuffer = ""; //清空缓存

return formatBuff(numStack[numStack.length - 1]);
}
catch(ex){
alert(ex.message);
}
}
}

init(); //这里执行前面定义的初始化函数

})()


分享到:
评论

相关推荐

    JavaScript计算器

    在实际开发中,为了提高代码的可维护性和复用性,常常会采用模块化设计。例如,可以将计算逻辑封装在一个独立的函数或对象中,这样可以降低代码之间的耦合度。此外,函数式编程的概念也可能被应用,比如通过高阶函数...

    完美版JS计算器--内置文档说明

    在本项目中,我们探讨的是一个“完美版JS计算器”的实现,它被设计得与系统自带的计算器具有相同的功能强度,并且附带了详细的文档说明。这个计算器是制作者在其编程学习旅程的第四阶段完成的作品,因此我们可以预期...

    javascript做的非常漂亮的计算器

    在本文中,我们将深入探讨JavaScript计算器的设计与实现,以及它在Web开发中的重要性。 首先,JavaScript是一种解释型的、跨平台的脚本语言,常用于网页和网络应用的动态内容创建。它在浏览器环境中运行,可以处理...

    js网页版手机计算器

    综上所述,"js网页版手机计算器"项目涵盖了JavaScript编程、DOM操作、事件处理、计算逻辑、CSS样式设计、HTML结构、用户交互设计、响应式布局、开发工具使用以及性能优化等多个方面的知识点,是一个全面的前端开发...

    用javascript做简单计算器

    JavaScript 实现简单计算器 本文将对 JavaScript 实现简单计算器的原理和实现过程进行详细的解释。 计算器的基本概念 在开始实现计算器之前,我们需要了解计算器的基本概念。计算器是一种 electronic device 或 ...

    js编写的一个网页版的计算器

    此外,“windows自带”标签表明这个计算器设计灵感来源于原生操作系统应用,提供了一种跨平台的Web实现。 【文件名称列表】:计算器 根据提供的文件名,我们可以推测项目中可能包含一个名为"计算器"的主文件,这...

    JS 科学计算器

    1. **双屏幕显示**:JS科学计算器采用了独特的双屏设计,分为输入屏和结果屏。输入屏允许用户输入完整的计算表达式,而结果屏则实时显示计算结果,提高了计算过程的可读性和准确性。 2. **完整算式展示**:计算器...

    基于JavaScript的顾问帮计算器设计源码

    该项目为顾问帮计算器设计源码,采用JavaScript为主要开发语言,辅以HTML和CSS,共计34个文件,其中JavaScript文件13个,CSS和HTML文件各4个,SCSS文件4个,Markdown文件2个,Babel配置文件1个,Git忽略规则文件1个...

    简易计算器设计实验报告.docx

    - 使用QuartusII工具进行顶层设计,采用原理图输入方式。 - VHDL语言编写各个功能模块,可以直接拖拽模块进行集成。 - 通过两个脉冲分别处理个位和十位的输入。 - 输出值会反馈到运算输入端,实现连续运算。 - ...

    使用JS与HTML5共同编写的简易计算器

    使用HTML5设计外观,再使用JS技术实现计算器的具体功能:如四则运算、求模、退格与清除。

    html+js实现新版个税计算器demo,可直接套用

    6. 响应式设计:为了适应不同设备和屏幕尺寸,计算器可能采用了响应式布局,使界面在手机和平板电脑上也能正常显示。这可能涉及到媒体查询(Media Queries)和流式布局(Flexbox或Grid)等技术。 7. 错误处理:一个...

    扁平风格加减乘除网页计算器js代码.zip

    标题中的“扁平风格加减乘除网页计算器js代码”指的是一个使用JavaScript实现的轻量级计算器应用,设计上采用了现代流行的扁平化设计风格,适用于网页和移动设备。这款计算器能够执行基本的数学运算,包括加法、减法...

    加法计算器 加法计算器加法计算器加法计算器加法计算器

    2. **加法计算器设计**: - 用户界面:加法计算器通常包含输入框,用于用户输入数字,以及加号按钮和其他操作按钮,如等于号(=)和清除键(C)。此外,它还有一个显示区域,用于呈现计算结果。 - 运算逻辑:...

    javascript计算器

    在本例中,"美观的界面"可能指的是计算器设计时注重了视觉效果,可能采用了响应式布局,适应不同设备的屏幕尺寸,以及吸引人的颜色搭配和按钮设计。"美观的声音"可能意味着在用户点击按钮或完成计算时,会播放悦耳的...

    计算器设计的java课程设计报告.doc

    本次课程设计的主题为“计算器设计”,旨在通过使用Java编程语言,让学生深入理解和掌握Java的基本编程原理和方法。设计的目标不仅限于构建一个功能完备的计算器,更注重提升学生对系统各功能模块的理解,培养他们的...

    js计算器运算部分的逻辑(附代码).rar

    本资源"js计算器运算部分的逻辑(附代码)"聚焦于计算器应用程序的核心部分——运算逻辑,它涉及到JavaScript中的基本算术运算、条件判断以及事件处理等关键知识点。 1. **基本算术运算**: JavaScript 支持四种...

    JavaScript计算器(第二代)

    8. **响应式设计**:考虑到不同设备的屏幕尺寸,一个现代的JavaScript计算器可能还需要采用响应式设计,确保在手机、平板和桌面设备上都能正常工作。 9. **模块化和封装**:为了代码的可维护性和可重用性,可以将...

    计算器设计

    计算器设计是一个涵盖多个编程概念和技术的领域,它包括基本的算术运算、用户界面设计、错误处理以及可能的高级功能如科学计算和图形显示。在这个主题中,我们将深入探讨计算器的实现方法,从简单的文本界面到复杂的...

    原生JS经典小项目-汇率计算器

    8. **响应式设计**:考虑到不同设备的屏幕尺寸,项目可能需要采用响应式设计,使计算器在手机、平板和桌面电脑上都能正常显示。这可以通过媒体查询(`@media`)来实现,根据设备特性调整布局。 9. **错误处理**:良好...

Global site tag (gtag.js) - Google Analytics