JS典型网页特效VIP专享

下载后可任意编辑JS 典型网页特效学习情境1 电子时钟1

1任务目标许多网站都在页面上有一个浮动的电子时钟以显示当前时间，提醒上网者注意上网时间

本次任务的目标是要在 web 页面上打造一个电子时钟

下面这张图片就是我们要实现的一个最基本的电子时钟的效果图：1

2设计思路1

1 结构规划 （div＋css 结构）本次任务的时钟显示部分使用一个 DIV（层）实现，而时钟的显示样式则使用 CSS样式表加以修饰

而电子时钟的效果是通过每隔一秒猎取一次系统时间并刷新 DIV 内容的方式来实现

下载后可任意编辑1

2 任务分析 要实现本次任务的特效，我们应掌握以下几个关键知识点的应用：1window

setTimeout()方法的使用；2时间对象的使用；3猎取 web 页面元素和在 web 页面元素中添加内容的方法；1

3任务实施1

1 创建一个 html 文档作为本次任务的开发载体1)打开 DreamWeaver，点击文件->新建，在弹出的新建文件对话框中选择 html，点击创建生成一个 html 文档下载后可任意编辑2)点击文件->保存，或直接按快捷键 Ctrl+S 将文档保存为“电子时钟

html”1

2 制作电子时钟的显示面板；1)在 body 标签中间添加显示时间的容器——div 标签，并将其 id 属性设为：“showtime”div 标签简介： 是一个块级元素

这意味着它的内容自动地开始一个新行

实际上，换行是 固有的唯一格式表现

可以通过 的 class 或 id 应用额外的样式

不必为每一个 都加上类或 id，虽然这样做也有一定的好处

可以对同一个 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种

这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素