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

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

（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>