HTML网页实验报告院系：计算机控制与工程学院班级：计124-1学号：姓名：完成日期：2014年12月18日一．实验名称：设计一个网页计算器二．需求分析：计算器是日常生活中十分便捷有效的工具，能实现加、减、乘、除、开方、求倒数等简单运算的工具。

要实现计算功能，可以用HTML的知识编写程序来解决此问题。

该计算器大大的降低了数字计算的难度及提高了计算的准确度和精确度。

该计算器使用非常简单和方便，对广大学生的学习有巨大帮助作用，也对在职人员的工作有点帮助作用。

三．实验目的：1.熟悉html5图形用户界面的设计原理和程序结构2.能设计复核问题要求的图形用户界面程序3.熟悉javascript css、button和table的组合4.会应用button和table组件进行应用程序设计四．实验硬件软件环境：1.Dreamweaver开发环境五．详细内容：使用《网页设计与开发》课程讲授内容，编写一个简单的计算器，要求实现如下功能：1.进行图形界面设计通过图形界面设计，掌握文本框、标签及按钮的使用方法。

2.实现计算器的基本功能计算器的设计按软件工程的方法进行,网页具有良好的界面；必要的交互信息；简约美观的效果。

使用人员能快捷简单地进行操作。

即可单击按钮进行操作，也可直接通过键盘直接输入。

即时准确地获得需要的计算的结果，充分降低了数字计算的难度和节约了时间，对人们的生活有一定的帮助。

包含的功能有：加、减、乘、除运算，开方、求倒数等功能．计算器的扩展功能包括乘方、对数、正弦、余弦、正切、余切、反正弦、反余弦、反正切、反余切等功能。

4．计算器工作流程图六．实验设计：1、实验算法设计<script type="text/javascript">// JavaScript Documentvar NUM=1var endNumber=truevar mem=0var carry=10var hexnum="0123456789abcdef"var angle="d"var stack=""var level="0"var layer=0function doit(){document.getElementById("txt1").value=eval(document.getElementById("txt 1").value) }function add(obj){ if(NUM==1) { document.getElementById("txt1").value+=obj.value;}else {clears();NUM=1; document.getElementById("txt1").value+=obj.value;}}function results(){var obj=document.getElementById("txt1").value;if(obj.indexOf("=")<0){NUM=0;if(bic==1){num=document.getElementById("txt1").value;document.getElementById("txt1").value=Math.pow(Num,num);bic=0;}else{document.getElementById("txt1").value=eval(obj);}}}//角度制和弧度制function inputChangAngle(a){endNumber=trueangle=aif (angle=="d")document.getElementById("txt1").value=radiansToDegress(document.getElem entById("txt1").value)elsedocument.getElementById("txt1").value=degressToRadians(document.getElem entById("txt1").value)endNumber=true}function degressToRadians(degress){return(degress*Math.PI/180)}function radiansToDegress(radians){return(radians*180/Math.PI) }//+/-function changeSign(){if (document.getElementById("txt1").value!="0")if(document.getElementById("txt1").value.substr(0,1) == "-") document.getElementById("txt1").value = document.getElementById("txt1").value.substr(1)elsedocument.getElementById("txt1").value = "-" + document.getElementById("txt1").value}//ln函数function ln10(){document.getElementById("txt1").value=Math.LN10}function clears(){ document.getElementById("txt1").value="";}function Cos(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.cos(x); }function Sin(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.sin(x);}function Tan(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.tan(x);}function Atan(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.atan(x);}function Acos(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.acos(x);}function Asin(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.asin(x);}//pi的值function pi(){var x=3.141592653589793;document.getElementById("txt1").value=x;}//E的值function e(){var x=2.718281828459045;document.getElementById("txt1").value=x;}function Sqrt(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.sqrt(x);}function Pow(){Num=Number(document.getElementById("txt1").value);bic=1;clears();}function Square(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x*x }function nation(){x=document.getElementById("txt1").value;y=document.getElementById("txt1").value;if(x==''||y='')alert('Error: Input Required');else document.getElementById("txt1").value=x*y;}function Log(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.log(x); }function Round(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=Math.round(x); }function Ran(){x=document.getElementById("txt1").valuedocument.getElementById("txt1").value=Math.random(x); }function del(){x=document.getElementById("txt1").valuedocument.getElementById("txt1").value=x.substring(0,document.getElement ById("txt1").value.length-1)}function two(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/2;}function three(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/3;}function four(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/4;}function five(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/5;}function six(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/6;}function seven(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/7;}function X1(){x=document.getElementById("txt1").valueif(x==''||x=='0')alert('Error: Input Required');else document.getElementById("txt1").value=1/x;}function X2(){x=document.getElementById("txt1").valueif(x==''||x=='0')alert('Error: Input Required');else document.getElementById("txt1").value=2/x;}function X3(){x=document.getElementById("txt1").valueif(x==''||x=='0')alert('Error: Input Required');else document.getElementById("txt1").value=3/x;}function nine(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/9;}function ten(){x=document.getElementById("txt1").valueif(x=='')alert('Error: Input Required');else document.getElementById("txt1").value=x/10;}function adddel(){x=document.getElementById("txt1").value;if(x.indexOf('-')<0){ document.getElementById("txt1").value.indexOf('-' )=-x}else document.getElementById("txt1").value=-x;adddel();}</script>2、实验界面显示设计：运用<table>表格设计计算机基本页面显示，加上css设计表格样式：CSS代码：<style type="text/css" >#txt1{border:dashed 0px #000000;-moz-border-radius: 0px;-webkit-border-radius: 0px;border-radius: 0px;height:50px;width:400px;}input{border:inset 8px #0f191a;-moz-border-radius: 24px;-webkit-border-radius: 24px;border-radius: 24px;width:100px;}.STYLE3 {font-family: "新宋体"; font-weight: bold; font-size: xx-large;}</style>七．程序测试记录与结果说明：1、运行得出以下图片：角度制和弧度制：八．实验分工：九．总结经过了一个学期的HTML的学习，我们受益良多，最终设计出了一款网页计算器，虽然它有待进一步完善，但却融入了我们两人的心血，只要有所付出，就会有所收获。