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

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

一.布局

我们可以在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：图片仅供参考

如何制作一个简易的计算器相关推荐

制作一个简易的计算器
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一 ...
使用awt制作一个简易加法计算器
AWT_加法计算器(Java) package Demo01;import java.awt.*; import java.awt.event.ActionEvent; import java.awt ...
用JS制作一个简易GPA计算器
这是我第一次使用JS,有问题的地方还希望大佬指出程序的容错性还没做到完美,日后补充 <!DOCTYPE html> <html><head><meta ch ...
用HTML5制作一个简易计算器
用H5制作一个简易计算器最近刚学JavaScript,之后紧接着做了一个简易的计算器,能够实现数字的加减乘除运算. 首先,先用HTML5搭建好计算器大体框架.我这里用了两个表格,一个充当显示器,另一 ...
python 正则的使用 —— 编写一个简易的计算器
python 正则的使用 -- 编写一个简易的计算器在 Alex 的博客上看到的对正则这一章节作业是编写一个计算器,要求能计算出下面的算式. 1 - 2 * ( (60-30 +(-40/5) * ...
python计算器教程,用Python程序制作一个简单的计算器
用Python程序制作一个简单的计算器在此示例中,您将学习创建一个简单的计算器,该计算器可以根据用户的输入进行加,减,乘或除. 要理解此示例,您应该了解以下Python编程主题: 通过函数创建简单计 ...
[转载] python实现一个简易的计算器
参考链接: 使用Python创建一个简单的计算器 python实现一个简易的计算器 from tkinter import from tkinter.ttk import * def my_frame ...
仿照Windows的计算器，编写一个简易的计算器程序，实现加、减、乘、除等运算。
仿照Windows的计算器,编写一个简易的计算器程序,实现加.减.乘.除等运算. 偷懒了很多,将就着用吧: import java.awt.FlowLayout; import java.awt.ev ...
使用Java制作一个简易的远控终端
使用Java制作一个简易的远控终端远控终端的本质 1.服务端(攻击者)传输消息 ----> socket连接 ----> 客户端(被攻击者)接收消息 2.客户端执行消息内容(即执行服务端 ...

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

如何制作一个简易的计算器相关推荐

最新文章

热门文章