js装修计算器java代码_JS 实现计算器详解及实例代码（一）

Javascript 实现计算器：

系列文章：

小型JavaScript计算器

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

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

面板(main-board)

面板整体尺寸设计

标题栏(board-title)

字体： font: 30px/50px “Comic 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处理的结果显示出来；

ad