THINKING.md

一、思路梳理

源码 计算器由两部分组成：外观+运算。 外观部分由html和css实现。重难点在使用JS进行运算实现。

（一）外观

html部分的代码首先考虑层次问题：

-计算器外框（div）

--数字显示屏（input） --按钮(div ul li) --脚注(div和span)

css装饰：

基础构造

给【每块】设置好相应的属性，注意overflow需要选择hidden。 在按钮部分注意原作者的实现思路不错：指定div的宽度，高度选择auto，然后算好margin，把所有按钮排进去。这个想法实现了文本和布局的分离（如果一开始就考虑布局的话，会考虑一排一排设计按钮）。

点击活动

用户点击时要进行按钮提示。用hover和active进行处理。

（二）运算

配置按钮

使用JS进行代码编写，为按钮配置事件。针对数字按钮，原作者使用了command（num）函数；针对工具按钮，原作者使用了类，为每个按钮编写函数。

进行状态检查

这一步我觉得比较难靠自己想到（bug也是出现在这里），需要用全局变量进行0/1判断，重置输入状态。

运算实现

比较难的还有一条代码↓ str=(str!="0") ? ((operate==0) ? str : "") : ""; //如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值; 写四则运算函数的时候注意可以用switch，这样相当于一个大条件判断语句，然后分不同的case调用，在逻辑上比较方便理解。 清空值的写法↓ function clearnote(){document.getElementById("note").innerHTML=""}

二、缺陷和感悟

缺陷：没有办法单独输入0。暂时没有找到改进措施。 感悟：这是小白第一个跟随源码写作完成的项目，多读源码多学习。