首页 >> 实验教学 >> 实验项目 >> 详细内容
实验教学
 
实验项目 >> 正文
网页制作与设计
日期：2021-12-09 18:54:28  发布人：nclgjsj  浏览量：219

实验课程一

 

授课章节

实验一HTML的基本标记

 

实验目的

与要求

1.掌握图像排列操作。

2.学会文字排列。

3.掌握段落排列。

重    点

 

难    点

 

教学方法

讲授＋课堂验证实验

教学手段

上机实践

教学时间

90分钟

教学参考书

 
 

 

 

 

实施步骤：

一、实验讲解（10ˊ）

二、组织实验、课前提问（5ˊ）

三、上机实践（70ˊ）

四、本讲内容总结及布置实验及作业（5ˊ）

讲授内容：

一、实验目的与要求

1.掌握图像排列操作。

2.学会文字排列。

3.掌握段落排列。

二、实验内容

.制作基础网页                                                    

三、实验器材

 微机+windows操作系统+HB

四、实验步骤

分析效果图

在图2-11中既有图像又有文字，并且图像居左文字居右排列，图像和文字之间有一定的距离。同时文字由标题和段落文本组成，它们的字体和字号不同。在段落文本中还有一些文字以特殊的颜色加以突出显示，同时每个段落前都有一定的留白。

通过上面的分析，可以知道在页面中需要使用<img />标记插入图像，同时使用<h2>标记和<p>标记分别设置标题和段落文本。接下来对<img />标记应用align属性和hspace属性实现图像居左文字居右、且图像和文字之间有一定距离的排列效果。为了控制标题和段落文本的样式还需要使用文本样式标记<font>，最后在每个段落前使用空格符“ ”实现留白效果。

制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example03】所示。

【example03】

  • <!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>

8 <img src="images/sheji.jpg" alt="网页设计、平面设计、UI设计"/>

9 <h2>传智播客设计学院-设计师的摇篮</h2>

10 <p>传智播客设计学院成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。</p>

11 <p>传智播客设计学院教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。</p>

12 <p>迄今为止，传智播客设计学院已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。</p>

13 </body>

14 </html>

在【example03】中，使用<img />标记插入图像，同时通过<h2>标记和<p>标记分别定义标题和段落文本。

运行【example03】，效果如图2-29所示。

 

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>。同时通过空格符“ ”可实现段落前的留白效果。

接下来，对文本加以控制，具体代码如下：

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

15  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

16 <html xmlns="http://www.w3.org/1999/xhtml">

17 <head>

18 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

19 <title>传智播客设计学院简介</title>

20 </head>

21 <body>

22 <img src="img/laopo.jpg" alt="我到传智播客设计学院学网页、平面、UI设计去喽" align="left" hspace="30"/>

23 <h2><font face="微软雅黑" size="6" color="#545454">传智播客设计学院</font></h2>

24 <p>

25  <font size="2" color="#515151">

26               <font color="#0e5c9e">传智播客设计学院</font>成立于2010年，专注于平面设计师、网页设计师、UI设计师的培养。我们拥有专业的师资团队，清晰合理的课程架构，4个月的学习循序渐进、充实饱满，从最基础的设计软件Photoshop和Illustrator开始学起，通过基础美术学习透视和光影关系，课程中结合大量的案例和实战项目，4个月的学习相当于两年工作经验。

27     </font>

28 </p>

29 <p>

30  <font size="2" color="#515151">

31               <font color="#0e5c9e">传智播客设计学院</font>教给你的远远不止如何作图，在这里你将学到真正的设计素养和理念，毕业之后，你将成为平面、网页、UI设计都精通的全能设计师。

32     </font>

33 </p>

34 <p>

35  <font size="2" color="#515151">

36               ;迄今为止<font color="#0e5c9e">传智播客设计学院</font>已经培养出了上万名设计师，遍布于各个大中型企业，同时，从传智播客走出去的学员也得到了各个企业的一致认可和好评。

37     </font>

38 </p>

39 </body>

40 </html>

这时，保存【example03】文件，刷新【example03】所在的页面，效果如图2-31所示。

 

控制文本

 

 

教学提示：

【具体事例说明】

【举例引入新课】

【……】

【……】

 

【……】

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自学教材

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

【】

 

 

【引导学生阅读】

课堂小结

 

课堂练习

 

课后作业

 
 

 

 

 

实验课程二

授课章节

实验二： CSS的基础应用

 

实验目的

与要求

1.掌握css的语法。

2.学会文本的大小和颜色的设置。

重    点

掌握css的语法。

难    点

掌握css的语法。

教学方法

讲授＋课堂验证实验

教学手段

上机实践

教学时间

90分钟

教学参考书

 
 

 

 

 

实施步骤：

一、实验讲解（10ˊ）

二、组织实验、课前提问（5ˊ）

三、上机实践（70ˊ）

四、本讲内容总结及布置实验及作业（5ˊ）

讲授内容：

一、实验目的与要求

1.掌握css的语法。

2.学会文本的大小和颜色的设置。

二、实验内容

.构建基础网页                                                    

三、实验器材

 微机+windows操作系统+HB

四、实验步骤

分析效果图

图3-1所示的“文字Logo”由6个英文字母构成，它们的大小相同、颜色不完全相同，且为粗体。为了方便地控制Logo中的6个英文字母，可以使用6个<strong>标记环绕它们。对于文本的大小和颜色则可以使用CSS的font-size和color属性进行设置。

制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example04】所示。

【example04】

41 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

42  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

43 <html xmlns="http://www.w3.org/1999/xhtml">

44 <head>

45 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

46 <title>文字Logo</title>

47 </head>

48 <body>

49 <strong>G</strong>

50 <strong>o</strong>

51 <strong>o</strong>

52 <strong>g</strong>

53 <strong>l</strong>

54 <strong>e</strong>

55 </body>

56 </html>

运行【example04】，效果如图3-10所示。

 

图 3-10 HTML结构页面效果

定义CSS样式

下面使用CSS对图3-10所示的“文字Logo”进行修饰，实现图3-1所示效果。这里使用内嵌式CSS样式，步骤如下：

添加类名

为页面中需要单独控制的标记添加相应的类名，具体代码如下：

<strong class="blue">G</strong>

<strong class="red">o</strong>

<strong id="orange">o</strong>

<strong class="blue">g</strong>

<strong id="green">l</strong>

<strong class="red">e</strong>

控制文本大小

strong{ font-size:100px;}

由于6个英文字母的大小相同，且都是用<strong>标记定义的，所以此处使用标记选择器strong。

控制文本颜色

.blue{ color:#2B75F5;}

.red{ color:#D33E2A;}

#orange{ color:#FFC609;}

#green{ color:#00A45D;}

至此，完成效果图3-11所示的文字Logo。这时，刷新【example04】所在的页面，效果如图3-11所示。

 

教学提示：

【具体事例说明】

【举例引入新课】

【……】

【……】

 

【……】

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自学教材

 

 

 

 

 

 

 

 

 

 

 

 

 

课堂小结

 

课堂练习

 

课后作业

 
 

实验课程三

 

授课章节

实验三：利用div+css布局网页

 

实验目的

与要求

给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。

给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。

重    点

盒子模型

难    点

盒子模型

教学方法

讲授＋课堂验证实验

教学手段

上机实践

教学时间

90分钟

教学参考书

 
 

 

 

 

实施步骤：

一、实验讲解（10ˊ）

二、组织实验、课前提问（5ˊ）

三、上机实践（70ˊ）

四、本讲内容总结及布置实验及作业（5ˊ）

讲授内容：

一、实验目的与要求

给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。

给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。

二、实验内容

.构建基础网页                                                    

三、实验器材

 微机+windows操作系统+HB

四、实验步骤

  • 结构分析

图4-19所示的“咖啡店banner”可以使用内外嵌套的两个盒子(div)来定义，结构如图4-29所示。

结构分析

  • 样式分析

控制效果图4-19的样式主要分为2个部分：

给外面的盒子设置宽度、高度、背景图像等样式。需要注意的是，背景图像需要设置为沿着水平方向平铺。

给里面的盒子设置宽度、高度、背景图像样式。需要注意的是，背景图像需要设置为不平铺，且距离外面盒子的左边和上边都有一定的距离。

  • 制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example09】所示。

【example09】

  • <!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>咖啡店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”效果

 

教学提示：

【具体事例说明】

【举例引入新课】

【……】

【……】

 

【……】

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自学教材

 

 

 

 

 

 

 

 

 

 

 

 

 

 

课堂小结

 

课堂练习

 

课后作业

 
 

 

 

实验课程四

 

授课章节

实验四：CSS样式应用

 

实验目的

与要求

运用背景属性（background）为ul添加大的背景图。

为li添加宽高和边框样式，并设置最后一个li为无边框样式。

重    点

列表的设置

难    点

链接的设置

教学方法

讲授＋课堂验证实验

教学手段

上机实践

教学时间

90分钟

教学参考书

 
 

 

 

 

实施步骤：

一、实验讲解（10ˊ）

二、组织实验、课前提问（5ˊ）

三、上机实践（70ˊ）

四、本讲内容总结及布置实验及作业（5ˊ）

讲授内容：

一、实验目的与要求

运用背景属性（background）为ul添加大的背景图。

为li添加宽高和边框样式，并设置最后一个li为无边框样式。

二、实验内容

        利用列表设置导航条                                         

三、实验器材

 微机+windows操作系统+HB

四、实验步骤

  • 结构分析

图5-1所示的电商“悬浮框”，商品分类清晰，各条商品分类并列存在、且排序不分先后，因此可以通过无序列表<ul>进行定义。效果图5-1对应的结构如图5-3所示。

图 3-11 结构分析

  • 样式分析

实现效果图5-1所示样式的思路如下：

运用背景属性（background）为ul添加大的背景图。

为li添加宽高和边框样式，并设置最后一个li为无边框样式。

  • 制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example11】所示。

 

  • <!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>
  • <link href="example11_css.css" rel="stylesheet" type="text/css" />
  • </head>
  • <body>
  • <ul>
  •         <li>服装鞋帽</li>
  •         <li>数码家电</li>
  •         <li>运动户外</li>
  •         <li>孕婴用品</li>
  •         <li class="no_line">厨卫家居</li>
  •     </ul>
  • </body>
  • </html>

运行【example11】，效果如图5-4所示。

 

图 3-12 HTML结构页面效果图

  • 定义CSS样式

搭建完页面的结构后，接下来使用CSS对页面的样式进行修饰。本小节采用从整体到局部的方式实现图5-1所示的效果，具体如下：

定义基础样式

首先定义页面的统一样式。CSS代码如下：

/*全局控制*/

body{font-size:16px; font-family:"微软雅黑"; color:#222;}

/*重置浏览器的默认样式*/

body,ul,li{ padding:0; margin:0; list-style:none;}

为ul添加背景

ul{

   width:171px;

   height:299px;

   background:url(images/bg.jpg) no-repeat;

   padding-top:190px;

   color:#fff;

}

为li添加宽高和边框样式

li{

   width:80px;

   height:40px;

   text-align:center;

   line-height:40px;

   border-bottom:1px dotted #fff;

   margin-left:45px;

}

.no_line{border:none;}            /*设置类名为.no_line的li无边框样式*/

至此，完成图5-1所示电商悬浮框的CSS样式部分。刷新【example11】所在的页面，效果如图5-5所示。

 

图 3-13 悬浮框CSS样式效果

 

 

教学提示：

【具体事例说明】

【举例引入新课】

【……】

【……】

 

【……】

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自学教材

 

 

 

 

 

 

 

 

 

 

 

 

 

 

课堂小结

 

课堂练习

 

课后作业

 
 
 

实验课程五

 

授课章节

实验五： JS 的基础应用

 

实验目的

与要求

观察效果图8-22不难看出，本案例模拟了一款计算器。其中，前两个文本输入框用于输入操作数，<select>下拉菜单中包含＋、－、×、÷四个运算符，默认为加法运算符。用户输入操作数并选择相应的运算符，然后按下“等号”按钮，这时最后一个文本框中将输出相应的运算结果。

重    点

JS的基础特效

难    点

JS的基础特效

教学方法

讲授＋课堂验证实验

教学手段

上机实践

教学时间

90分钟

教学参考书

 
 

 

 

 

实施步骤：

一、实验讲解（10ˊ）

二、组织实验、课前提问（5ˊ）

三、上机实践（70ˊ）

四、本讲内容总结及布置实验及作业（5ˊ）

讲授内容：

一、实验目的与要求

观察效果图8-22不难看出，本案例模拟了一款计算器。其中，前两个文本输入框用于输入操作数，<select>下拉菜单中包含＋、－、×、÷四个运算符，默认为加法运算符。用户输入操作数并选择相应的运算符，然后按下“等号”按钮，这时最后一个文本框中将输出相应的运算结果。

二、实验内容

        利用JS设置导航条                                         

三、实验器材

 微机+windows操作系统+HB

四、实验步骤

  • 结构分析

观察效果图8-22不难看出，该计算器页面结构清晰，主要由文本框、下拉菜单和按钮组成，具体结构如图8-37所示。

图 3-10 结构分析

  • JavaScript特效分析

观察效果图8-22不难看出，本案例模拟了一款计算器。其中，前两个文本输入框用于输入操作数，<select>下拉菜单中包含＋、－、×、÷四个运算符，默认为加法运算符。用户输入操作数并选择相应的运算符，然后按下“等号”按钮，这时最后一个文本框中将输出相应的运算结果。

  • 制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example25】所示。

【example25】

  • <!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>
  • </head>
  • <body >
  • <form>
  • <input type="text" id="num1" value=""/>
  • <select id="operator">
  • <option value="+" selected="selected">+</option>
  • <option value="-">-</option>
  • <option value="*">*</option>
  • <option value="/">/</option>
  • </select>
  • <input type="text" id="num2" value=""/>
  • <input type="button" value="=" onclick="calculate()"/>
  • <input type="text" id="result" readonly="true"/>
  • </form>
  • </body>
  • </html>

在上面的代码中，定义了id名为num1和num2两个文本输入框，分别用于输入所要计算的数值，并且定义了id名为result的文本框来输出运算结果。另外，<select>下拉菜单中定义了四个运算符，当点击下三角时，四个运算符将依次显示出来，供用户选择相应的运算。

运行【example25】并点击下三角，效果如图8-38所示。

 

图 3-11 结构分析

  • 添加JS效果

下面，采用内嵌式的方法引入JavaScript代码，具体如下：

  • <script type="text/javascript">
  • function calculate(){
  • //获取数据，并将其转化为浮点型数据
  • var num1 = parseFloat(document.getElementById("num1").value);
  • var num2 = parseFloat(document.getElementById("num2").value);
  • var oper = document.getElementById("operator").value;
  • //存放输出结果
  • var res = "";
  • //拼接运算表达式
  • var expression= num1+oper+num2;
  • //判断输入的数据，若不是数据或是为0，都为假；否则为真
  • if(num1 && num2){
  • //执行运算表达式，求出运算结果
  • eval("res="+expression);
  • }else{
  • //判断此运算是否为除法且除数是否为0
  • if((oper == "/") && (num2 ==0)){
  • res = "除数不能为0";
  • }else if(num1 && (num2 ==0) || (num1 ==0) && num2){
  • eval("res="+expression);
  • }else if((num1 ==0) && (num2 ==0)){
  • eval("res="+expression);
  • }else{
  • res = "请输入数字";
  • }
  • }
  • //将运算结果或提示写入到form表单中
  • document.getElementById('result').value = res;
  • }
  • </script>

在上面的代码中，JavaScript脚本按照从上到下的顺序执行，当满足条件时，便输出结果且终止后续代码的执行。其中，第10行代码定义了变量expression用来存放运算表达式，第12~26行代码运用if条件语句判断不同的运算情况。当num1和num2的值都为真时，执行运算表达式并输出结果，否则，继续执行下面的语句。另外，如果选择的运算符是“/”且num2的值为0，则输出“除数不能为0”；如果num1和num2中一个值为真另一个值为0时，执行对应的表达式并输出结果；如果num1和num2的值都为0时，执行对应的表达式并输出结果；当上述条件都不满足时则输出“请输入数字”。

保存代码，刷新页面，即可在如图8-22所示的网页计算器中进行简单的运算。

 

 

教学提示：

【具体事例说明】

【举例引入新课】

【……】

【……】

 

【……】

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自学教材

 

 

 

 

 

 

 

 

 

 

 

 

 

 

课堂小结

 

课堂练习

 

课后作业

 
 

 

 

 

实验课程六

 

授课章节

实验六 JS 的高级应用（事件处理）

 

实验目的

与要求

通过JavaScript实现限时秒杀效果的思路如下：

  • 通过getTime()方法获取当前时间和秒杀结束时间，并计算出剩余的小时、分钟和秒数。
  • 分别判断小时、分钟和秒数并对它们进行处理，继而判断秒杀是否结束。
  • 通过setInterval()设置倒计时，使秒杀时间动态显示。

 

重    点

通过getTime()方法获取当前时间和秒杀结束时间，并计算出剩余的小时、分钟和秒数。

难    点

分别判断小时、分钟和秒数并对它们进行处理，继而判断秒杀是否结束。

教学方法

讲授＋课堂验证实验

教学手段

上机实践

教学时间

90分钟

教学参考书

 
 

 

 

 

实施步骤：

一、实验讲解（10ˊ）

二、组织实验、课前提问（5ˊ）

三、上机实践（70ˊ）

四、本讲内容总结及布置实验及作业（5ˊ）

讲授内容：

一、实验目的与要求

通过JavaScript实现限时秒杀效果的思路如下：

  • 通过getTime()方法获取当前时间和秒杀结束时间，并计算出剩余的小时、分钟和秒数。
  • 分别判断小时、分钟和秒数并对它们进行处理，继而判断秒杀是否结束。
  • 通过setInterval()设置倒计时，使秒杀时间动态显示。

二、实验内容

        利用JS设置限时秒杀                                        

三、实验器材

 微机+windows操作系统+HB

四、实验步骤

  • 结构分析

观察图9-1、图9-2容易看出该“限时秒杀”页面主要由背景图片和秒杀计时两部分组成。其中，背景图片可以通过对外层div添加背景来设置，秒杀计时部分通过三个span标记进行定义。由于秒杀结束后，会有一个提示语，还需要在span标记之后定义一个div（默认隐藏）。效果图9-1、9-2对应的结构如图9-10所示。

图 3-12 “限时秒杀”结构分析

  • 样式分析

实现效果图9-1和9-2所示样式的思路如下：

  • 为外层大div添加样式，需要对其设置宽度、高度、背景图片和相对定位。
  • 为控制时间的span标记添加样式，需要对其设置宽度、高度、相对定位和字体等样式。
  • 为控制秒杀结束的div添加样式，需要对其设置宽度、高度、绝对定位和层叠等级。使其完全覆盖秒杀计时部分。
  • JS效果分析

通过JavaScript实现限时秒杀效果的思路如下：

  • 通过getTime()方法获取当前时间和秒杀结束时间，并计算出剩余的小时、分钟和秒数。
  • 分别判断小时、分钟和秒数并对它们进行处理，继而判断秒杀是否结束。
  • 通过setInterval()设置倒计时，使秒杀时间动态显示。
  • 制作页面结构

根据上面的分析，使用相应的HTML标记来搭建网页结构，如【example26】所示。

【example26】

53 <!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样式

搭建完页面的结构后，接下来使用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-13  CSS样式效果

  • 添加JavaScript效果

页面布局和样式设计完成后，下面通过JavaScript代码实现显示秒杀时间效果，具体代码如下：

  • function fresh()
  • {
  • //设置秒杀结束时间
  • var endtime=new Date("2015/4/24,16:07:10");
  • //获取当前时间
  • var nowtime = new Date();
  • //计算剩余秒杀时间，单位为秒
  • var leftsecond=parseInt((endtime.getTime()-nowtime.getTime())/1000);
  • h=parseInt(leftsecond/3600);//计算剩余小时
  • m=parseInt((leftsecond/60)%60); //计算剩余分钟
  • s=parseInt(leftsecond%60); //计算剩余秒
  • if(h<10) h= "0"+h;
  • if(m<10 && m>=0) m= "0"+m; else if(m<0) m="00";
  • if(s<10 && s>=0) s= "0"+s; else if(s<0) s="00";   
  • document.getElementById("hour").innerHTML=h;
  • document.getElementById("munite").innerHTML=m;
  • document.getElementById("second").innerHTML=s;
  • //判断秒杀是否结束，结束则输出相应提示信息
  • if(leftsecond<=0){
  • document.getElementById("bot-box").style.display="block";
  • document.getElementById("bot-box").style.background="url(images/flash_end.png) no-repeat";
  • document.getElementById("bot-box").innerHTML="秒杀已结束";
  • clearInterval(sh);
  • }
  • }
  • //设计倒计时
  • var sh=setInterval(fresh,1000);

在上面的JavaScript代码中，通过getTime()方法分别获取秒杀结束时间与当前时间的毫秒数，并将其相减转换成秒杀剩余的秒数，其中第9~11行代码计算秒杀剩余的小时、分钟和秒数，然后在第12~17行代码中分别判断小时、分钟和秒并对其分别进行处理，继而判断秒杀是否结束，最后通过setInterval()设置倒计时，使秒杀时间动态显示。

将第4行代码的秒杀结束时间设为一个大于当前的时间，保存并刷新页面，可以得到图9-12所示的效果。

 

图 3-14 JavaScript秒杀计时效果

当图9-12所示的剩余时间自减为0时，页面会自动变为图9-13所示的效果，即秒杀活动结束。

 

图 3-15 JavaScript秒杀结束效果

 

教学提示：

【具体事例说明】

【举例引入新课】

【……】

【……】

 

【……】

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

自学教材

 

 

 

 

 

 

 

 

 

 

 

 

 

 

课堂小结

 

课堂练习

 

课后作业

 
 

 

 

核发：nclgjsj 点击数：219【收藏本页】
返回首页关闭页面