web前端开发技术储久良第三版答案整理（下：附录模拟试卷）_诗和远方_弈心博客
web前端开发技术储久良第三版答案整理（中：10-17章）_诗和远方_弈心博客
web前端开发技术储久良第三版答案整理（上：1-9章）_诗和远方_弈心博客
练习12
1.选择题
（1）B （2）A （3）C （4）D （5）A
2.简答题
（1）略
(2) display: none让对象不显示，原来不存在。 display:block—作用是显示特定对象；visibility: visible—作用是让特定对象可视（说明原来就存在，只是不可视），对使用visibility: hidden : 可以让对象隐藏起来。
实验12
1、源代码：
HTML文件
<!-- exp_10_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Web页面设计实例</title>
<link href="exp_10_1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="Container">
<div id="Header">
<img src="Header.jpg">
<h4>
<span>首页</span>
<span>|</span>
<span>博客</span>
<span>|</span>
<span>设计</span>
<span>|</span>
<span>论坛</span>
<span>|</span>
<span>关于</span>
</h4>
</div>
<div id="PageBody">
<div id="SideBar">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">设计</a></li>
<li><a href="#">论坛</a></li>
<li><a href="#">关于</a></li>
</ul>
</div>
<div id="MainBody">
<h3>欢度新春佳节</h3>
<img src="huanduchunji.jpg" width="694" height="308" border="0" alt="">
</div>
</div>
<div id="Footer">
<p>Copyrights 2015-2020 Web前端开发工作室© All rights reserved. 中国江苏</p>
</div>
</div>
</body>
</html>CSS文件
/* exp_10_1.css */
/* 应用对象：edu_10_1.html*/
body {
font-family:Verdana;
font-size:16px;
margin:0;
text-align:center;
}
h4{float:left;margin:45px auto;padding-left:50px;}
p{margin:2px;font-size:14px;
}
#Container {margin:0 auto;
width:900px;
}
#Header {
height:118px;
border-bottom:5px;
background-color:rgb(230,230,230);
border-bottom:5px solid #FFFFFF;
}
#PageBody {
height:380px;
border-bottom:5px solid #FFFFFF;
}
#SideBar {
float:left;
width:200px;
height:380px;
background:#Dff100;
text-align:center;
padding:50px auto;
border-right:5px solid #FFFFFF;
}
#MainBody {
float:right;
width:695px;
height:380px;
background:#cff000;
}
#Footer {
height:60px;
background-color:rgb(230,230,230);
text-align:center;
font-family:"Courier New";
font-size:12px;
padding-top:10px;
}
#Header img{
float:left;
}
span{margin-top:45px;width:50px;height:30px;font-size:20px;font-family:"华文新魏";padding:45px 10px;
vertical-align:middle;text-align:center;
}
a{width:48px;height:24px;
font-size:20px;
font-family:"华文新魏"; text-align:center;
}
ul{list-style-type:none;margin:0px;padding:35px;text-align:center;}
li{ width:50px;height:30px;
font-size:20px;
font-family:"华文新魏";
padding:10px 35px;
}
h3{text-align:center;color:red;font-size:24px;
background:#CFF000;padding:6px auto;}
a:link,a:visited,a:active{text-decoration:none;display:block; }
a:hover{border-bottom:2px solid #FF0000;background:#55A0FF;color:#FFFFFF;}2．Exp_10_2.html exp_10_2演示
<!-- exp_10_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>DIV+CSS布局</title>
<style type="text/css">
*{font:24px/1.5em 黑体;margin:0 auto;padding:0px;}
#Container{
width:1006px;
margin:0 auto;/*设置整个容器在浏览器中水平居中*/
}
#Header{
height:120px;
background:#093;
}
#logo{
height:80px;
background:#5f5;
border-bottom:2px solid white;
}
#nav{
height:40px;
background:#3f5;
border-bottom:2px solid white;
}
#Content{
width:100%;
height:400px;
background:#00EEFF;
}
/*设置浮动，实现多列效果，div+Css布局中很重要的*/
#Content-left{
height:400px;
width:250px;
float:left;
background:#66ff66;
border-right:2px solid white;
}
#Content-center-left{
height:400px;
width:250px;
float:left;
background:#77ff66;
border-right:2px solid white;
}
#Content-center-right{
height:400px;
width:250px;
float:left;
background:#88ffDD;
border-right:2px solid white;
}
#Content-right{
height:400px;
width:250px;
float:left;
background:#99ff66;
}
#Footer{
height:40px;
background:#6FC;
border-top:2px solid white;
}
.Clear{
clear:both;
margin:0 auto;
padding:0px;
}
</style>
</head>
<body>
<div id="Container">
<div id="Header">
<div id="logo">logo</div>
<div id="nav">nav</div>
</div>
<div id="Content">
<div id="Content-left">Content-left</div>
<div id="Content-center-left">Content-center-left</div>
<div id="Content-center-right">Content-center-right</div>
<div id="Content-right">Content-right</div>
</div>
<div class="Clear"><!--如何你上面用到float,下面布局开始前最好清除一下。--></div>
<div id="Footer">Footer</div>
</div>
</body>
</html>练习11
1.选择题
（1）B （2）D （3）D （4）B （5）D （6）B
2.填空题
(1)<table></table>、 <tr></tr>、<th></th>
(2) rowspan 、3、 Colspan 、 5
(3) frame、rules
(4) cellspacing、cellpadding
3.简答题
答案略，见教材。
实验11
1、源代码： exp_11_1演示
------------------- exp_11_1.html -----------------
<!-- exp_11_1.html -->
<html>
<head>
<title> 表格实验 </title>
<style type="text/css">
table{border:10px groove #ff0000;}
td{border:1px solid black ;text-align:center;}
</style>
</head>
<body>
<table width=300 border="1" align=center >
<tr>
<td rowspan="2" ><b>A</b></td>
<td colspan="2" height="100" ><b>B</b></td>
<tr align="center">
<td height="100"><b>E</b></td>
<td rowspan="2"><b>C</b></td>
<tr align=center>
<td colspan="2" height="100"><b>D</b></td>
</tr>
</table>
</body>
</html>2、源代码： exp_11_2演示
<!-- exp_11_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div与表格应用实例——计算器布局</title>
<style type="text/css">
#wrap{
width:410px;
height:450px;
background-color:rgb(230,230,130);
z-index:0;
}
#result{
height:60px;
width:390px;
border:solid 1px;
z-index:1;
position:absolute;
top:50px;
left:20px;
background-color:white;
}
#op{
height:310px;
width:390px;
z-index:1;
position:absolute;
top:115px;
left:20px;
}
td{
border:solid 1px black;
width:58px;
height:40px;
margin:10px; /*margin表示边距*/
cursor:pointer; /*设置鼠标指针变成手的形状*/
}
</style>
</head>
<body>
<div id="wrap">
<img src="casio.bmp"></img>
<div id="result"></div>
<div id="op">
<table cellspacing="30" border="1">
<tr align="center">
<td>1</td>
<td>2</td>
<td>3</td>
<td>+</td>
</tr>
<tr align="center">
<td>4</td>
<td>5</td>
<td>6</td>
<td>-</td>
</tr>
<tr align="center">
<td>7</td>
<td>8</td>
<td>9</td>
<td>*</td>
</tr>
<tr align="center">
<td>0</td>
<td>=</td>
<td>CE</td>
<td>/</td>
</tr>
</table>
</div>
</div>
</body>
</html>额，书找不到了。有需要12章答案的同学辛苦把题目拍照发我，我做一份。
练习13
1.选择题
(1) D (2) C (3) B (4) C (5) A
2.填空题
(1)post、get
(2)浏览器、服务器
(3)<option>、name、size、multiple
(4)textarea、rows、cols
(5)reset、submit、button
(6)不相同、不相同；相同、不相同
(7)checked、selected
(8)fieldset、legend
实验13
1、源代码： exp_13_1演示
<!-- exp_13_1.html 实验13-1 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录页面</title>
<style type="text/css">
fieldset{width:300px;height:150px;border:1px double #0033ff;text-align:center;}
</style>
</head>
<body>
<form name="form1" method="post" action="">
<fieldset>
<legend>登录页面</legend>
用户名:<input type="text" name="username"><br>
密 码:<input type="password" name="pwd"><br>
类 型:
<input type="radio" name="r" value="r1">管理员
<input type="radio" name="r" value="r2">普通用户<br>
<input type="checkbox" name="cb" value="cb1">记住密码
<input type="checkbox" name="cb" value="cb2">自动登录<br>
<input type="submit" name="submit" value="提交">
<input type="reset" name="reset" value="重置">
</fieldset>
</form>
</body>
</html> 2、源代码： exp_13_2演示
<!-- exp_13_2.html 实验13-2 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>应聘页面</title>
</head>
<body>
<form>
<strong>希望工作地点:</strong>
<select name="hangye" size=1>
<option value="北京" selected>北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="西安">西安</option>
<option value="杭州">杭州</option>
<option value="南京">南京</option>
<option value="重庆">重庆</option>
<option value="天津">天津</option>
</select>
<strong>月薪要求:</strong>
<input type="text" size=10>
<input type="checkbox">要求提供过度住房<br>
<strong>请选择应聘行业:</strong><br>
<select name="hangye" size=8 multiple>
<option value="C1" selected>计算机软件</option>
<option value="C2">计算机硬件</option>
<option value="C3">计算机服务</option>
<option value="C4">通信/电信/网络设备</option>
<option value="C5">互联网/电子商务</option>
<option value="C6">网络游戏</option>
<option value="C7">电子技术/半导体/集成电路</option>
<option value="C8">仪器仪表/工业自动化</option>
</select>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
</body>
</html>练习14
1.选择题
(1) A (2) C (3) B (4) C (5) C (6) A (7) D
2.填空题
(1) <script type="text/javascript"></script>
(2) 告警框、确认框、提示框
(3) Infinity
(4) true
(5) 5、7、2
3.简答题
略。
实验14
1.代码 exp_14_1演示
<!-- exp_14_1.html 实验14-1 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
</head>
<body>
<h4>九九乘法表</h4>
<script type="text/javascript">
var i,j;
for(i=1;i<10;i++) {
for(j=1;j<=i;j++) {
document.write(j);
document.write('*');
document.write(i);
document.write('=');
document.write(i*j);
document.write(' ');
}
document.write('<br/>');
}
</script>
</body>
</html>2．代码 exp_14_2演示
<!-- exp_14_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>找出符合条件的数</title>
</head>
<body>
<h3>找出1000-9999之间能够被17和13同时整除的整数的个数及累加和</h3>
<script type="text/javascript">
<!--
document.write("区间中符合条件的数有(输出格式：10个1行):<br>");
var count=0;//定义符合条件的数的计数器,兼做分行变量
for (var sum=0,i=1000;i<=9999 ;i++ )
{
if (i%17==0 && i%13==0)
{
document.write(i+" ");
count++;
if (count%10==0)
{
document.write("<br>");
}
sum=sum+i;
}
}
document.write("<br>区间中符合条件的数共有"+count+"个");
document.write("<br>区间中符合条件的数的累加和为"+sum);
//-->
</script>
</body>
</html>练习15
1.选择题
(1) C (2) D (3) A (4) B (5) A (6) D (7) A
2.填空题
(1) 事件处理代码。
(2) HTML属性的静态指定、JavaScript属性的动态绑定、特定对象的特定事件。
(3) Focus、OnFocus、Submit、OnSubmit。
(4) Click、Load
3.问答题
见教材。
实验15
1． 源代码 exp_15_1演示
<!-- exp_15_1.html 实验15-1 -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<html>
<head>
<title> 表单处理事件 </title>
<style type="text/css">
fieldset
{
margin:20px auto;
background:#663399;
width:300px;
height:200px;
padding:20px auto;
color:white;
text-align:center;
}
legend
{
color:white;
font-size:24px;
font-weight:bold;
text-align:center;
}
</style>
<script type="text/javascript">
function checklogin()
{
var username=document.getElementById("myname").value;
var pwd=document.getElementById("mypwd").value;
if(username=="") //两者中有一个为空
{
alert("用户名不能为空！！");
document.getElementById("myname").focus();
return false;
}
else
{
if(username.length<8||username.length>20)
{
alert("用户名太短，应在8~20个字符之间！！");
document.getElementById("myname").focus();
return false;
}
}
if (pwd=="") //两者中有一个为空
{
alert("密码不能为空！！");
document.getElementById("mypwd").focus();
return false;
}
else
{
if(pwd.length<8||pwd.length>20)
{
alert("密码太短，应在6~20个字符之间！！");
document.getElementById("mypwd").focus();
return false;
}
}
return true;
}
</script>
</head>
<body>
<form name="loginform" method="post" action="loginindex.html" onsubmit="return checklogin()">
<fieldset>
<legend>用户登录</legend>
<br><br>
<label>用户名</label>
<input type="text" name="" id="myname" ><br><br>
<label>密 码</label>
<input type="password" name="" id="mypwd" ><br><br><br>
<input type="submit" value="提交"><input type="reset">
</fieldset>
</form>
</body>
</html>2． 源代码 exp_15_2演示
<!-- exp_15_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>显示列表项的内容</title>
<script type="text/javascript">
function disaplayItem(){
var strInfo="" //存放显示信息
var indexvalue=myform.mysel.selectedIndex;
strInfo="教材名称："+myform.mysel.options[indexvalue].text+"\n定价：";
strInfo+=myform.mysel.options[indexvalue].value;
alert(strInfo);
}
</script>
</head>
<body>
<h3>显示列表项的内容</h3>
<form name="myform" method="post" action="">
<select name="mysel" size="5" onchange="disaplayItem()">
<option value="35元" selected>计算机组成原理
<option value="38元">数据结构
<option value="43元">计算机网络
<option value="40元">Java程序设计
<option value="28元">算法分析
</select>
</form>
</body>
</html>练习16
1.选择题
(1) C (2) A (3) A (4) D (5) A (6) A (7) A (8) C (9) A (10) D (11) C
2.填空题
(1)length
(2)random()、PI
(3)true、false
(4)文档对象模型（Document Object Model）、元素节点、文本节点、属性节点
(5)getElementById()、getElementsByName()、getElementsByTagName()
(6) createElement()、removeChild()、appendChild()
(7) innerText()、innerHTML()
(8) window、history、location、screen、navigator, window
(9) confirm()、alert()、prompt()
(10) navigator
3.问答题
见教材。
实验16
<!-- exp_16_1.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>猜字游戏</title>
<script type="text/javascript">
var win_rate=0; //赢率
var play_times=0; //总次数
var wins=0; //赢的次数
var last_digits; //上次数字串
var last_win; //上次是否赢?
function playOnce()
{//模拟玩一次数字机游戏
var i,digit;
play_times++;
last_digits="";
last_win=false;
for(i=0;i<3;i++)
{
digit = Math.floor(Math.random()*9)+1;
last_digits += digit;
if (digit==8)
last_win=true;
}
if(last_win)
wins++;
win_rate = Math.floor(100*(wins/play_times));
}
</script>
</head>
<body>
<script language="javascript">
while(true)
{
playOnce();
if (!confirm(last_digits +"\n" +(last_win?"赢":"输") + "\n您累计玩了"+play_times+"次，赢了"+wins+"次，胜率"+win_rate+"%,继续吗?" )) break;
}
</script>
</body>
</html>2．代码 exp_16_2演示
<!-- exp_16_2.html -->
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机产生20个4位整数并从小到大进行排序</title>
<script type="text/javascript">
var numlist=new Array();//定义存放整数的数组
function $(id){return document.getElementById(id);}
function createNum(){
for (var i=0;i<20 ;i++ )
{
numlist[i]=Math.floor(Math.random()*9000+1000);
}
$("display").value="随机产生20个4位整数，分别如下："+"\n"+numlist.join(",");
$("display").value=$("display").value+"\n从小到大排序后结果为：\n"+numlist.sort();
}
function findNum(){
var find_5time=new Array();
var i=0,j=0;
while (i<numlist.length)
{
if (numlist[i]%5==0)
{
find_5time[j]=numlist[i];
j++;
}
i++;
}
$("display").value+="\n能被5整除的整数有：\n"+find_5time.join(",");
}
</script>
</head>
<body>
<form method="post" action="">
<textarea id="display" name="" rows="10" cols="50"></textarea>
<br><br>
<input type="button" value="随机产生20个整数" onclick="createNum();">
<input type="button" value="找出能被5整除的整数" onclick="findNum();">
<input type="reset"></form>
</body>
</html> 练习16
1.选择题
(1) A (2) D (3) C (4) A (5) B (6) D (7) B (8) D (9) A (10) C
2.填空题
(1)context.drawImage(image,x,y,width,height)、
context.drawImage(image,sx,sy,sw,sh,dx,dy,dw,dh)
(2)ondragover、ondrop
(3)draggable、ondragstart
(4)ondrop
(5)new
(6)JavaScript脚本
(7)onmessage、postMessage(data)
(8)terminate()
(9) localStorage、sessionStorage、setItem(key,value)、getItem(key)、clear()、key(i)、removeItem(key)。
3.问答题
见教材。
实验17
1.代码 prj_17_1演示
<!-- prj_17_1.html -->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简易手机通讯录</title>
<script>
//保存一条通讯记录数据，同时显示在div中
function $(id){return document.getElementById(id);}
function saveInfo(){
var name1=$("username").value;//取姓名
var phone1=$("userphone").value; //取电话
if (name1!="" && phone1!="") //不为空处理
{
localStorage.setItem(name1,phone1);
loadAllInfo();
alert("添加成功");
$("username").value="";//添加成功后置空
$("username").focus();//获得焦点
$("userphone").value=""; //添加成功后置空
}else{//姓名或电话为空，告警并获得焦点
alert("请输入姓名和电话！");
$("username").focus();
}
}
//以姓名查找通讯录信息
function findForName(){
var searchname = $("username").value;
var searchphone = localStorage.getItem(searchname); //取电话
$("userphone").value=searchphone; //填充电话
}
//从localStorage中取出所有通讯录中信息，并展现到界面上
function loadAllInfo(){
// localStorage.clear();
var result = "";
if(localStorage.length>0){
result += "姓名 电话\n";
for(var i=0;i<localStorage.length;i++){
var name= localStorage.key(i);
var phone = localStorage.getItem(name);
result += name+" --- "+phone+"\n";
}
$("phoneset").innerHTML = result;
}else{
$("phoneset").innerHTML = "通讯录为空……";
}
}
//删除某一条通讯信息
function deleteName(){
$("userphone").readonly="readonly";
localStorage.removeItem($("username").value); //按姓名删除通讯录
$("userphone").value=""; //填充电话
$("username").value=""; //填充电话
$("username").focus(); //填充电话
loadAllInfo();
}
</script>
</head>
<body onload="loadAllInfo();">
<article style="width:350px;height:450px;text-align:center;border:12px groove #0099cc;margin:0 auto;padding:20px;">
<header>
<h3 style="background:#ededed;padding:10px auto;">手机通讯录管理器</h3>
</header>
<form method="post" action="">
<fieldset style="width:300px;text-align:center;">
<legend>简易手机通讯录</legend><label for="name">姓名：</label>
<input type="text" id="username" name="username" required/><br/>
<label for="telphone">电话：</label>
<input type="text" id="userphone" name="userphone" required/><br/>
<br><input type="button" onclick="saveInfo()" value="添加"/>
<input type="button" onclick="findForName()" value="查询"/>
<input type="button" onclick="deleteName()" value="删除"/>
<input type="reset">
</form>
<div id="displayallinfo" name="displayallinfo">
<textarea name="" rows="8" cols="30" id="phoneset"></textarea>
</div>
</fieldset>
<footer style="background:#ededed;height:40px;">
<p><strong>前端工作室设计</strong><br>
<strong>版权所有©，2017-2020</strong></p>
</footer>
</article>
</body>
</html>2.代码省略（可参照【例17-1-10】或17.5综合实例）。