Web前端开发技术————期末编程例题

计算梯形的面积。按下图所示页面效果，编程实现所需功能。（1）表单中设置4个文本框、1个按钮、1个重置按钮，其中梯形的面积文本框设置为只读；（2）编写两个自定义函数，分别是计算梯形的面积函数area（a,b,c）、在页面上显示结果show()，并在show()函数中调用area(a,b,c)函数(a为长度，b为宽度，c为高度)；（3）输入完长、宽、高后，点击“计算梯形的面积”按钮后，将计算结果显示在

Tony-hnv

6222人浏览 · 2021-07-04 00:19:33

Tony-hnv · 2021-07-04 00:19:33 发布

一、计算梯形的面积。按下图所示页面效果，编程实现所需功能。

（1）表单中设置4个文本框、1个按钮、1个重置按钮，其中梯形的面积文本框设置为只读；

（2）编写两个自定义函数，分别是计算梯形的面积函数area（a,b,c）、在页面上显示结果show()，并在show()函数中调用area(a,b,c)函数(a为长度，b为宽度，c为高度)；

（3）输入完长、宽、高后，点击“计算梯形的面积”按钮后，将计算结果显示在“梯形的面积”文本框中；（4）点击“重置”按钮后，将所有文本框清空；（5）梯形的面积保留2位小数。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>计算梯形面积</title>
</head>
	<script type="text/javascript">
		function area(a,b,c){
			var area = (a+b)*c/2;
			return area;
	}
		function show(){
			var l = parseFloat(document.getElementById("chang").value);
			var w = parseFloat(document.getElementById("kuan").value);
			var h = parseFloat(document.getElementById("gao").value);
			document.getElementById("area").value = area(l,w,h).toFixed(2);
			return mianji;
		}
</script>
<body>
	<h2>计算梯形的面积</h2>
	<form>
		梯形的长：<input type="text" id="chang" /><br />
		梯形的宽：<input type="text" id="kuan" /><br />
		梯形的高：<input type="text" id="gao" /><br />
		梯形的面积：<input type="text" id="area" /><br />
		<input type="button" value="计算梯形的面积" onclick="show()"/>
		<input type="reset" value="重置" />
	</form>
</body>
</html>

-------------------------------------------------------分割线-----------------------------------------------------------------

二、表单编程。

编程实现课程教学反馈页面，布局效果如图所示。要求如下：

（1）页面标题为“Web前端开发技术教学反馈”；

（2）表单中添加2个文本框、2个单选钮、1个多行文本区域、1个提交按钮、1个重置按钮，其中学号文本框最大长度为10、姓名文本框最大长度为8、多行文本区域为4行60列；性别：分单选钮男、女。

（3）用3号标题设置页面上的“Web前端开发技术教学反馈”。（4）学号文本输入框和姓名文本输入框为必填项；

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Web前端开发技术教学反馈</title>
</head>

<body>
	<h3>Web前端开发技术教学反馈</h3>
	<form>
	学号：<input type="text" id="usereid" maxlength="10" required/>
	姓名：<input type="text" id="usernamee" maxlength="8" requied/>
	性别：<input type="radio" value="男" name="man">男<input type="radio" value="女" name="man">女
	<br />教学反馈意见：<br />
	<textarea row="4" cols="60">请输入意见</textarea><br />
	<input type="submit" value="提交">
	<input type="reset" value="重置"> 
	</form>
</body>
</html>

-------------------------------------------------------分割线-----------------------------------------------------------------

三、JavaScript编程

计算所有能被17整除的3位整数的和，如图所示。

（1）编写sum3()函数，实现计算所有能被17整除的3位整数的和，要求采用do while循环结构进行编程；

（2）采用4号标题字显示标题；

（3）在循环体内依次输出满足条件的数；

（4）将计算结果直到输出在页面上。

<!doctype html>
<html>
 <head>
  <title> 计算所有能被17整除的3位整数的和 </title>
  <script type="text/javascript">
      function sum3(){                     
       var i=100,sum=0;     
       document.write("满足条件的3位整数有：<br>");       
       do  {   
          if (i%17==0) {sum=sum+i;document.write(i+"  ");}  
             i++;            
       }while (i<=999);   
       return sum;   
    }
    </script>
  </head>
 <body>
   <h4>计算所有能被17整除的3位整数的和</h4>
   <script type="text/javascript">
         document.write("<br>所有能被17整除的3位整数的和="+sum3()); </script>
 </body>
</html>

-------------------------------------------------------分割线-----------------------------------------------------------------

四、DIV+CSS技术实现页面布局

利用DIV+CSS布局完成如下图所示页面的布局效果如图所示。要求：

（1）header区域，footer区域，DIV背景颜色为#6cf；常用的CSS布局文字所在DIV背景色为：#3C0;这里是侧边栏文字所在DIV背景颜色为：#F93。

（2）合理设置DIV的嵌套及其CSS规则定义，完成如下图所示的三行两列布局效果的页面。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
	*{
		margin:0 auto;}
	.head{
		width:100%;
		height:120px;
		background:#6cf;}
	.main{
		width:100%;
		height:400px;}
	.left{
		width:70%;
		height:100%;
		background:#3c0;
		float:left;}
	.right{
		width:30%;
		height:100%;
		background:#f93;
		float:left;}
	.footer{
		width:100%;
		height:80px;
		background:#6cf;
		clear:both;}
</style>

</head>

<body>
	<div class="head">
    	<p>这是header的区域</p>
    </div>
    <div class="main">
      <div class="left">
		  <p>常用的CSS布局</p>
      </div>
      <div class="right">
		  <p>这是侧边栏</p>
      </div>
    </div>
    <div class="footer">
	  <p>这里是footer区域，放置版权信息等内容</p>
    </div>
</body>
</html>

-------------------------------------------------------分割线-----------------------------------------------------------------

五、DIV+CSS技术实现页面布局

利用DIV+CSS布局完成如下图所示页面的布局效果如图4-6所示.

要求：

（1）header区域，footer区域，DIV背景颜色为#0cf；次要内容区域、侧边栏的DIV背景色均为：#C63;主要内容区DIV背景颜色为：#FF0。

（2）合理设置DIV的嵌套及其CSS规则定义，完成如下图4-6所示效果。

所示的三行三列布局效果的网页。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
	<style type="text/css">
		.header{
			width:100%;
			height:120px;
			background:#0cf;}
		.main{
			width:100%;
			height:400px;}
		.left{
			width:29%;
			height:100%;
			background:#c63;
			float:left;;
		}
		.center{
			width:39.5%;
			height:100%;
			background:#ff0;
			float:left;
			margin-left: 12px;
		}
		.right{
			width:30%;
			height:100%;
			background:#c63;
			float:right;}
		.footer{
			width:100%;
			height:80px;
			background:#0cf;
			clear:both;}
    </style>
</head>

<body>
	<div class="header">
    	<p>这里是header区域</p>
    </div>
    <div class="main">
    	<div class="left">
			<p>次要内容区域————常见的CSS布局</p>
        </div>
        <div class="center">
			<p>主要内容区域————常见的CSS布局</p>
        </div>
        <div class="right">
			<p>这里是侧边栏</p>
        </div>
    </div>
    <div class="footer">
		<p>这里是footer区域，放置版权信息等内容</p>
    </div>
</body>
</html>