HTML网页版计算器.ppt

《HTML网页版计算器.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、HTML/CSS/JS网页制作计科1404林源张伟张凯旋高银恺潘行网页版计算器1.外观和界面计算器形状为420px*420px的正方形，每个小方框尺寸为70px*100px。显示框为70px*420px。“Del”键和“=”键为70px*210px。数字和“del”键采用的是纤长的宋体，其余的是默认字体。1.1简介1.2界面显示窗口可以显示15位的数值，为了方便，这里显示格式设定为从右对齐。在点开该网页的时候，计算器占据中间偏下的位置，符合人们的使用习惯。同时按键尽可能的大，让用户能够快速点击。2.设计思路这款网页版计算器的代码核心是getElementById获取按键所代表的字

2、符相加及eval()函数将字符串转化为语句执行。显示框数字及加减乘除按键函数捕获字符，缀连成字符串点击“=”按键eval()函数执行，赋值给显示框的value属性（1）（1）（2）（2）（2）注：（1）第一个过程，输入将要执行的字符串。（2）将字符串转化为代码执行，并在文本框显示。没有人跟你说我最讨厌看图吗？3.编写过程3.1创建HTML工程原来这么简单3.2布局，初步设计界面源代码：显示样式：用input下的text属性制作文本框显示内容，其余用botton属性制作按键，同时用table布局。你懂了吗3.3调整表格内容的大小及位置在style属性下设置控件的高（height）和

3、长（width）。Font-family设置字体。Color设置字体颜色。Value为控件显示的值。样表代码3.4背景选择一张喜欢的图片，在background中写该图片的地址，即可设置为背景。4在javescript中写函数定义对象str和numresult。定义函数onclicknum()。这个函数的功能是通过id获取字符并将之缀连在一起形成字符串。定义函数onclickclear()。这个函数的功能是，当按下Del时触发，清空文本框的所有内容。定义函数onclickresult()。将字符串通过eval()函数运算，将结果赋值给对象的value属性，也就是文本框显示的内容。

4、4.1核心代码我就是这么喜欢张杰（闰土）计算器的样式千变万化，但只要掌握了核心代码，任何样式都可以做出来！4.2结论5总结你以为会做（抄）一个计算器就无敌了？然并卵！学无止境