今天，我们来学习如何完成一个简易计算器的功能吧！
一.布局
我们可以在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：图片仅供参考
