说实话,最初想用javascript模拟着windows的计算器写一个的时候,感觉也就是10分钟搞定,但写着写着发现,其实并不是那么容易的事,window的这个计算器逻辑挺多的。
而且还想给别人把这个思路说出来,那就更加的不容易了。
这个window的计算器呢,简直是颠覆了我们小学的那点知识,我们总认为计算嘛, 1 + 1 = 2 , 必须得有第一个加数,再有一个加数,2个数相加才能等于一个数,但windows计算器可以不点击第二个加数,直接往下加。
难倒是不难,但对于初学者来说 += 赋值 显示内容 最终值累算这些内容都是要学的。
希望本文可以以一个废话多,代码清晰,逻辑通顺的角度帮助大家。
如果能够帮到一些人,那将会是我莫大的欣慰。
代码开始前 ,跟我做:
》》》》 windows徽标键 + R ,会出现一个运行小窗口

》》》》 输入框内输入 calc 然后出现了计算器
太复杂的今天不做啊,今天只做0 - 9的数字 加 减 乘 除 清空 等于
目录
一、HTML布局
1、包含的内容
2、html中的元素布局
二、CSS样式控制
三、计算器需求预备
1、计算器的乱套的逻辑
2、逻辑分析
3、初始化代码
3、按钮点击事件循环
四、计算过程
1、存储和显示第一个数字
2、点击加号的逻辑
3、存储和显示第2个数字
4、等号的逻辑
5、其他符号
根据计算器的按键分布,包含 7 8 9 4 5 6 1 2 3 0 然后有一个C表示清空,有 + - × ÷ = 5个操作按钮
顶部包含显示屏,第一行显示一直计算的数值,
第二行表示当前按下的数值,当按下 = 的时候,第二行显示屏有会显示当前计算的结果值
id为valueDom1 的 div元素,用来做为顶部第一行显示屏,表示计算过程
id为valueDom2 的 div元素,用来做为顶部第二行显示屏,表示当前点击数值,也表示点击等号后的运算结果
789+456-123×0C=÷
到这一步,可以看到一个简单的计算器雏形了。
按照windows显示器一起点一点,体验一下需求
△ 初始化显示0
△ 点数字,会显示到第二行显示屏(我们在上面定义过显示屏的感念)上,可以点1位数字,也可以点多位,都会显示到第二块显示屏上
△ 可以点 + - × ÷ 任意一个按钮,点完之后会把第一个数值 和 符号显示到 第一行显示屏上,例如 55 +
△ 接下来就是比较颠覆我们小学知识的操作,上过小学的都知道, 1 + 1 = 2 但是这个windows显示器呢,你可以 1 + = ,结果会是2
△ 结果这个2呢,会显示到第二行的显示屏上,第一行显示屏现在显示的是 1 + 1 = ,如下图

△ 以此类推,+ - × ÷ 都是这么个操作过程
△ 比如先点2, 再点+,再点6, 再点符号,相当于点了=号,
△ 好乱套
☆ 第一行显示屏,由于是一个字符串,所以只能用来显示,万万不可用来参与计算
☆ 第二行显示屏,也是用来显示用的,我们每点击一下按钮,符号,还是数字都应该存在一个变量里
☆ 准备一个变量,resultNum 用来存储每次的最终得值
☆ 准备一个变量,firstNum 用来存储每次计算符号前面的数值, 比如 11 + 25 = 这个里面的11 这个值
☆ 准备一个变量,lastDo 用来存储每次点击的运算符号,也就是 + - × ÷ ,没点击一次运算符号,把lastDo的值更新一次,保证每次运算的符号是最后一次点击的那个符号
☆ 准备一个变量,secondNum 用来存储每次计算符号后面的数值,比如11 + 25 = 这个里面的25这个值
代码中已经添加了注释,这里就不细说了
// 开始对按钮进行循环遍历
for (var i=0;i
我们刚才说过,第二行显示屏只是用于显示,而真正需要计算的数值需要存储在firstNum中。这个如何实现呢,数字可以一直按,按一个5就是5,按一个5按一个8就是58.所以,只要我们检测到,只要是lastDo没有被存储过计算符号,都算是第一个数字
// 开始对按钮进行循环遍历
for (var i=0;i
从这段代码可知,没点击一下计算符号,点的是 + ,就把lastDo赋值为+ ,点的是 × ,就为lastDo 赋值为 ×, 一旦点击了按钮C,清空一切。那么就开始给第一个firstNum赋值
刚才说过只要不点击4个运算符号,点击的就是第一个数字
所以这里的代码应该写到default分支里,这里接收的是点击数字的值
// default分支接收点击数字
default:// 只要没有lastDo 就证明在点击第1个数值if (!lastDo) {// 这次这里过来的value数字是字符串类型的// 字符串类型的会向后追加,不是相加firstNum += value;// 为了便于后续相加计算,将firstNum转为数值型firstNum = Number(firstNum);// 从第一个值开始点,就已经要给resultNum赋值了// 这个resultNum就是实时得到最终结果的那个值resultNum = firstNum;// 将追加的内容显示在第二行显示屏上value2Dom.innerText = firstNum;}
输入一个234试试,如下图:

一旦点击了加号,第一行显示屏就会有所变化,因为第一行显示屏是要显示实时的计算过程的。例如刚刚点击的234,这时点了+号,第一行显示屏就会 显示 234 +
所以这段代码应该写到 case '+':的分支处
既然都说了显示屏只用来显示,为什么这里要一直拿着resultNum进行显示呢,因为在windows计算器中,中间的运算符号是加号,第一行就要显示加号,如果又点击了减号,这里就要再显示减号
case '+':lastDo = value;// 因为resultNum在最开始点击就参与了计算// 保证这里可以在第一行显示完整value1Dom.innerText = resultNum + value;break;

既然刚才说运算符号前面的都算第1个数字,那么运算符号后面的就算第2个数字呗。逻辑和第1个数字差不多
这里需要修改刚刚的default分支的逻辑代码
default:if (!lastDo) {firstNum += value;firstNum = Number(firstNum);resultNum = firstNum;value2Dom.innerText = firstNum;} else {secondNum += value;secondNum = Number(secondNum);value2Dom.innerText = secondNum;}

最初的需求分析中说过,如果点了第一个数字,再点加号,那么如果再直接点等号,就是
resultNum += firstNum 的逻辑
如果点了加号,再点第二个数字,那么就是
resultNum = firstNum + secondNum 的逻辑,但是刚才说过,其实从点击第一个数字开始的时候,就开始不断通过firstNum给resultNum累加值了,所以其实可以写成
resultNum += secondNum 的逻辑
所以这里的代码应该写在case '=' 的分支处
case '=':// 因为是计算,检测到没有运算符号不能计算if (!lastDo) {// break 就是停止继续执行代码的意思return;}// 当判断最后一次点击的运算发号是加号,// 后续还可以继续做else判断,或者继续用switch case的写法if (lastDo === '+') {if (secondNum) {resultNum += secondNum;} else {resultNum += firstNum;}// 这是第一行显示屏// 可以结合执行结果看每个值都是什么value1Dom.innerText = resultNum + lastDo + secondNum + value;// 执行的最后结果要显示到第二行显示屏value2Dom.innerText = resultNum;}break;

至此,加号的逻辑已经写完了
相信如果看明白了加法的逻辑,其他减法,乘法,除法的逻辑也可以对应的进行修改代码了。
学习软件开发,不管是什么语言,看代码不是最重要的,而是要不断的写,不断的练,练自己对基本写法的熟练,练自己的基本逻辑思维。只有基础稳固了,才能去完成企业的需求,才可以走的更远。
有需要的私信联系我哦