HTML网页版计算器.ppt
- 文档编号:963381
- 上传时间:2022-10-14
- 格式:PPT
- 页数:11
- 大小:2.88MB
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总结,你以为会做(抄)一个计算器就无敌了?
然并卵!
学无止境,
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- HTML 网页 计算器