(word)中国地质大学教学实习报告.docVIP

中国地质大学(武汉) 教学实习报告 姓 名： 专 业：通信工程 班 级： 学 号： 选 题：题目一 指导老师： 2014年7月 课题名称：网络编程设计 一、实习目的 自主学习Html5 + css + javascript+jQuery，制作网页计算器以及文本编辑器。 设计思路 1、网页计算器 制作网页计算器首先要编写计算器的css界面。观察一般的计算器主要是由加减乘除等操作区域、数字区域以及显示区域组成。我采用的是div设计计算器的界面。划分好各个区域后，用css调整界面。按钮可以采用button类型，为了方便获取每次输入的值，我将显示区域划分为四个部分：第一个输入值，操作符，第二个输入值，结果。获取数值时采用jQuery选择器。获取输入的数字时，判断一下是否前面一个输入的是否是小数点。数字和操作符都获取到后，调用calc函数计算出最终结果。 文本编辑器 编写文本编辑器的时候，我参考了平时常用的Word办公软件。文本编辑器主要包括工具栏和编辑区域。我制作的文本编辑器很简单，工具栏只包括字体、字号、颜色、加粗、删除、斜体、下划线、居左、居中、居右和插入图片。字号、字体和颜色的选择我采用select，其他的我都是采用的button类型。编辑区域采用iframe框架。改变选中文本的属性，我采用document.execCommand方法。 代码 1、计算器 meta http-equiv=Content-Type content=text/html; charset=utf-8 / !DOCTYPE html html head style type=text/css #calculator{position:absolute;border:1px solid black;left:50%;top:50%;margin:-180px 0 0 -120px; width:290px; height:500px;background-color:#0099cc;padding:3px; } /*设置标题框格式，宽280px，高40px，边界线为黑色*/ #header{width:280px;height:40px;border:1px solid black;padding:5px;text-align:center;} h1{text-align:center;font-size:30;padding:5px;margin-top:5px;} #display{width:280px;height:90px;padding:5px;background-color:#f2f2f4;} /*设置显示区四个部分的格式，高25px，文本居右*/ #display #n1,#display #op,#display #n2, #display #res{height:25px;padding:0 2px; text-align:right;} #display #n1 .countSize{padding:0 1px;} #display #op .countSize{padding:0 1px;} #display #n2 .countSize{padding:0 1px;} #display #res{height:20px;} /*设置按钮区域的格式*/ #buttons{width:290px;} #buttons #num_and_op{width:290px;height:280px;} #buttons input{float:left;display:block;width:60px;overflow:hidden;} #buttons #numbers{float:left;margin-left:3px;width:216px;height:280px;overflow:hidden;} #buttons #numbers input{height:60px;width:60px;float:right;margin:8px 8px 0 0;} #buttons #math_operators{float:left;width:60px;height:280px;overflow:hidden;} #buttons #math_operators input{height:60px;width:60px;margin:8px 0 0 0;} #buttons #equal_operator{float:left;margin:1px 1px 0 0;} #buttons