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调整表格内容的大小及位置,在st

3、yle属性下设置控件的高（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总结,你以为会做（抄）一个计算器就无敌了？,然并卵！学无止境,