简介：今天我们一起来做一个网页版的计算器吧，如果没有学过前端，在后面我会慢慢介绍到的。 首先我们开始做一个html的页面，用来做网页的工具有很多，因为一直写java，所以我还是比较习惯用eclipse来写html代码。 跟写jav ...
今天我们一起来做一个网页版的计算器吧，如果没有学过前端，在后面我会慢慢介绍到的。 首先我们开始做一个html的页面，用来做网页的工具有很多，因为一直写java，所以我还是比较习惯用eclipse来写html代码。 跟写java代码一样，需要先创建一个项目，如果之前有练习用的项目也可，然后创建一个包。最后跟创建java类就不一样了，我们需要创建的是html页面：在包上右键--new--other--html file。
查询出html file以后，可以直接双击，或者单击然后再点击下面的next按钮 
给文件命名，命名时需要后缀名.html，当然了，因为使用开发工具的原因，后缀面可以省略不写，会自动添加上，蜗牛就直接命名为jsq了，然后点击完成（finish）。之后就开始实现计算器页面了，最开始，肯定是先在页面上添加计算器中需要的按钮，为了简单，我直接将按钮写在able表格中。1.在页面上添加一个五行四列的表格，将第一行的前三个合并，作为计算器的屏幕。 
2.在第一行第一个格子我使用一个输入框来作为计算器的屏幕；剩下其他的格子中全部添加按钮，写入相对应的按键的值。如下图 
表格完成以后打开页面看一下效果 从html 文件上右键--open with--system editor,页面上会出现如图所示的效果图 
3.给计算器设置想要的样式，我这里给所有的按钮设置宽度和高度均为50个像素。使用内联式设置css，在head标签中添加一个style标签：按钮的样式如下<style type="text/css">input{width:50px;/* 给input设置宽度 */height:50px;/* 给input设置高度 */}</style>设置完成以后，页面显示如下： 
你会计算器位于屏幕的做左上角，而且由于屏幕使用的也是一个input输入框，所以，需要将计算器放到页面的中，设置table的margin属性，为了稍微好看一点，给table加一个外边框，以及需要对屏幕的宽度高度单独进行设置，设置内容如下： 
设置完成，来看一下效果
4.然后是给每个按钮添加功能，首先来实现，在页面上显示出表达式，直接上代码， 
5.在之后是实现清除以及计算结果的功能，代码如下：
当然了很多浏览器支持直接使用id就可以代替：ducument.getElemenById("screen")了，但是我还是习惯原始的方法。写的很仓促，内容有点乱，这样就实现了一个简单的计算器，最终的效果我就不在演示了，好了今天就这些了，想了解java相关内容的，关注蜗牛吆。一个非常简单的内容，写的很仓促，内容有点乱，如果想要源码，私聊蜗牛，发给你本文仅代表作者个人观点，不代表巅云官方发声，对观点有疑义请先联系作者本人进行修改，若内容非法请联系平台管理员，邮箱2522407257@qq.com。更多相关资讯，请到巅云www.yinxi.net学习互联网营销技术请到巅云建站www.yx10011.com。 |
