简单计算器实现步骤分解（附图）

知识点：
1。数学+，，*，/使用
2。输入内容的判断、事件对象的来源判断
uff1a效应
代码uff1a
复制代码代码如下所示：

{ #计算
行高：60px；
文本对齐：中心；
背景：# CCC；
字体大小：16px；
字体粗细：粗体；
}
把#计算输入{
宽度：100%；
身高：60px；
背景：# 033；
颜色：# FFF；
字体：黑体16px / 1em'microsoft雅黑；
}
#计算TBODY TD {
宽度：25%；
背景：# FFF；
}
# calculate_output {
字体大小：20px；
字母间距：2px；
背景：# FFF；
身高：40px；
边界：无；
文本对齐：正确；
宽度：100%；
}




计算
无功operateexp = {
+：功能（num1，num2）{ return num1和num2；}，
功能：（num1，num2）{ return num1-num2；}，
一个*：功能（num1，num2）{ return num1 * num2；}，
：功能（num1，num2）{ return num2 = = = 00：num1和num2；}
}
计算函数
无功operatenum =功能（num1，num2，OP）{
如果（！（！（num1num2））返回；
num1 num2是 / /担保，数字
num1 =数（num1）；
num2 =数（num2）；
没有返回num1 / /操作员；
如果（！OP）返回num1；
匹配公式
如果（！operateexp {作品}）返回0；
返回operateexp { }（num1，num2）OP；
}
显示面板
无功calculate_output = document.getelementbyid（calculate_output ）；
操作面板
无功calculate_num = document.getelementbyid（calculate_num ）；
var结果= 0； /结果
VaR复位= false； / /复位
var操作；
设置显示值
功能setscreen（NUM）{
calculate_output价值=数；
}
获取/显示值
功能getscreen（）{
返回calculate_output.value；
}
添加一个单击事件
calculate_num。onclick=功能（e）{
VaR EV = e window.event | |；
VaR目标= ev.target ev.srcelement | |；
如果（目标类型按钮）{
var马克= target.getattribute（_type ）； / /预按钮单击自定义。
VaR值= / / target.value；获取当前值
Var（Num = getscreen / /获得）；框的当前值
如果（Mark = = = 'bs）{ / /退格
如果（= = 0）返回；
VaR SNUM = math.abs（民）ToString（）；
如果（SNUM。长度＜2）
（0）setscreen；
其他的
setscreen（num.tostring（）。片（0，1））；
}
如果（Mark = = = 'num）{ / /数字键
如果（Num = = = 0| |复位）{ / /操作员或显示为0
setscreen（价值）；
复位= false；
返回；
}
setscreen（num.tostring（）。Concat（值））；
}
如果（= ）{十进制小数点
无功haspoint = num.tostring（）。IndexOf（，）> 1；
如果（haspoint）{
如果（复位）{
setscreen（0 +价值）；
复位= false；
返回；
}
返回；
}
setscreen（num.tostring（）。Concat（值））；
}
如果（标记+）
SetScreen（数）；
}
如果，如果单击，则为第一个操作数操作符设计。
如果（复位）返回；
复位=真；
如果（！操作）{
结果；
操作=值；
返回；
}
结果：operatenum（结果，num，操作）；
setscreen（结果）；
操作=值；
}
如果（标记= CLS）{已清除
结果= 0；
setscreen（结果）；
复位= false；
}
如果（Mark = = = eval）{ / /计算
如果（！操作）返回；
结果：operatenum（结果，num，操作）；
setscreen（结果）；
操作=空；
复位= false；
}
}
}

查看代码

详细的分解：
首先：分支计算部分不使用开关语句，并使用名称值对的形式。
复制代码代码如下所示：
计算
无功operateexp = {
+：功能（num1，num2）{ return num1和num2；}，
功能：（num1，num2）{ return num1-num2；}，
一个*：功能（num1，num2）{ return num1 * num2；}，
：功能（num1，num2）{ return num2 = = = 00：num1和num2；}
}

第二：使用对象事件的属性获取单击对象的类型。使用事件冒泡、捕获事件和对事件进行分类。
复制代码代码如下所示：
calculate_num。onclick=功能（e）{
VaR EV = e window.event | |；
VaR目标= ev.target ev.srcelement | |；
如果（目标类型按钮）{
var马克= target.getattribute（_type ）； / /预按钮单击自定义。
VaR值= / / target.value；获取当前值
Var（Num = getscreen / /获得）；框的当前值
如果（Mark = = = 'bs）{ / /退格
如果（= = 0）返回；
VaR SNUM = math.abs（民）ToString（）；
如果（SNUM。长度＜2）
（0）setscreen；
其他的
setscreen（num.tostring（）。片（0，1））；
}
如果（Mark = = = 'num）{ / /数字键
如果（Num = = = 0| |复位）{ / /操作员或显示为0
setscreen（价值）；
复位= false；
返回；
}
SetScreen (num.toString ().Concat (value));
}
如果（= ）{十进制小数点
无功haspoint = num.tostring（）。IndexOf（，）> 1；
如果（haspoint）{
如果（复位）{
setscreen（0 +价值）；
复位= false；
返回；
}
返回；
}
setscreen（num.tostring（）。Concat（值））；
}
如果（标记+）
SetScreen（数）；
}
如果，如果单击，则为第一个操作数操作符设计。
如果（复位）返回；
复位=真；
如果（！操作）{
结果；
操作=值；
返回；
}
结果：operatenum（结果，num，操作）；
setscreen（结果）；
操作=值；
}
如果（标记= CLS）{已清除
结果= 0；
setscreen（结果）；
复位= false；
}
如果（Mark = = = eval）{ / /计算
如果（！操作）返回；
结果：operatenum（结果，num，操作）；
setscreen（结果）；
操作=空；
复位= false；
}
}
}

第三：利用全局变量，利用全局变量控制局部操作的进度。
复制代码代码如下所示：
var结果= 0； /结果
VaR复位= false； / /复位
var操作；

第四：页面操作被分离和解耦。
复制代码代码如下所示：
设置显示值
功能setscreen（NUM）{
calculate_output价值=数；
}
获取/显示值
功能getscreen（）{
返回calculate_output.value；
}

第五：过滤操作数，完成计算。
复制代码代码如下所示：
计算函数
无功operatenum =功能（num1，num2，OP）{
如果（！（！（num1num2））返回；
num1 num2是 / /担保，数字
num1 =数（num1）；
num2 =数（num2）；
没有返回num1 / /操作员；
如果（！OP）返回num1；
匹配公式
如果（！operateexp {作品}）返回0；
返回operateexp { }（num1，num2）OP；
}