以下简单说下用 JavaScript 编写简单计算器的思路。
一、运算核心
对于 JavaScript 来说，编写一个简单的计算器的核心，是借用 js 提供的 eval 函数，eval 函数可以对给定的字符串表达式执行运算，并返回结果。
举例来说：
s = eval("50+20-30*40/20")其结果是 10。可以看出，先乘除后加减等运算规则都能正确处理。
二、输入（组合）运算式
核心运算解决后，下一步就是解决如何输入（组合）运算式。
其实也并不复杂，计算器上的符号可以分为4类：
1、0-9 数值
2、% .
3、+ - * /
4、= 退格
除了第 2 类和第 4 类，需要专门处理外，基本上都可以当做字符串处理。即，设置一个全局变量，用于保存用户的输入，当点击时，将值添加进变量字符串的末尾。
当用户点击 “=” 时，调用 eval 函数，计算表达式，并输出结果。
当用户点击“退格”时，删除表达式的最后一个字符。
三、进行界面设计
对于 JS 来说，大多还是要借用 HTML 元素，如 Button 等，样式用 CSS 进行控制。
以下提供相关代码供参考：
<script>var num = 0 // 定义第一个输入的数据
function jsq(num) {
//获取当前输入
if(num=="%"){
document.getElementById('screenName').value=Math.round(document.getElementById('screenName').value)/100
}else{
document.getElementById('screenName').value += document.getElementById(num).value
}
}
function eva() {
//计算输入结果
document.getElementById("screenName").value = eval(document.getElementById("screenName").value)
}
function clearNum() {
//清0
document.getElementById("screenName").value = null
document.getElementById("screenName").focus()
}
function tuiGe() {
//退格
var arr = document.getElementById("screenName")
arr.value = arr.value.substring(0, arr.value.length - 1)
}
</script>
如果要实现鼠标点击来触发，可以如下步骤：
在box1里面的子标签<div class="bnt1">加上 onclick="Show('box1','box2')"
如：<div class="bnt1" onclick="Show('box1','box2')">
在box2里面的子标签<div class=“bnt2”>加上 onclick="Show('box2','box1')"
Show()里面的参数注意和步骤1的区别
如：<div class=“bnt2” onclick="Show('box2','box1')">
在最下面加上如下JS代码：
<script>
function Show(t,v){
document.getElementById(t).style.display = "none"
document.getElementById(v).style.display = "block"
}
</script>
完成
另外，如果要实现鼠标移入移出触发，只用把步骤1和步骤2里的“onclick”换成“onmouseover”就可以了
如：<div class="bnt1" onmouseover="Show('box1','box2')">
<div class=“bnt2” onmouseover="Show('box2','box1')">
希望对你有帮助
分析该过程，可拆分成两个步骤：
该布局基于 element-ui，一个父容器 box，里面一个 mask div，一个 el-checkbox-group 块。其中父容器设置 position: relative子 mask 容器设置 position: absolute并且其宽、高、偏移值根据鼠标当前位置动态计算
该部分逻辑实际上可拆分为 4 个步骤：
1. 给 box 绑定 mousedown 事件
2. mousemove 事件，比较简单，只是更新 end_x，end_y 坐标
3. mouseup 事件，移除 mousemove、mouseup 事件，并调用判断方法
4. 处理框选逻辑
难点是如何判断元素是否被框选住
问题可转化为 框选矩形是否与 checkbox 矩形 相交或者包含在内,即 两矩形是否相交或者存在包含关系
假定矩形 A1 左上角坐标为 (x1,y1)矩形宽度为 width1,高度为 height1
假定矩形 A2 左上角坐标为 (x2,y2)矩形宽度为 width2,高度为 height2
画图分析，只看水平方向：
由图可以得出，x 方向上：
令 maxX = Math.max(x1 + width1, x2 + width2)
令 minX = Math.max(x1, x2)
若相交或包含则必满足： maxX - minX <= width1 + width2
同理可以容易得到 y 轴相交的判断
使用 Element.getBoundingClientRect()获取 dom 元素位置信息
该部分逻辑如下，比较简单
难点已经攻破，遍历 checkbox 集合，每个 checkbox 都执行上面的矩形相交判断，并进行相应的勾选处理，此处不再多累述
源码
END
