广州大学学生实验报告一、实验目的使用脚本语言进行网页设计二、实验设备Tomcat windows10 eclipse三、实验内容1.简易计算器的制作在一个网页中，使用JavaScript编写程序实现的计算器功能，可以实现浮点数的加法，减法，乘法，除法运算功能。
2.控制网页字体的大小在一个网页中，有三个按钮是小，中，大，使用JavaScript编写程序实现当点击一个按钮时，网页就按照相应的字体大小显示网页的文字。
四、实验程序1.简易计算器的制作<!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>简易计算器</title><style type="text/css">div{margin:0px auto;text-align:center;}table{background:#999;}td input{width:50px;height:50px;}input.p{height:20px; width:150px;}</style><script language="javascript">/*全局变量*/var num1=0; //第一个数字var num2=0; //第二个数字var result=0; //显示栏显示的数字var oper=0; //运算符号/*获得数字*/function getNum(num){var str=String(from1.resu.value); //获得当前显示数据//如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;if(str!="0"){str=str;}else{str="";}str=str + String(num); //给当前值追加字符from1.resu.value=str; //刷新显示}/*除法运算*/function division(){//calculate();num1=parseFloat(from1.resu.value);oper=1;from1.resu.value = "";}/*乘法运算*/function mult(){//calculate();num1=parseFloat(from1.resu.value);oper=2;from1.resu.value = "";}/*减法运算*/function subd(){//calculate();num1=parseFloat(from1.resu.value);oper=3;from1.resu.value = "";}/*加法运算*/function sum(){//calculate();num1=parseFloat(from1.resu.value);oper=4;from1.resu.value = "";}/*最终结果的*/function equal(){//调用计算方法var str=String(from1.resu.value);num2=parseFloat(str);calculate();//简单的清空数值，方便后面的操作num1=0;num2=0;result=0;}/*各种运算*/function calculate(){//num2=parseInt(from1.resu.value); switch(oper){ //判断要输入状态case 1:result=num1/num2;break;case 2:result=num1*num2;break;case 3:result=num1-num2;break;case 4:result=num1+num2;break;default:result = num2;break;}from1.resu.value=result;num1=result; //存储当前值}/*复位*/function clean(){from1.resu.value=0;num1=0;num2=0;result=0;oper=0;}</script></head><body><div><h2>简易计算器</h2><center><form id="from1"><table width="314"height="333"border="1"><tr><td colspan="3"align="center"><input type="text"name="resu"id="resu"class="p"/></td><td align="center"><input type="button"name="button"id="button"value="C"onclick="clean()"/></td></tr><tr align="center"><td><input type="button"name="button7"id="button7"value="7" onclick="getNum(this.value)"/></td><td><input type="button"name="button8"id="button8"value="8" onclick="getNum(this.value)"/></td><td><input type="button"name="button9"id="button9"value="9"onclick="getNum(this.value)"/></td><td><input type="button"name="button10"id="button10"value="/" onclick="division()"/></td></tr><tr align="center"><td><input type="button"name="button4"id="button4"value="4" onclick="getNum(this.value)"/></td><td><input type="button"name="button5"id="button6"value="5" onclick="getNum(this.value)"/></td><td><input type="button"name="button6"id="button6"value="6" onclick="getNum(this.value)"/></td><td><input type="button"name="button11"id="button11"value="*" onclick="mult()"/></td></tr><tr align="center"><td><input type="button"name="button1"id="button1"value="1" onclick="getNum(this.value)"/></td><td><input type="button"name="button1"id="button1"value="2" onclick="getNum(this.value)"/></td><td><input type="button"name="button3"id="button3"value="3" onclick="getNum(this.value)"/></td><td><input type="button"name="button12"id="button13"value="-" onclick="subd()"/></td></tr><tr align="center"><td><input type="button"name="button0"id="button0"value="0" onclick="getNum(this.value)"/></td><td><input type="button"name="button15"id="button15"value="." onclick="getNum(this.value)"/></td><td><input type="button"name="button16"id="button16"value="=" onclick="equal()"/></td><td><input type="button"name="button17"id="button17"value="+" onclick="sum()"/></td></tr></table></form></center></div></body></html>2. 控制网页字体的大小<!DOCTYPE html><html><head><title>控制网页字体的大小</title><!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <style type="text/css">div{border:1px red solid;width:455px;font-size:16px;}.max{font-size:20px;}.moren{font-size:16px;}.min{font-size:12px;}</style><script type="text/javascript">function changeFontSize(fontSize){// 获取节点对象var divNode = document.getElementsByTagName("div")[0];divNode.style.fontSize=fontSize;}</script></head><body><a href="javascript:void(0)"onclick="changeFontSize('20px')"class="max">大号</a><a href="javascript:void(0)"onclick="changeFontSize('16px')"class="moren">中号</a><a href="javascript:void(0)"onclick="changeFontSize('12px')"class="min">小号</a><div>子曰：“学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？”有子曰：“其为人也孝弟，而好犯上者，鲜矣；不好犯上而好作乱者，未之有也。