实验一：网页的基础代码练习
1、学会使用文字与段落标记
2、通过不同样式的列表设计新闻条目、制度宣传展板和饭店菜单价目表。
3、运用超链接、图像、音视视频、背景音乐等标记设计简易灯箱画廊、媒体播放、简易网站导航、新生课表简介
实验二： DIV+CSS综合运用
1、运用CSS样式属性和样式定义设计《中国教育网络》杂志和《京东商品导购》页面。
2、通过CSS Box的margin、border、padding、content这4个属性，设计常规页面布局和《2015年CERNET华东北地区年会》网站
实验三： 表格与表单页面设计
1、利用表格对网页进行合理布局，设计《网络主题研讨会》日程表和简化版《江苏教育电子政务网》。
2、.理解表单的概念，熟练掌握表单创建方法。掌握表单相关属性设置；掌握表单输入、多行文本输入、列表框等表单控件的属性及设置方法；学会使用fieldset和legend标记来分组表单控件；学会设计用户登录、用户注册、网上调查问卷等表单页面。
实验四：JavaScript应用（二级菜单的制作）
1.理解JavaScript脚本放置与运行的方法。
2.掌握JavaScript基本构成和基础语法。
3.掌握自定义函数定义与引用。
掌握JavaScript基础、标识符、变量、运算符与表达式的定义，熟练使用消息对话框和自定义函数（如sum(n1,n2)）编写简易JavaScript程序。学会使用系统内部函数。
利用事件编程实现校园办公系统认证页面、鼠标动作捕获与响应，学会绑定事件处理程序。
实验五：DOM与BOM应用案例（产生随机数）
实验六 HTML5高级应用案例（1）
1、Web Storage开发当当网图书评论页面
2、HTML5 Canvas开发一个小游戏。
3、使用Web Worker做后台数值(算法)计算
4、利用DOM技术编程实现简易福利彩票投注程序和江苏福彩投注站彩票投注助手。
实验一：网页的基础代码练习9月26日
1、学会使用文字与段落标记
2、通过不同样式的列表设计新闻条目、制度宣传展板和饭店菜单价目表。
3、运用超链接、图像、音视视频、背景音乐等标记设计简易灯箱画廊、媒体播放、简易网站导航、新生课表简介
一、实验目的与要求
1.掌握图像排列操作。
2.学会文字排列。
3.掌握段落排列。
二、实验内容
.制作基础网页
三、实验器材
微机+windows操作系统+HB
四、实验步骤
分析效果图
在图2-11中既有图像又有文字，并且图像居左文字居右排列，图像和文字之间有一定的距离。同时文字由标题和段落文本组成，它们的字体和字号不同。在段落文本中还有一些文字以特殊的颜色加以突出显示，同时每个段落前都有一定的留白。
通过上面的分析，可以知道在页面中需要使用<img />标记插入图像，同时使用<h2>标记和<p>标记分别设置标题和段落文本。接下来对<img />标记应用align属性和hspace属性实现图像居左文字居右、且图像和文字之间有一定距离的排列效果。为了控制标题和段落文本的样式还需要使用文本样式标记<font>，最后在每个段落前使用空格符“ ”实现留白效果。
制作页面结构
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example03】所示。
【example03】
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
3 <html xmlns="http://www.w3.org/1999/xhtml">
4 <head>
5 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6 <title>传智播客设计学院简介</title>
7 </head>
8 <body>
9 <img src="images/sheji.jpg" alt="网页设计、平面设计、UI设计"/>
10 <h2>传智播客设计学院-设计师的摇篮</h2>
11 <p>传智播客设计学院成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。</p>
12 <p>传智播客设计学院教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。</p>
13 <p>迄今为止，传智播客设计学院已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。</p>
14 </body>
15 </html>
在【example03】中，使用<img />标记插入图像，同时通过<h2>标记和<p>标记分别定义标题和段落文本。
运行【example03】，效果如图所示。
HTML结构页面
控制图像
在图2-28所示的页面中，文字位于图像下方。要想实现图2-11所示，图像居左文字居右，并且图像和文字之间有一定距离的排列效果，就需要使用图像的对齐属性align和水平边距属性hspace。
接下来，对【example03】中的图像加以控制，将第9行代码更改如下：
<img src="images/sheji.jpg" alt="我到传智播客设计学院学网页、平面、UI设计去喽" align="left" hspace="30"/>
保存HTML文件，刷新网页，效果如图2-30所示。
控制图像
控制文本
通过对图像进行控制，实现了图像居左文字居右的效果。要想实现图2-12所示，段落中的某些文字以特殊的颜色突出显示、标题和段落文本的字体和字号不同，可以使用文本样式标记<font>。同时通过空格符“ ”可实现段落前的留白效果。
接下来，对文本加以控制，具体代码如下：
16 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
17 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
18 <html xmlns="http://www.w3.org/1999/xhtml">
19 <head>
20 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
21 <title>传智播客设计学院简介</title>
22 </head>
23 <body>
24 <img src="img/laopo.jpg" alt="我到传智播客设计学院学网页、平面、UI设计去喽" align="left" hspace="30"/>
25 <h2><font face="微软雅黑" size="6" color="#545454">传智播客设计学院</font></h2>
26 <p>
27 <font size="2" color="#515151">
28 <font color="#0e5c9e">传智播客设计学院</font>成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。
29 </font>
30 </p>
31 <p>
32 <font size="2" color="#515151">
33 <font color="#0e5c9e">传智播客设计学院</font>教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。
34 </font>
35 </p>
36 <p>
37 <font size="2" color="#515151">
38 ;迄今为止<font color="#0e5c9e">传智播客设计学院</font>已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。
39 </font>
40 </p>
41 </body>
42 </html>
这时，保存【example03】文件，刷新【example03】所在的页面，效果如图所示。
图 控制文本
1、运用CSS样式属性和样式定义设计《中国教育网络》杂志和《京东商品导购》页面。
2、通过CSS Box的margin、border、padding、content这4个属性，设计常规页面布局和《2015年CERNET华东北地区年会》网站
实验目的与要求
（1）给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
（2）给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
一、实验目的与要求
给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
二、实验内容
.构建基础网页
三、实验器材
微机+windows操作系统+HB
四、实验步骤
结构分析
图4-19所示的“咖啡店banner”可以使用内外嵌套的两个盒子(div)来定义，结构如图4-29所示。
结构分析
样式分析
控制效果图4-19的样式主要分为2个部分：
给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。
给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。
制作页面结构
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example09】所示。
【example09】
"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>咖啡店banner</title>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
运行【example09】，此时页面中将不显示任何元素。
定义CSS样式
搭建完页面的结构后，接下来使用CSS对页面的样式进行修饰。本节采用从整体到局部的方式实现图4-19所示的效果，具体如下：
定义基础样式
/*将页面中所有元素的内外边距设置为0*/
*{ padding:0; margin:0;}
控制外层盒子
.outer{ /*设置外面盒子的样式*/
width:900px;
height:344px;
margin:50px auto;
background:url(images/bg.png) repeat-x;
}
在上面的代码中，第5行代码“background:url(images/bg.png) repeat-x;”用于给外层的盒子添加水平平铺的背景图像。
控制内层盒子
.inner{ /*设置里面盒子的样式*/
width:900px;
height:344px;
background:url(images/coffee.png) no-repeat center 30px;
}
在上面的代码中，第4行代码“background:url(images/coffee.png) no-repeat center 30px;”用于给内层盒子添加不平铺的背景图像，该背景图像在外层盒子垂直居中、且距离外层盒子的左边缘30px。
至此，完成图4-19所示“咖啡店banner”的CSS样式部分。刷新【example09】所在的页面，效果如图4-30所示。
CSS控制“咖啡店banner”效果
【实验目的】
1、掌握表格相关标记及其属性的使用；
2、掌握框架集的基本语法，利用 rows、cols 属性设置水平和垂直分割窗口
3、掌握嵌套框架分割窗口的方法；
4、掌握浮动框架基本语法，学会在 Web 页面中嵌入浮动框架；
5、学会使用 frame、iframe 作为超链接的目标，并利用框架结构进行简单页面布局设计。
6、理解表单的概念，熟练掌握表单的创建方法； 掌握表单相关属性设置； 掌握文本框、列表框、按钮、单选按钮、复选框、文件选择框、隐藏框、多行文本输入框、域和 域标题等表单元素的使用方法； 学会设计常见的表单页面。
【实验内容】
1、使用表格和表格属性制作简易表格；
2、美化表格；
3、使用框架集和框架属性实现页面布局；
4、使用浮动框架实现内联网页布局效果。
5、使用表单制作留言板设计
【实验步骤】
一、使用表格和表格属性制作简易表格
使用表格标记和属性设计“第一学期成绩表”，如图 6.1 所示。
图 6.1 表格设计
1．新建 HTML 网页；
2．插入表格：在 body 标记中插入 table 表格标记，并设置相关属性；
3．设置表格标题：在 table 标记中插入 caption 属性，输入内容为“表 1 第一学期成绩表”，并设置相关属性；
4．插入行：在 table 标记中插入 tr 标记插入行，并设置相关属性；
5．插入列：在 tr 标记中插入 th 标记插入表头列，td 标记插入表格列，输入内容，并设置相关属性；
6．设置单元格跨行跨列属性：rowspan 属性设置单元格跨行，colspan 设置单元格跨列；
行、单元格样式在 head 标记中设置内部样式表，参考代码：
<style type="text/css">
tr{width:500px;text-align:center;vertical-align:middle;height:20px;}
td{font-weight:bold}
</style>
表格参考代码：
<table border="1" align="center" width="600px" height="300px">
<caption><font face="黑体" size="5" color="#000000">
表 1 第一学期成绩表</font></caption>
<tr>
<th rowspan="2">序号</th>
<th rowspan="2">学号</th>
<th rowspan="2">姓名</th>
<th colspan="5">第一学期成绩</th>
</tr>
<tr>
<th> 英 语</td>
<th> 高 数</td>
<th> 学科导论</td>
<th> 就 业</td>
<th> 总 分</td>
</tr>
<tr>
<td>1</td>
<td>1019200101</td>
<td>李大宇</td>
<td>75</td>
<td>76</td>
<td>76</td>
<td>90</td>
<td>395</td>
</tr>
……
<tr>
<td colspan="3">课程平均分</td>
<td>58.2</td>
<td>74.2</td>
<td>69.6</td>
<td>72</td>
<td> </td>
</tr>
</table>
二、美化表格
对上题设计的表格进行美化，效果如图 6.2 所示。设置表格背景图片为 sy6/tu.jpg，背景色为#99ff00，边框颜色绿色，内部边框只显示水平边框、垂直边框不显示，表头和表尾文本变成蓝色，不及格的课程分数变成红色（提示：文本颜色通过设计和应用样式实现）。写出实现这些效果的关键代码。
三、使用框架集和框架属性实现页面布局
1．设计页面布局：采用典型的“厂”字型布局实现简易网站后台管理页面布局，如图 6.4 所示。框架集中的主程序文件为 sy6-4.html；框架集被分割为 4 个框架，顶部页面 top.html，中间左边页面 left.html，中间右边页面 news.html，底部页面 bottom.html。（注：框架中的页面请根据效果自行设计，或从素材中下载）
图 6.4 网站后台管理系统页面布局
2．新建 HTML 文档；
3．采用框架结构进行布局：使用 framset 的 rows 属性将页面水平分割在上、中、下 3 部分，然后对
中间框架进行嵌套垂直分割成左右两个子框架；（注意：frameset 不能包含在 body 标记中）
4．分别设置每个框架的 name 属性、src 属性。其代码如下：
<frameset noresize rows="22%,70%,*" >
<frame src="sy6/top.html" name="topframe" scrolling="no" >
<frameset cols="25%,*">
<frame noresize src="sy6/left.html" name="leftframe" scrolling="no">
<frame noresize src="sy6/news.html" name="rightframe" scrolling="no">
</frameset>
<frame noresize src="sy6/bottom.html" name="bottomframe" scrolling="no">
</frameset>
5．浏览网页效果，如图 6.5 所示。
图 6.5 框架网页效果
四、使用浮动框架实现内联网页布局效果
1．打开 sy6/sy6-5-1.html；
2．在表格中间背景色为白色的单元格（第 3 行 2 列）中定义浮动框架，代码如下；
<iframe name="iframe1" width="600" height="385" frameborder="0"></iframe>
3．浏览网页效果，如图 6.6 所示。
图 6.6 浮动框架
五、留言板设计
用表格、表单和表单元素设计“留言板”页面，如图 7.1 所示
1．新建 HTML 文档；
2．分别定义两个图层、标题字、单元格的样式（可参照以下代码）；
/*第 1 图层样式*/
#div1{background-color:#f2f9fd; color:##66ffff; width:100%; height:30px;}
/*第 2 图层样式*/
#div2{background-color:#f2f9fd; color:##66ffff; width:100%; height:300px; margin-top:3px;}
/*单元格 1 样式*/
.td1{line-height:22px; font-size:18px; color:#339966; width:100px; font-weight:bold;}
/*单元格 2 样式*/
.td2{line-height:42px; font-size:18px; color:#339966; width:100px; font-weight:bold;}
/*标题 1 样式*/
.bt1{font-size:30px; font;family:黑体; font-weight:bold; text-align:left; width:500; color:#0033cc;}
/*标题 2 样式*/
.bt2{font-size:22px; font-family:黑体; font-weight:bold; text-align:left; width:200; color:#0033cc;}
3．在 body 标记中插入两个图层，并应用相应的样式；
4．在第 1 个图层中插入 1 行 2 列表格，在单元格中分别插入标题字；
5．在第 2 个图层中插入表单，在表单中再插入表格，在单元格中插入表单元素；
6．精心调试，合理布局，按如图所示的效果完成页面设计。
1.理解JavaScript脚本放置与运行的方法。
2.掌握JavaScript基本构成和基础语法。
3.掌握自定义函数定义与引用。
掌握JavaScript基础、标识符、变量、运算符与表达式的定义，熟练使用消息对话框和自定义函数（如sum(n1,n2)）编写简易JavaScript程序。学会使用系统内部函数。
利用事件编程实现校园办公系统认证页面、鼠标动作捕获与响应，学会绑定事件处理程序。
一、实验目的与要求
通过JavaScript实现限时秒杀效果的思路如下：
二、实验内容
利用JS设置限时秒杀
三、实验器材
微机+windows操作系统+HB
四、实验步骤
观察图9-1、图9-2容易看出该“限时秒杀”页面主要由背景图片和秒杀计时两部分组成。其中，背景图片可以通过对外层div添加背景来设置，秒杀计时部分通过三个span标记进行定义。由于秒杀结束后，会有一个提示语，还需要在span标记之后定义一个div（默认隐藏）。效果图9-1、9-2对应的结构如图9-10所示。
图 3-10 “限时秒杀”结构分析
实现效果图9-1和9-2所示样式的思路如下：
通过JavaScript实现限时秒杀效果的思路如下：
根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example26】所示。
【example26】
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
1 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>限时秒杀</title>
6 </head>
7 <body onload="fresh()">
8 <div class="img-box"> <!--设置秒杀时间块-->
9 <span id="hour"></span>
10 <span id="munite"></span>
11 <span id="second"></span>
12 <div id="bot-box"></div> <!--设置限时秒杀结束块-->
13 </div>
14 </body>
15 </html>
由于在结构中没有任何内容，此时保存并运行【example26】，页面中不会显示任何效果。
搭建完页面的结构后，接下来使用CSS中的相关样式对页面重新进行布局，具体代码如下：
（1）. 定义基础样式
首先定义页面的统一样式，CSS代码如下：
/*全局控制*/
body{font-size:20px; color:#fff; font-family: microsoft yahei,arial;}
/*清除浏览器默认样式*/
img{list-style:none; outline:none;}
（2）. 设置限时秒杀样式
.img-box{
position:relative;
background:url(images/flash_sale.png);
width:702px;
height:378px;
margin:0 auto;
}
.img-box span{
position:relative;
text-align:center;
line-height:26px;
margin:4px 0 0 3px;
}
.img-box #hour{
left:50.6%;
top:68.35%
}
.img-box #munite{
left:55.2%;
top:68.35%;
}
.img-box #second{
left:59.6%;
top:68.35%;
}
（3）. 设置秒杀结束样式
#bot-box{
position:absolute;
z-index:1;
top:250px;
display:none;
width:702px;
height:51px;
line-height:40px;
text-align:center;
color:#666;
font-size:28px;
}
至此，完成图9-1所示电商网站限时秒杀的CSS样式部分。刷新【example26】所在的页面，效果如图9-11所示。
图 3-11 CSS样式效果
页面布局和样式设计完成后，下面通过JavaScript代码实现显示秒杀时间效果，具体代码如下：
在上面的JavaScript代码中，通过getTime()方法分别获取秒杀结束时间与当前时间的毫秒数，并将其相减转换成秒杀剩余的秒数，其中第9~11行代码计算秒杀剩余的小时、分钟和秒数，然后在第12~17行代码中分别判断小时、分钟和秒并对其分别进行处理，继而判断秒杀是否结束，最后通过setInterval()设置倒计时，使秒杀时间动态显示。
将第4行代码的秒杀结束时间设为一个大于当前的时间，保存并刷新页面，可以得到图9-12所示的效果。
图 3-12 JavaScript秒杀计时效果
当图9-12所示的剩余时间自减为0时，页面会自动变为图9-13所示的效果，即秒杀活动结束。
实验五：DOM与BOM应用案例（产生随机数）11月23日
【实验目的】
1、理解 DOM 树结构和节点的概念，掌握利用 DOM 动态创建和删除页面元素的方法；
2、了解 BOM 结构，学会利用 window 对象进行简单交互式编程。
【实验内容】
1、设计一个页面，显示当前文档的标题、URL、背景色、最后修改日期、包含的超链接个数以及图像的个数；使用 all 属性访问当前 HTML 文档中的所有标记。
2、设计一个简单彩票投注助手程序，页面效果如图 11.1 所示。功能要求：
（1）单击“投注”按钮，在左边文本框中产生一注彩票号码；
（2）单击“清空”按钮，将所有文本框内容清空；
（3）福利彩票号码由 6 个号码，外加 1 个特别号，共 7 个号码组成，号码范围为[01，30]之间的任意一个整数；
（4）采用图层布局，设置图层的属性。
图 11.1 彩票投注程序 1
3、拓展第 2 题要求，设计一个投注数可选的彩票投注程序，页面效果如图 11.2 所示。功能要求：
（1）采用表格和表单进行布局；
（2）单击“机选 1 注”按钮 1 次，就将 1 注的号码形成字符串添加到右边的列表框中，并将每次产生的第一行号码作为预选项，高亮度显示；
（3）单击“机选 5 注”按钮 1 次，就将 5 注的号码形成字符串添加到右边的列表框中，并将每次产生的第一行号码作为预选项，高亮度显示；
（4）单击“机选 10 注”按钮 1 次，就将 10 注的号码形成字符串添加到右边的列表框中，并将每次产生的第一行号码作为预选项，高亮度显示；
（5）单击“删除”按钮 1 次，就将列表框中选中的列表项删除，如果列表框无列表项可删，则用告警消息框提示出错信息；
（6）单击“全部删除”按钮，就将列表框中的所有列表项删除，如果列表框无列表项可删，则用告警消息框提示出错信息。
图 11.2 彩票投注程序 2
4、使用 window 对象的定时器方法实现状态栏移动。如图 11.3 所示，当用户鼠标单击“开始状态栏滚动”按钮，信息条在状态栏相应区域来回移动；单击“停止状态栏滚动”按钮，信息条停止移动并显示“状态栏停止移动”。
图 11.3 状态态移动
【实验步骤】
一、使用 document 对象的属性和方法
1．新建 HTML 框架；
2．利用 document 对象的属性显示文档相关信息并输出；
/*document 对象的属性显示文档相关信息*/
document.write(" 当前文档的标题 :"+document.title+"<BR>");
document.write(" 当前文档的 URL:"+document.URL+"<BR>");
document.write(" 当前文档的背景色 :"+document.bgColor+"<BR>");
document.write(" 当前文档的最后修改日期 :"+document.lastModified+"<BR>");
document.write(" 当前文档包含 "+document.links.length+" 个超链接 <BR>");
document.write(" 当前文档包含 "+document.images.length+" 个图像 <BR>");
3．document 对象的 all 属性可以访问文档中的所有元素对象；
var i,cell;
for(i=0;i<document.all.length;i++){// all 属性返回页面元素数组，通过循环遍历
cell=document.all[i];
if(i>0) {
document.write(",");
}
document.write(cell.tagName);
}
二、彩票投注助手 1
1．建立 HTML 文档框架；
2．参照图 11.1 进行页面布局和设计，参考样式代码如下；
<style type="text/css">
div{ background:#009933; width:400px; height:300px; margin:0px auto; border:2px dotted #ff3300; color:white;}
form{ margin:0 auto;}
table{margin:0 auto;font-weight:bold;}
h2{font-size:28px;text-align:center;}
</style>
3．给表单元素指定事件处理程序；
4．完成代码编写。
function selectnumber(num){
//彩票选号助手
var number=new Array();
for (i=0;i<=6 ;i++ ){
number[i]=Math.floor(Math.random()*30+1); //下舍入
}
document.getElementById(num).innerText=number.join(" ");//将数组元素数连接为字符串，中间用空格连接，作为 1 注彩票号码，写入文本框
}
三、彩票投注助手 2
1．建立 HTML 文档框架；
2．参照图 11.2 进行页面布局和设计；
3．给表单元素指定事件处理程序；
4．完成代码编写。
function selectNumber(n){
//彩票选号助手
var number=new Array();
var objsel=document.getElementById("number1");
var selnum=objsel.options.length;//保存选项添加前总数
for (j=0;j<=n-1;j++){
var list="";
//随机产生 7 个 01~30 之间的整数
for (i=0;i<=6 ;i++ ) {
number[i]=Math.floor(Math.random()*30+1); //下舍入
if (number[i]<10) {number[i]="0"+number[i]; }
}
list=number.join(" ");
//写入到列表框中
var opt=document.createElement("option"); //创建一个列表项 option
var opt_text=document.createTextNode(list); //创建一个文本节点
opt.value=j;
opt.appendChild(opt_text); //将新的列表项节点加入 DOM 树
objsel.appendChild(opt); //将新文本节点加入 DOM 树
}
//始终将新添加的第一个列表项作为预选项
objsel.selectedIndex=selnum;
}
function delSelect() {
var objSelect=document.getElementById( "number1");
var strIndex=objSelect.selectedIndex;
if (strIndex!=-1){objSelect.options.remove(strIndex);
} else{alert("请先选择列表项后再删除！");}
}
function delSelectAll(){
var objSelect=document.getElementById("number1");
var strIndex=objSelect.options.length;
if (strIndex>0){
for (i=0;i<=strIndex-1;i++ )
{objSelect.options.remove(0);}
} else{alert("请先选择列表项后再删除！");}
}
四、使用 window 对象的定时器方法实现状态栏移动
1．建立 HTML 文档框架；
2．参照图 11.3 进行页面布局和设计；
3．给表单元素指定事件处理程序；
4．完成代码编写。
<script language="JavaScript" type="text/javascript">
var TimerID;
var dir=1; //用于控制移动的方向
var str_num=0;
//用于动态显示的目标字符串
var str="欢迎来到 javascript 世界!";
//设定动态显示的状态栏信息
function startStatus(){
var str_space="";
str_num=str_num+1*dir;
if(str_num>30 || str_num<0){ //移动范围 0~30 个字符
dir=-1*dir;
}
for(var i=0;i<str_num;i++){ //在字符串的左或右加空格实现移动
str_space+=" ";
}
window.status=str_space+str; //写入 window 的状态栏
}
//状态栏滚动开始
function MyStart(){
TimerID=setInterval("startStatus();",100); //每间隔 100 毫秒执行 1 次 startStatus()
}
//状态栏滚动结束，并更新状态栏
function MyStop(){
clearInterval(TimerID); //清除定时器
window.status="状态栏移动结束!";
}
</script>
【自主实验】
1、实现如图 11.4 所示的员工选择页面，完成下列功能：
（1）单击“选择部门”下拉列表框时，在左侧多选列表框中列出本部门的员工名单；
（2）单击“
”按钮时，将左侧列表框中选中的元素添加到右侧多选列表框中，同时将这些元素从左侧框中删除；
（3）单 击“
”按钮时，将左侧框中的所有元素添加到右侧框中，同时将这些元素从左侧框中删除；
（4）单击“ 
”按钮时，将右侧列表框中选中的元素添加到左侧多选列表框中，同时将这些元素从右侧框中删除；
”按钮时，将左侧框中的所有元素添加到右侧框中，同时将这些元素从左侧框中删除；
（5）单 击“
”按钮时，将右侧框中的所有元素添加到左侧框中，同时将这些元素从右侧框中删除；
图 11.4 员工选择页面
2、创建如图 11.5 所示的即时网页时钟。
图 11.5 即时网页时钟
3、在网页上实现如图 11.6 所示的中文小月历，要求当天用红底显示。
图 11.6 中文小月历
【实验思考】
1、什么是 document 对象？如何获取文档对象上的元素？
2、什么是 DOM？一个最基本的 DOM 树通常由哪 3 种类型的节点组成？
3、document 对象包含一些创建和修改节点的方法，创建一个元素节点为的方法是？删除一个子节点
的方法是？添加一个子节点的方法是？
4、document 对象怎么获取节点内容？
5、什么是 BOM？它包含哪些对象？最顶层的对象是？
6、简述 window 对象有哪些常用的属性和方法。
一、实验目的与要求：
1、HTML5 Canvas开发一个小游戏。
二、实验内容：
1、五子棋游戏
三、实验器材：
微机+windows操作系统+Editplus
四、实验步骤：
五子棋游戏
棋牌棋子实现原理
画棋盘：
整个棋盘长宽为分别450px，每行14个棋子，每个棋子30px,左右、上下留白15px;
15条线，运行15次，左右、上下留白15px相当于画笔的第一个起始坐标为（15，15);
画横线时：x轴起点位置15，终点位置435，y轴不断增加30px;
画竖线时：y轴起点位置15，终点位置435，x轴不断增加30px;
设置水印：
创建image对象
将image对象存储到浏览器对象
使用drawImage设置图像的长宽，以及图像在棋盘的起始位置
使用图像的onload事件等图像加载完毕，开始执行drawImage以及棋盘的绘制，防止水印图片遮挡住棋盘位置
绘制棋子：
首先画圆，开启一个路径
使用arc开始画圆
关闭路径
设置渐变
棋子落地：
给棋盘绑定点击事件
根据坐标索引来确定落地的棋子位置
定义一个数组防止一个位置同时落黑白两种棋子并进行存储
AI实现原理：
走对自己获得胜利最有利的点。
堵对对方获得胜利最有利的点。
二、 代码实现
1. Html代码实现：
2. <!DOCTYPE html>
3. <html lang="en">
4. <head>
5. <meta charset="UTF-8">
6. <meta name="Generator" content="EditPlus®">
7. <meta name="Author" content="">
8. <meta name="Keywords" content="">
9. <meta name="Description" content="">
10. <title>play chess</title>
11. <link rel='stylesheet' type='text/css' href='css/chess.css'>
12. <script type='text/javascript' src="js/play.js"></script>
13. </head>
14. <body>
15. <!--canvas在网页上绘制图形，使用js绘制2d图形-->
16. <canvas id='chess' width='450px' height='450px'></canvas>
17. </body>
18. </html>
19.
20.
21. js代码实现：
22. window.onload=function(){
23. //获取canvas元素
24. var chess = document.getElementById('chess');
25. //引用画布对象
26. var context = chess.getContext('2d');
27. //设置图形轮廓的颜色
28. context.strokeStyle = '#BFBFBF';
29. //赢法统计数组
30. var people = [];//人
31. var computer = [];//机器
32. var k = true;
33. var over = false;
34. var arry = [];
35. //防止一个位置同时落黑白两种棋子并进行存储
36. for(var i =0;i<15;i++){
37. arry[i]=[];
38. for(var j =0;j<15;j++){
39. arry[i][j]=0;
40. }
41. }
42. //所有赢法种类
43. var win = [];
44. for(var i =0;i<15;i++){
45. win[i]=[];
46. for(var j =0;j<15;j++){
47. win[i][j]=[];
48. }
49. }
50. //初始化赢法种类
51. var count = 0;
52. //所有横线赢法种类
53. for(var i=0;i<15;i++){
54. for(var j=0;j<11;j++){
55. for(var m=0;m<5;m++){
56. win[i][j+m][count]=true;
57. }
58. count++;
59. }
60. }
61. //所有竖线赢法种类
62. for(var i=0;i<15;i++){
63. for(var j=0;j<11;j++){
64. for(var m=0;m<5;m++){
65. win[j+m][i][count]=true;
66. }
67. count++;
68. }
69. }
70. //所有的斜线赢法种类
71. for(var i=0;i<11;i++){
72. for(var j=0;j<11;j++){
73. for(var m=0;m<5;m++){
74. win[i+m][j+m][count]=true;
75. }
76. count++;
77. }
78. }
79. //所有的反斜线赢法种类
80. for(var i=0;i<11;i++){
81. for(var j=14;j>3;j--){
82. for(var m=0;m<5;m++){
83. win[i+m][j-m][count]=true;
84. }
85. count++;
86. }
87. }
88. console.log(count);
89. for(var i=0;i<count;i++){
90. people[i]=0;
91. computer[i]=0;
92. }
93. //创建image对象
94. var logo = new Image();
95. //定义image对象
96. logo.src = 'images/1.jpg';
97. //图像对象事件(当图片被加载完成后触发)
98. logo.onload = function(){
99. //drawImage(绘制的图像，绘制的图像左上角坐标，宽，高)
100. context.drawImage(logo,0,0,450,450);
101. ch();
102. //step(0,0,true);
103. //step(1,1,false);
104. //step(5,5,true);
105. }
106. var ch = function(){
107. for(i=0;i<15;i++){
108. //画笔移动到指定坐标,路径的起使坐标
109. //context.moveTo(0,0);
110. context.moveTo(15+i*30,15);
111. //绘制一条从当前位置到指定坐标的直线
112. //context.lineTo(450,450);
113. context.lineTo(15+i*30,435);
114. //通过图形绘制图形轮廓
115. context.stroke();//竖线
116. context.moveTo(15,15+i*30);
117. context.lineTo(435,15+i*30);
118. context.stroke();//横线
119. }
120. }
121. //step(0,0,true);
122. var step = function(i,j,k){
123. //开始路径
124. context.beginPath();
125. //arc绘制圆弧(圆心坐标，半径，开始弧度，结束弧度)
126. context.arc(15+i*30,15+j*30,13,0,Math.PI*2);
127. //结束路径
128. context.closePath();
129. //描边
130. //context.stroke();
131. //设置渐变，返回一个渐变对象（前3个为外圆心的圆心及半径，后3个为内圆心的坐标及半径）
132. var become = context.createRadialGradient(15+i*30+2,15+j*30-2,13,15+i*30+2,15+j*30-2,0);
133. if(k){
134. //外圆渐变层的开始结束位置和颜色值
135. become.addColorStop(0,'#0A0A0A');
136. //内圆渐变层的开始结束位置和颜色值
137. become.addColorStop(1,'#636766');
138. }else{
139. become.addColorStop(0,'#D1D1D1');
140. become.addColorStop(1,'#F9F9F9');
141. }
142. //填充颜色
143. context.fillStyle = become;
144. //填充
145. context.fill();
146. }
147. chess.onclick = function(e){
148. debugger;
149. if(over){
150. return;
151. }
152. var x = e.offsetX;
153. var y = e.offsetY;
154. var i = Math.floor(x/30);
155. var j = Math.floor(y/30);
156. if(arry[i][j]==0){
157. // 渲染棋子的方法
158. step(i,j,k);
159. // k 区分黑白棋
160. if(k){
161. arry[i][j]=1;
162. }else{
163. arry[i][j]=2;
164. }
165. k=!k;
166. for(var m=0;m<count;m++){
167. if(win[i][j][m]){
168. people[m]++;
169. computer[m]=6;
170. if(people[m]==5){
171. console.log(m);
172. over=true;
173. alert("赢了")
174.
175. }
176. }
177. console.log(over)
178. }
179. }
180. }
181. }
182.
183.
184. Css代码实现：
185. canvas
186. {
187. display:block;
188. margin:50px auto;
189. box-shadow:-2px -2px 2px #EFEFEF,5px 5px 5px #B9B9B9;
190. }
191.
五、实验结果：
六、实验小结：
掌握HTML5画板