期末考试
程序员文章站
2022-07-05 22:14:50
...
表格：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 上机考试操</title>
<title> 上机考试操</title>
<style type="text/css">
th,td{
font-size: 20px;
}
</style>
</head>
<body>
<div>
<iframe id="header" src="header.html" scrolling="no" width="100%" height="700px"></iframe>
</div>
<div id="content">
<center>
<p style="font-size:24px;">按照下面图示的表单各项，请在本图片下编写HTML代码实现这个表单效果。</p>
<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
<img src="images/aa.JPG"
<p style="font-size:40px;">我的表单</p>
<hr/>
<p style="font-size:36px"> 此处编写代码 实现上面图片的效果：注意：<span style="font-size:36px; background-color:#FF9900">表单中 有表格,以及验证码图片</span>将图片文件code.jpg导入调整尺寸即可</p>
<!--定义表单 form-->
<form action="#" method="post">
<table border="1" align="center" width="300">
<tr> <td>用户名</td> <td><input type="text" /></td> </tr>
<tr> <td>密码</td> <td><input type="text" /></td> </tr>
<tr> <td>Email</td> <td><input type="text" /></td> </tr>
<tr> <td>姓名</td> <td><input type="text" /></td> </tr>
<tr> <td>手机号</td> <td><input type="text" /></td> </tr>
<tr> <td>性别</td> <td> 男<input type="radio" />女<input type="radio" /></td> </tr>
<tr> <td>出生日期</td> <td><input type="text" value="年/月/日" /></td> </tr>
</table><br>
爱好：<input type="checkbox" checked />体育
<input type="checkbox" />唱歌
<input type="checkbox" checked />阅读
<input type="checkbox" />旅游<br>
地址：<select id="mySelect">
<option>北京</option>
<option>天津</option>
<option>南京</option>
<option>东京</option>
</select><br>
自我介绍：<textarea rows="10" cols="30">
这里是自我介绍。
</textarea><br>
验证码：<input type="text" /><img src="images/code.jpg" width="80px" leight="50px"></img><br>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
<input type="button" value="按钮" />
</form>
<div style="margin:10px;">
<center>
<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
</center>
</div>
</body>
</html>
js
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery-3.4.1.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 上机考试操JS部分</title>
<style type="text/css">
p{
font-size:24px;
}
.xianshi{
font-size:36px;
background:#99CC33;
width:200px;
}
</style>
<script>
$(document).ready(function(){
$("#a").click(function(){
$("img").toggle();
});
});
$(document).ready(function(){
$("#sum").click(function(){
var x1 = $("#bj1").text();
var x2 = $("#bj2").text();
var x3 = $("#bj3").text();
var x4 = $("#bj4").text();
var sum1 = Number(x1)+Number(x2)+Number(x3)+Number(x4);
$("#bj5").html(sum1);
var x5 = $("#sh1").text();
var x6 = $("#sh2").text();
var x7 = $("#sh3").text();
var x8 = $("#sh4").text();
var sum2 = Number(x5)+Number(x6)+Number(x7)+Number(x8);
$("#sh15").html(sum2);
var x9 = $("#hz1").text();
var x10 = $("#hz2").text();
var x11 = $("#hz3").text();
var x12 = $("#hz4").text();
var sum3 = Number(x9)+Number(x10)+Number(x11)+Number(x12);
$("#hz5").html(sum3);
});
});
</script>
</head>
<body>
<div>
<iframe id="header" src="header.html" scrolling="no" width="100%" height="700px"></iframe>
</div>
<center>
<p><a href="index.htm" style="background-color:#FF3399; font-size:24px">返回考试首页</a></p>
<div>
<button id="a">隐藏/显示</button><br>
<img src="images/car.jpg" width="500" height="300"/>
</div>
<table border = "6px" width="500px" bgcolor="#FFFF66" align = "center">
<caption>汽车厂商北京 上海 杭州 销售数量（单位：台）统计</caption>
<thead>
<tr bgcolor="#99CC66">
<th rowspan="2" >城市</th>
<th colspan="2">2017年</th>
<th rowspan="2" >2018年</th>
<th rowspan="2" >2019年</th>
<th rowspan="2">按地域统计</th>
</tr>
<tr bgcolor="#FFCCFF">
<th> 上半年</th>
<th> 下半年</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td id="bj">北京</td>
<td id="bj1">4500</td>
<td id="bj2">5000</td>
<td id="bj3">5200</td>
<td id="bj4">5300</td>
<td id="bj5"></td>
</tr>
<tr>
<td id="sh">上海</td>
<td id="sh1">4800</td>
<td id="sh2">5200</td>
<td id="sh3">5400</td>
<td id="sh4">5900</td>
<td id="sh15"></td>
</tr>
<tr>
<td id = "hz">杭州</td>
<td id = "hz1">6200</td>
<td id = "hz2">5900</td>
<td id = "hz3">6200</td>
<td id = "hz4">6300</td>
<td id = "hz5"></td>
</tr>
</tbody>
</table>
<button id="sum">合计</button>
</p>
</center>
<h2>题目要求</h2>
<ul>
<li style="font-size:24px;">使用jquery 技术实现本页上面图片的<strong>隐藏和显示</strong></li>
<li style="font-size:24px;"> 请引入js库文件，添加按钮<span style="font-size:40px;">在相应的行末统计区域销售总量</span>
</li>
</ul>
<br>
<div style="margin:10px;">
<center>
<iframe runat="server" src="footer.html" width="980" height="150" frameborder="0" scrolling="no"></iframe>
</center>
</div>
</body>
</html>