实现计算机等号功能js,JS实现计算器详解及实例代码（一）.pdf

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

Javascript 实实现现计计算算器器：：

系列文章：

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

Javascript 实现计算器时间功能详解及实例 (二)

小小型型JavaScript计计算算器器

自己寻思出 解决方案，比较笨拙 方法，虽然完成了但是还有不少bug ，用 方法也不是最有效 ，基本功能算是完成了，一

些小 细节地方也考虑到了，但是还有其他 细节需要处理。

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

面面板板(main-board)

面板整体尺寸设计

标题栏(board-title)

字体： font: 30px/50px “Co ic Sans MS”, “微软雅黑”;

宽高：(100%, 50px);

屏显区(board-result)

数字显示区(result-up)：

表达式显示区(result-down)：

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

完成界面

导入新字体

// 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]，尚未用到，待实现可以连续计算；

计算器方法：

init：计算器初始化方法；

addTdClick：给每个td 即计算器按钮添加点击事件；

calculatorClickEvent：点击事件；

btnClickHanlder：点击事件处理函数；

showCurrRes：处理屏显区上层和下层将要显示 内容；

showText：将通过showCurrRes处理 结果显示出来；

addZero ：对表达式前面加'0'操作；

calResult：计算结果；

clearData：清空数据；

hasOperator：判断表达式中是否有操作符；

isOperator：判断当前字符是否是操作符；

delHeadZero ：删除表达式开头 '0'；

辅助方法

getResSpan：获取屏显上层 span对象；

$tag ：根据标签名去获取标签对象；

$：根据id去获取DOM对象；

代码逻辑

使用方法

引入Calculator.j s文件(在编写完UI 基础上)

创建对象并初始化：new Calculator().init();

计算器对象

// 计算器对象

function Calculator() {

// 私有属性

this.bdResult = $("board-result"); // 计算机面板结果显示区对象

this.operator = ['+ ', '-', '×', '÷ ', '='];

this.digits = ['0 ', '1', '2', '3', '4 ', '5', '6', '7', '8'