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


Posted in Javascript onJanuary 08, 2017

Javascript 实现计算器:

系列文章:

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

小型JavaScript计算器

自己寻思出的解决方案,比较笨拙的方法,虽然完成了但是还有不少bug,用的方法也不是最有效的,基本功能算是完成了,一些小的细节地方也考虑到了,但是还有其他的细节需要处理。

总体设计思路是,先画草图 -> 设计UI -> 编写UI代码 -> 编写CSS -> 编写JS逻辑代码;

面板(main-board)

面板整体尺寸设计

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

标题栏(board-title)

  • 字体: font: 30px/50px “Comic Sans MS”, “微软雅黑”;
  • 宽高:(100%, 50px);

屏显区(board-result)

  • 数字显示区(result-up):
  • 表达式显示区(result-down):

按钮区(board-keys),使用表格完成,然后给每个td添加onclick事件

完成界面

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

导入新字体

// main.css
@font-face { 
font-family: Lovelo-Black;/×定义font的名字×/ 
src: url('font/Lovelo Black.otf');/*把下载的字体文件引入进来×/ 
}

代码分析

代码组织结构

计算器对象:Calculator;

计算器属性:

  • bdResult: 计算器面板上的屏显区DOM对象;
  • operator:操作符数组,包括'+,-,×,÷,=';
  • digits:有效数字字符,包括'0-9'和点'.';
  • dot, equal, zero:'.', ‘=', ‘0'对应三个字符,点,等号,字符'0';
  • digit:屏显区上层的显示的当前输入的数字;
  • expression:屏显区下层的显示的输入的数字和操作符组成的表达式;
  • resSpan:屏显区上层的显示当前数字的span对象;
  • resDown:屏显区下层的显示表达式的div对象;
  • last:上一次输入的按钮内容;
  • allDigits:用表达式解析出来的表达式中所有的有效数字;
  • ops:用表达式字符串解析出来的表达式中所有的操作符;
  • hasEqual:判断是否按了'='等号的标识符;
  • lastRes:上一次计算出来的结果[TODO],尚未用到,待实现可以连续计算;

计算器方法:

  1. init:计算器初始化方法;
  2. addTdClick:给每个td即计算器按钮添加点击事件;
  3. calculatorClickEvent:点击事件;
  4. btnClickHanlder:点击事件处理函数;
  5. showCurrRes:处理屏显区上层和下层将要显示的内容;
  6. showText:将通过showCurrRes处理的结果显示出来;
  7. addZero:对表达式前面加'0'操作;
  8. calResult:计算结果;
  9. clearData:清空数据;
  10. hasOperator:判断表达式中是否有操作符;
  11. isOperator:判断当前字符是否是操作符;
  12. delHeadZero:删除表达式开头的'0';

辅助方法

  • getResSpan:获取屏显上层的span对象;
  • $tag:根据标签名去获取标签对象;
  • $:根据id去获取DOM对象;

代码逻辑

使用方法

  • 引入Calculator.js文件(在编写完UI的基础上)
  • 创建对象并初始化:new Calculator().init();

计算器对象

// 计算器对象
function Calculator() {

 // 私有属性
 this.bdResult = $("board-result"); // 计算机面板结果显示区对象
 this.operator = ['+', '-', '×', '÷', '='];
 this.digits = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '.']; // 组成有效数字的数字数组
 this.dot = '.';
 this.equal = '=';
 this.zero = '0';
 this.digit = "";   // 当前输入的数字
 this.expression = "";   // 表达式
 this.resSpan = getResSpan(); // 数字显示区
 this.resDown = $("result-down"); // 表达式显示区
 this.last = "";   // 上一次按下的按钮内容
 this.allDigits = [];   // 从表达式中获取的所有数字组成的数组,将用来和ops中的操作符对应计算出结果  
 this.ops = [];   // 所有操作符组成的数组
 this.hasEqual = false;  // 判断是否按下了'='键
 this.lastRes = 0;   // 上一次计算的结果,即上一次按等号后计算出的值


 // 私有方法

}

添加点击事件(注意this在闭包里的引用问题)

// 为td添加点击事件
Calculator.prototype.addTdClick = function () {

 var tds  = $tag("td");
 var that = this; // 需要注意保存this的引用
 // 为每个td添加点击事件
 for (var i = 0; i < tds.length; i++) {
 tds[i].onclick = function (){
  // alert(this.innerText);
  var text = this.innerText;

  that.calculatorClickEvent(text);
 };
 }
};

计算器点击事件处理入口

// 计算器按钮事件
Calculator.prototype.calculatorClickEvent = function (btnText) {

 // 上一个按键是'='
 if (this.hasEqual) {
 this.hasEqual = false;
 this.clearData();
 }

 // 结果显示在board-result里
 if (btnText != "AC" && btnText != "CE") {
 this.btnClickHanlder(btnText);
 } else { // AC或CE清零
 this.clearData();
 }
};

计算器点击事件处理程序

// 计算器的按键事件处理
Calculator.prototype.btnClickHanlder = function (btnText) {

 if ((btnText >= '0' && btnText <= '9') || btnText == this.dot) { // 数字键处理

 // 如果上一个是操作符,则清空当前数字区
 if (this.isOperator(this.last)) {
  this.resSpan.innerText = '';
  this.digit = '';
 } else if ((btnText == this.dot) && (this.last == this.dot)) {
  // 如果上一个也是点,则对本次的点按钮不做响应
  return;
 }

 this.digit += btnText;
 this.expression += btnText;
 } else if (this.isOperator(btnText)) { // 操作符处理

 // 如果当前表达式为'0',按'=',不给响应
 if ((btnText == this.equal) && (this.resDown.innerText == this.zero || this.resDown.innerText == "")) return;
 // 如果上一个是非'='的操作符则不进行处理
 if (!this.isOperator(this.last) && btnText == this.equal) { // '='处理

  this.showCurrRes(this.zero, this.expression + btnText); // 计算结果显示在表达式区域
  return; 
 } else if (this.isOperator(this.last)) {
  // 上一个是操作符,此次的操作符不做记录
  return;
 } else {
  this.expression += btnText;
 }

 }

 this.showCurrRes(this.digit, this.expression);

 this.last = btnText;
};

处理将要显示的表达式和当前输入的数字

// 显示当前结果的触发方法
Calculator.prototype.showCurrRes = function (digit, expression) {

 if (!expression) return;

 this.showText(digit, expression);

 // 1. 没有'=',表示还没有到计算结果的时候,直接退出
 if (expression.indexOf(this.equal) == -1) return;

 // 计算出了结果
 this.hasEqual = true;

 // 2. 处理只按了数字然后直接按了等号的情况,即:'234='则直接返回234
 var tmpStr = this.delHeadZero(expression.substr(0, expression.length - 1)); // 去掉最后一个'='
 if (!this.hasOperator(tmpStr)) {
 this.showText(tmpStr, expression + tmpStr);
 return;
 } 

 // 3. 处理表达式字符串,且计算出结果
 var start = 0;
 for (var i = 0; i < expression.length; i++) {

 var c = expression[i];
 if (this.isOperator(c)) { // 操作符
  this.ops.push(c); // 保存操作符
  var numStr = expression.substr(start, i + 1); // 数字字符串
  var number = 0;

  // 浮点数和整型处理
  if (numStr.indexOf(this.dot)) {
  number = parseFloat(numStr);
  } else {
  number = parseInt(numStr);
  }
  this.allDigits.push(number); // 保存数字
  start = i + 1; // 重设数字起始位置,即操作符的下一个字符开始
 }
 }

 // 用allDigits和ops去计算结果
 var res = this.calResult();

 // 保存此次计算结果,作为下一次计算用 [TODO]
 this.lastRes = res;

 // 将结果显示出来
 this.showText(res + '', expression + res);
};

将处理结果显示到屏显区

// 将表达式和计算结果显示到屏显区
Calculator.prototype.showText = function (digitStr, expression) {

 // 先删除开头的'0'
 var expStr = this.delHeadZero(expression);
 var digStr = this.delHeadZero(digitStr);

 // 然后再根据情况决定是否添加'0'
 var tmp = expression == this.zero ? expression : this.addZero(expStr);;
 var dig = digitStr == this.zero ? digitStr : this.addZero(digStr);

 this.resSpan.innerText = dig;

 // 如果表达式第一个是操作符,则表示之前按的是'0',则给补上'0',因为前面将开头的'0'都删掉了
 if (this.isOperator(tmp[0])) {
 tmp = this.zero + tmp;
 }

 this.resDown.innerText = tmp;
}

计算结果函数

// 计算结果
Calculator.prototype.calResult = function () {
 var first = 0;
 var second = 0;
 var res = 0;
 for (var i = 0; i < this.ops.length; i++) {
 first = this.allDigits[i];
 second = this.allDigits[i + 1];
 switch (this.ops[i]) {
  case '+':
  res = first + second;
  break;
  case '-':
  res = first - second;
  break;
  case '×':
  res = first * second;
  break;
  case '÷':
  res = first / second;
  break;
  default:
  break;
 }

 this.allDigits[i + 1] = res;
 }

 return res;
};

清空数据

// 计算完一次,清空所有数据,以备下次计算使用
Calculator.prototype.clearData = function () {
 this.allDigits = [];
 this.ops = [];
 this.expression = this.zero;
 this.digit = '';

 this.resSpan.innerText = this.zero;
 this.resDown.innerText = this.zero;
};

辅助函数

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

// 开头添加'0',防止重复出现或者没有'0'情况
Calculator.prototype.addZero = function (expression) {

 if (!expression) return this.zero;

 if (expression[0] == this.dot) { // 浮点数
 return this.zero + expression;
 } else {
 return expression;
 }
};

开头去零函数

// 去开头的零
Calculator.prototype.delHeadZero = function (str) {

 // 先把开头的‘0'都删掉
 var tmp = "";
 tmp = str.replace(/^[0]+/gi, "");
 if (tmp[0] == this.dot) { // 浮点数重新补上'0'
 tmp = this.zero + tmp;
 }

 return tmp;
};

判断字符串里是否含有操作符

// 判断表达式中是否含有操作符
Calculator.prototype.hasOperator = function (str) {

 if (!str) return;

 for (var i = 0; i < this.operator.length; i++) {
 if (str.indexOf(this.operator[i]) >= 0) {
  return true;
 }
 }

 return false;
};

其他函数

// 获取输入的数字显示区对象
function getResSpan() {
 return $("result-up").getElementsByTagName("span")[0];
}

// 根据标签名获取DOM对象
function $tag(tagName) {
 return document.getElementsByTagName(tagName);
}

// 根据ID获取DOM对象
function $(id) {
 return document.getElementById(id);
}

问题

  • 文字底部显示:通过设置行高处理;
  • 通过一次性解析表达式需要考虑表达式开头是否需要'0'存在;

感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery日历控件实现方法分享
Mar 07 Javascript
javascript创建函数的20种方式汇总
Jun 23 Javascript
JS读写CSS样式的方法汇总
Aug 16 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
vue 移动端适配方案详解
Nov 15 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
Jan 27 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
Vue项目实现换肤功能的一种方案分析
Aug 28 Javascript
Js参数RSA加密传输之jsencrypt.js的使用
Feb 07 Javascript
vue 实现tab切换保持数据状态
Jul 21 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
详解百度百科目录导航树小插件
Jan 08 #Javascript
Three.js基础部分学习
Jan 08 #Javascript
Javascript 高性能之递归,迭代,查表法详解及实例
Jan 08 #Javascript
jQuery实现页面滚动时智能浮动定位
Jan 08 #Javascript
jQuery实现滚动条滚动到子元素位置(方便定位)
Jan 08 #Javascript
jquery实现文字单行横移或翻转(上下、左右跳转)
Jan 08 #Javascript
jQuery实现文字自动横移
Jan 08 #Javascript
You might like
用php实现像JSP,ASP里Application那样的全局变量
2007/01/12 PHP
在PHP中读取和写入WORD文档的代码
2008/04/09 PHP
发款php蜘蛛统计插件只要有mysql就可用
2010/10/12 PHP
PHP学习之数组值的操作
2011/04/17 PHP
利用PHP实现短域名互转
2013/07/05 PHP
php检测图片主要颜色的方法
2015/07/01 PHP
纯php生成随机密码
2015/10/30 PHP
golang与PHP输出excel示例
2016/07/22 PHP
jquery移动listbox的值原理及代码
2013/05/03 Javascript
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
2013/10/22 Javascript
详解JavaScript语言的基本语法要求
2015/11/20 Javascript
JavaScript简单验证表单空值及邮箱格式的方法
2017/01/20 Javascript
JS实现含有中文字符串的友好截取功能分析
2017/03/13 Javascript
JavaScript中Require调用js的实例分享
2017/10/27 Javascript
在vue组件中使用axios的方法
2018/03/16 Javascript
jQuery简单实现根据日期计算星期几的方法
2019/01/09 jQuery
python的id()函数解密过程
2012/12/25 Python
django-rest-framework 自定义swagger过程详解
2019/07/18 Python
Python socket 套接字实现通信详解
2019/08/27 Python
python turtle 绘制太极图的实例
2019/12/18 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
安装多个版本的TensorFlow的方法步骤
2020/04/21 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
html5记忆翻牌游戏实现思路及代码
2013/07/25 HTML / CSS
欧洲最大的化妆品连锁公司:Douglas道格拉斯
2017/05/06 全球购物
Perfume’s Club意大利官网:欧洲美妆电商
2019/05/03 全球购物
高一生物教学反思
2014/01/17 职场文书
挖掘机司机岗位职责
2014/02/12 职场文书
在校大学生个人的自我评价
2014/02/13 职场文书
聚美优品陈欧广告词
2014/03/14 职场文书
加入学生会演讲稿
2014/04/24 职场文书
法定授权委托证明书
2014/09/27 职场文书
投标文件签署授权委托书范本
2014/10/12 职场文书
2015年中秋晚会主持词
2015/07/01 职场文书
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
拙作再改《我的收音机情缘》
2022/04/05 无线电