HTML网页版计算器.ppt

HTML网页版计算器.ppt

《HTML网页版计算器.ppt》由会员分享，可在线阅读，更多相关《HTML网页版计算器.ppt（11页珍藏版）》请在冰豆网上搜索。

HTML/CSS/JS网页制作,计科1404林源张伟张凯旋高银恺潘行,网页版计算器,1.外观和界面,计算器形状为420px*420px的正方形，每个小方框尺寸为70px*100px。

显示框为70px*420px。

“Del”键和“=”键为70px*210px。

数字和“del”键采用的是纤长的宋体，其余的是默认字体。

1.1简介,1.2界面,显示窗口可以显示15位的数值，为了方便，这里显示格式设定为从右对齐。

在点开该网页的时候，计算器占据中间偏下的位置，符合人们的使用习惯。

同时按键尽可能的大，让用户能够快速点击。

2.设计思路,这款网页版计算器的代码核心是getElementById获取按键所代表的字符相加及eval（）函数将字符串转化为语句执行。

显示框,数字及加减乘除按键,函数捕获字符，缀连成字符串,点击“=”按键,eval（）函数执行，赋值给显示框的value属性,

（1）,

（1）,

（2）,

（2）,

（2）,注：

（1）第一个过程，输入将要执行的字符串。

（2）将字符串转化为代码执行，并在文本框显示。

没有人跟你说我最讨厌看图吗？

3.编写过程,3.1创建HTML工程,原来这么简单,3.2布局，初步设计界面,源代码：

显示样式：

用input下的text属性制作文本框显示内容，其余用botton属性制作按键，同时用table布局。

你懂了吗,3.3调整表格内容的大小及位置,在style属性下设置控件的高（height）和长（width）。

Font-family设置字体。

Color设置字体颜色。

Value为控件显示的值。

样表,代码,3.4背景,选择一张喜欢的图片，在background中写该图片的地址，即可设置为背景。

4在javescript中写函数,定义对象str和numresult。

定义函数onclicknum（）。

这个函数的功能是通过id获取字符并将之缀连在一起形成字符串。

定义函数onclickclear（）。

这个函数的功能是，当按下Del时触发，清空文本框的所有内容。

定义函数onclickresult（）。

将字符串通过eval（）函数运算，将结果赋值给对象的value属性，也就是文本框显示的内容。

4.1核心代码,我就是这么喜欢张杰（闰土）,计算器的样式千变万化，但只要掌握了核心代码，任何样式都可以做出来！

4.2结论,5总结,你以为会做（抄）一个计算器就无敌了？

然并卵！

学无止境,