HTML网页版计算器
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
HTML/CSS/JS网页制作
网页版计算器
计科1404 林源 张伟 张凯旋 高银恺 潘行
1.外观和界面
1.1简介 计算器形状为 420px*420px的正 方形，每个小方框 尺寸为70px*100px。 显示框为 70px*420px。 “Del”键和“=” 键为70px*210px。 数字和“del”键采 用的是纤长的宋体， 其余的是默认字体。
5总结
你以为会做（抄）一个计算器就无敌了？
然并卵！
学无止境
1.2界面
显示窗口可以显示 15位的数值，为了 方便，这里显示格式 设定为从右对齐。 在点开该网页的时候， 计算器占据中间偏下 的位置，符合人们的 使用习惯。同时按键 尽可能的大，让用户 能够快速点击。
2.设计思路
这款网页版计算器的代码核心是getElementById获取按键所代 表的字符相加及eval()函数将字符串转化为语句执行。 显示框 （2） （1） 数字及加 减乘除按 键 （1） 函数捕获 字符，缀 连成字符 串 eval()函数执 行，赋值给显 示框的value 属性 （2） 注： （1）第一个过程，输入将 要执行的字符串。 （2）将字符串转化为代码 执行，并在文本框显示。
没有人跟你说我最讨厌看图吗？
（2） 点击“=” 按键
3.编写过程
3.1创建HTML工程
原来这么简单
3.2布局，初步设计界面
源代码：
你懂了吗
用input下的text属性制作文本框显示 内容，其余用botton属性制作按键， 同时用table布局。
显示样式：
3.3调整表格内容的大小及位置
在style属性下设置控件的高（height） 和长（width）。Font-family设置字 体。Color设置字体颜色。Value为控 件显示的值。 代 码
定义函数onclickclear()。这个函数的 功能是，当按下Del时触发，清空文 本框的所有内容。
定义函数onclickresult()。将字符串通 过eval()函数运算，将结果赋值给对 象的value属性，也就是文本框显示 的内容。
4.2结论
计算器的样式千变万化，但只要 掌握了核心代码，任何样式都可 以做出来！
样表
3.4背景
选择一张喜欢的图片，在 background中写该图片的地址， 即可设置为背景。
ຫໍສະໝຸດ Baidu
4在javescript中写函数
4.1核心代码
我就是这么喜欢张杰（闰土）
定义对象str和numresult。定义函数 onclicknum()。这个函数的功能是通 过id获取字符并将之缀连在一起形成 字符串。
网页版计算器
计科1404 林源 张伟 张凯旋 高银恺 潘行
1.外观和界面
1.1简介 计算器形状为 420px*420px的正 方形，每个小方框 尺寸为70px*100px。 显示框为 70px*420px。 “Del”键和“=” 键为70px*210px。 数字和“del”键采 用的是纤长的宋体， 其余的是默认字体。
5总结
你以为会做（抄）一个计算器就无敌了？
然并卵！
学无止境
1.2界面
显示窗口可以显示 15位的数值，为了 方便，这里显示格式 设定为从右对齐。 在点开该网页的时候， 计算器占据中间偏下 的位置，符合人们的 使用习惯。同时按键 尽可能的大，让用户 能够快速点击。
2.设计思路
这款网页版计算器的代码核心是getElementById获取按键所代 表的字符相加及eval()函数将字符串转化为语句执行。 显示框 （2） （1） 数字及加 减乘除按 键 （1） 函数捕获 字符，缀 连成字符 串 eval()函数执 行，赋值给显 示框的value 属性 （2） 注： （1）第一个过程，输入将 要执行的字符串。 （2）将字符串转化为代码 执行，并在文本框显示。
没有人跟你说我最讨厌看图吗？
（2） 点击“=” 按键
3.编写过程
3.1创建HTML工程
原来这么简单
3.2布局，初步设计界面
源代码：
你懂了吗
用input下的text属性制作文本框显示 内容，其余用botton属性制作按键， 同时用table布局。
显示样式：
3.3调整表格内容的大小及位置
在style属性下设置控件的高（height） 和长（width）。Font-family设置字 体。Color设置字体颜色。Value为控 件显示的值。 代 码
定义函数onclickclear()。这个函数的 功能是，当按下Del时触发，清空文 本框的所有内容。
定义函数onclickresult()。将字符串通 过eval()函数运算，将结果赋值给对 象的value属性，也就是文本框显示 的内容。
4.2结论
计算器的样式千变万化，但只要 掌握了核心代码，任何样式都可 以做出来！
样表
3.4背景
选择一张喜欢的图片，在 background中写该图片的地址， 即可设置为背景。
ຫໍສະໝຸດ Baidu
4在javescript中写函数
4.1核心代码
我就是这么喜欢张杰（闰土）
定义对象str和numresult。定义函数 onclicknum()。这个函数的功能是通 过id获取字符并将之缀连在一起形成 字符串。