一、计算梯形的面积。按下图所示页面效果,编程实现所需功能。
(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>