如何制作一个简易的计算器

今天，我们来学习如何完成一个简易计算器的功能吧！

一.布局

我们可以在HTML中使用CSS完成计算器的布局。接下来，我们便先来看看我们所要实现的效吧！

上图的计算器中，我们可以通过以下几个步骤完成对计算器的简单布局：

1. 在输入的位置设置“input”标签得到三个输入框；
2. 在运算符的位置设置一个“select”标签，其作用便是可通过点击更换选项。
3. 在其中再添加四个“option”标签，并且“option”标签放入“+”，“-”，“*”，“/”四个运算符号 ；
4. 然后，在后两个输入框之间设置一个“button”标签，通过JS添加点击事件，使其可计算前两个数得到运算结果并输入框输出。
5. 在“button”标签中需再添加一个“calculate”的方法。

如此，我们的布局便算是完成啦！

二．功能  

         那么，我们该如何去实现这个简易计算器的功能呢？我们知道，JS在HTML中需创建一个“script”标签才能在其中写入我们需要的JS代码，再者，也可再新建一个新的文档，然后在HTML中引入新建的JS文档即可。

    那么，我们便来研究一下它的步骤吧：

1.首先，我们需要在JS中为它的运行设置一个页面加载事件。再通过ID选择器获取到在HTML中的标签，为其添加点击事件与设置输入框的值输出；

2.在这里，我们不妨考虑到输入框为空的情况，设置一个弹窗警告，并设置返回值；

3.接着，便是分别为四种运算符设置“sum”，四种运算符可当做四种情况，因此，我们可以使用到“if”条件语句。

4.考虑到被除数不能为零的情况，当运算符选项为“/”时，需为第二个输入框添加上一个弹窗警告。

5.最后，再为第三个输入框的值设置“value”。

    到这里，我们的简易计算机效果便完成啦！

                                                                                                             Ps：图片仅供参考