今天我们一起来做一个网页版的计算器吧,如果没有学过前端,在后面我会慢慢介绍到的。
首先我们开始做一个html的页面,用来做网页的工具有很多,因为一直写java,所以我还是比较习惯用eclipse来写html代码。
跟写java代码一样,需要先创建一个项目,如果之前有练习用的项目也可,然后创建一个包。最后跟创建java类就不一样了,我们需要创建的是html页面:在包上右键--new--other--html file。
![b7692771109deecf5fad67ddd002600f.png](https://i-blog.csdnimg.cn/blog_migrate/485e6ecba8de1e06f9871a26b22b0820.jpeg)
![69c8c44a2dfad44dc7d2fbd7633ba1dd.png](https://i-blog.csdnimg.cn/blog_migrate/f8d790fe860c3c4547ca2bb904b4c118.jpeg)
查询出html file以后,可以直接双击,或者单击然后再点击下面的next按钮
![85608e8704c47aa1c9243e39c90084e5.png](https://i-blog.csdnimg.cn/blog_migrate/c152d353682c320a11467a6098d943cd.jpeg)
给文件命名,命名时需要后缀名.html,当然了,因为使用开发工具的原因,后缀可以省略不写,会自动添加上,蜗牛就直接命名为jsq了,然后点击完成(finish)。
之后就开始实现计算器页面了,最开始,肯定是先在页面上添加计算器中需要的按钮,为了简单,我直接将按钮写在table表格中。
1.在页面上添加一个五行四列的表格,将第一行的前三个合并,作为计算器的屏幕。
![8b4d24a93e37e409d543256f1dd50c29.png](https://i-blog.csdnimg.cn/blog_migrate/9d3264f72ceb1ded635ae599683f940a.jpeg)
2.在第一行第一个格子我使用一个输入框来作为计算器的屏幕;剩下其他的格子中全部添加按钮,写入相对应的按键的值。如下图
![4b7a922ba6d12e09ce3b1382339e6061.png](https://i-blog.csdnimg.cn/blog_migrate/bd1f73b3515c29c430cc11b24417207b.jpeg)
表格完成以后打开页面看一下效果
从html 文件上右键--open with--system editor,页面上会出现如图所示的效果图
![dd122c2fdec5a3246bd1bc11fb7833a0.png](https://i-blog.csdnimg.cn/blog_migrate/e132543101936d9c55ef4296b862fcd6.jpeg)
3.给计算器设置想要的样式,我这里给所有的按钮设置宽度和高度均为50个像素。
使用内联式设置css,在head标签中添加一个style标签:按钮的样式如下
input{
width:50px;/* 给input设置宽度 */
height:50px;/* 给input设置高度 */
}
设置完成以后,页面显示如下:
![a57b32807d90d83d847c5dcc2b52e7a2.png](https://i-blog.csdnimg.cn/blog_migrate/04644b8ebacd255447951bbbe8b3d49c.jpeg)
你会计算器位于屏幕的做左上角,而且由于屏幕使用的也是一个input输入框,所以,需要将计算器放到页面的中,设置table的margin属性,为了稍微好看一点,给table加一个外边框,以及需要对屏幕的宽度高度单独进行设置,设置内容如下:
![85b3db03419fda8fec7cc95aeed81a60.png](https://i-blog.csdnimg.cn/blog_migrate/6ccbe437284c1c12199436963375eb16.jpeg)
设置完成,来看一下效果
![dc9b056d031de1a56ee76ef05cca31d5.png](https://i-blog.csdnimg.cn/blog_migrate/945633ed20dd4e886c66d48a7bb4ccee.jpeg)
![b817bb6f8f1bd3c333b67c468ff43cc7.png](https://i-blog.csdnimg.cn/blog_migrate/36bbc018e793aca41d94ee452216e08e.jpeg)
4.然后是给每个按钮添加功能,首先来实现,在页面上显示出表达式,直接上代码,
![deabbdb50c60ab4151b0605e93704cda.png](https://i-blog.csdnimg.cn/blog_migrate/32e88717d131384010efa1fb4b2644c9.jpeg)
5.在之后是实现清除以及计算结果的功能,代码如下:
![f91bf55fe100ad9d71ca25d69275748b.png](https://i-blog.csdnimg.cn/blog_migrate/e3a9f59898f533ecbd90924e9ae47337.jpeg)
当然了很多浏览器支持直接使用id就可以代替:ducument.getElemenById("screen")了,但是我还是习惯原始的方法。
写的很仓促,内容有点乱,这样就实现了一个简单的计算器,最终的效果我就不在演示了,好了今天就这些了,想了解java相关内容的,关注蜗牛吆。
一个非常简单的内容,写的很仓促,内容有点乱,如果想要源码,私聊蜗牛,发给你