javascript从0到0.9手写一个windows计算器
创始人
2024-04-05 13:55:35

        说实话,最初想用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、其他符号


一、HTML布局

1、包含的内容

        根据计算器的按键分布,包含 7 8 9 4 5 6 1 2 3 0  然后有一个C表示清空,有 + - × ÷ =  5个操作按钮

        顶部包含显示屏,第一行显示一直计算的数值,

        第二行表示当前按下的数值,当按下 = 的时候,第二行显示屏有会显示当前计算的结果值

2、html中的元素布局

        id为valueDom1 的 div元素,用来做为顶部第一行显示屏,表示计算过程

        id为valueDom2 的 div元素,用来做为顶部第二行显示屏,表示当前点击数值,也表示点击等号后的运算结果

7
8
9
+
4
5
6
-
1
2
3
×
0
C
=
÷

        

二、CSS样式控制

   到这一步,可以看到一个简单的计算器雏形了。

 

三、计算器需求预备

1、计算器的乱套的逻辑

        按照windows显示器一起点一点,体验一下需求

        △  初始化显示0

        △ 点数字,会显示到第二行显示屏(我们在上面定义过显示屏的感念)上,可以点1位数字,也可以点多位,都会显示到第二块显示屏上

        △ 可以点 + - × ÷ 任意一个按钮,点完之后会把第一个数值 和 符号显示到 第一行显示屏上,例如 55 + 

        △ 接下来就是比较颠覆我们小学知识的操作,上过小学的都知道, 1 + 1 = 2  但是这个windows显示器呢,你可以 1 + = ,结果会是2

        △ 结果这个2呢,会显示到第二行的显示屏上,第一行显示屏现在显示的是 1 + 1 =  ,如下图

 

        △ 以此类推,+ - × ÷ 都是这么个操作过程

        △ 比如先点2, 再点+,再点6, 再点符号,相当于点了=号,

        △ 好乱套

2、逻辑分析

        ☆ 第一行显示屏,由于是一个字符串,所以只能用来显示,万万不可用来参与计算

        ☆ 第二行显示屏,也是用来显示用的,我们每点击一下按钮,符号,还是数字都应该存在一个变量里

        ☆ 准备一个变量,resultNum 用来存储每次的最终得值

        ☆ 准备一个变量,firstNum 用来存储每次计算符号前面的数值, 比如 11 + 25  =  这个里面的11 这个值

        ☆ 准备一个变量,lastDo 用来存储每次点击的运算符号,也就是 + - × ÷ ,没点击一次运算符号,把lastDo的值更新一次,保证每次运算的符号是最后一次点击的那个符号

        ☆ 准备一个变量,secondNum 用来存储每次计算符号后面的数值,比如11 + 25 = 这个里面的25这个值

3、初始化代码

代码中已经添加了注释,这里就不细说了

3、按钮点击事件循环

// 开始对按钮进行循环遍历
for (var i=0;i

四、计算过程

1、存储和显示第一个数字

        我们刚才说过,第二行显示屏只是用于显示,而真正需要计算的数值需要存储在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试试,如下图:

2、点击加号的逻辑

        一旦点击了加号,第一行显示屏就会有所变化,因为第一行显示屏是要显示实时的计算过程的。例如刚刚点击的234,这时点了+号,第一行显示屏就会 显示 234 + 

        所以这段代码应该写到 case '+':的分支处

        既然都说了显示屏只用来显示,为什么这里要一直拿着resultNum进行显示呢,因为在windows计算器中,中间的运算符号是加号,第一行就要显示加号,如果又点击了减号,这里就要再显示减号

case '+':lastDo = value;// 因为resultNum在最开始点击就参与了计算// 保证这里可以在第一行显示完整value1Dom.innerText = resultNum + value;break;

3、存储和显示第2个数字

        既然刚才说运算符号前面的都算第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;}

4、等号的逻辑

        最初的需求分析中说过,如果点了第一个数字,再点加号,那么如果再直接点等号,就是 

        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;

 

至此,加号的逻辑已经写完了

5、其他符号

        相信如果看明白了加法的逻辑,其他减法,乘法,除法的逻辑也可以对应的进行修改代码了。

        学习软件开发,不管是什么语言,看代码不是最重要的,而是要不断的写,不断的练,练自己对基本写法的熟练,练自己的基本逻辑思维。只有基础稳固了,才能去完成企业的需求,才可以走的更远。

      有需要的私信联系我哦

相关内容

热门资讯

埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
埃菲尔铁塔在哪 中国仿建埃菲尔... 2019年4月26日,广西南宁市,街头惊现一座巨型山寨版埃菲尔铁塔,高约20米,白色塔身,造型逼真,...
苗族的传统节日 贵州苗族节日有... 【岜沙苗族芦笙节】岜沙,苗语叫“分送”,距从江县城7.5公里,是世界上最崇拜树木并以树为神的枪手部落...
北京的名胜古迹 北京最著名的景... 北京从元代开始,逐渐走上帝国首都的道路,先是成为大辽朝五大首都之一的南京城,随着金灭辽,金代从海陵王...
长白山自助游攻略 吉林长白山游... 昨天介绍了西坡的景点详细请看链接:一个人的旅行,据说能看到长白山天池全凭运气,您的运气如何?今日介绍...
世界上最漂亮的人 世界上最漂亮... 此前在某网上,选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中,人们投票选出了心目中最美...
应用未安装解决办法 平板应用未... ---IT小技术,每天Get一个小技能!一、前言描述苹果IPad2居然不能安装怎么办?与此IPad不...
脚上的穴位图 脚面经络图对应的... 人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用,包括头部穴位图、胸部穴位图、背部穴位图、胳...
demo什么意思 demo版本... 618快到了,各位的小金库大概也在准备开闸放水了吧。没有小金库的,也该向老婆撒娇卖萌服个软了,一切只...
猫咪吃了塑料袋怎么办 猫咪误食... 你知道吗?塑料袋放久了会长猫哦!要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...