如何制作一个简易的计算器
今天,我们来学习如何完成一个简易计算器的功能吧!
一.布局
我们可以在HTML中使用CSS完成计算器的布局。接下来,我们便先来看看我们所要实现的效吧!
上图的计算器中,我们可以通过以下几个步骤完成对计算器的简单布局:
- 在输入的位置设置“input”标签得到三个输入框;
- 在运算符的位置设置一个“select”标签,其作用便是可通过点击更换选项。
- 在其中再添加四个“option”标签,并且“option”标签放入“+”,“-”,“*”,“/”四个运算符号 ;
- 然后,在后两个输入框之间设置一个“button”标签,通过JS添加点击事件,使其可计算前两个数得到运算结果并输入框输出。
- 在“button”标签中需再添加一个“calculate”的方法。
如此,我们的布局便算是完成啦!
二.功能
那么,我们该如何去实现这个简易计算器的功能呢?我们知道,JS在HTML中需创建一个“script”标签才能在其中写入我们需要的JS代码,再者,也可再新建一个新的文档,然后在HTML中引入新建的JS文档即可。
那么,我们便来研究一下它的步骤吧:
1.首先,我们需要在JS中为它的运行设置一个页面加载事件。再通过ID选择器获取到在HTML中的标签,为其添加点击事件与设置输入框的值输出;
2.在这里,我们不妨考虑到输入框为空的情况,设置一个弹窗警告,并设置返回值;
3.接着,便是分别为四种运算符设置“sum”,四种运算符可当做四种情况,因此,我们可以使用到“if”条件语句。
4.考虑到被除数不能为零的情况,当运算符选项为“/”时,需为第二个输入框添加上一个弹窗警告。
5.最后,再为第三个输入框的值设置“value”。
到这里,我们的简易计算机效果便完成啦!
Ps:图片仅供参考