JS典型网页特效doc.docVIP

JS典型网页特效 电子时钟 任务目标 许多网站都在页面上有一个浮动的电子时钟以显示当前时间，提醒上网者注意上网时间。本次任务的目标是要在web页面上打造一个电子时钟。下面这张图片就是我们要实现的一个最基本的电子时钟的效果图： 设计思路 结构规划 （div＋css结构） 本次任务的时钟显示部分使用一个DIV（层）实现，而时钟的显示样式则使用CSS样式表加以修饰。而电子时钟的效果是通过每隔一秒获取一次系统时间并刷新DIV内容的方式来实现。 任务分析 要实现本次任务的特效，我们应掌握以下几个关键知识点的应用： window.setTimeout()方法的使用； 时间对象的使用； 获取web页面元素和在web页面元素中添加内容的方法； 任务实施 创建一个html文档作为本次任务的开发载体 打开DreamWeaver，点击文件-新建，在弹出的新建文件对话框中选择html，点击创建生成一个html文档 点击文件-保存，或直接按快捷键Ctrl+S将文档保存为“电子时钟.html” 制作电子时钟的显示面板； 在body标签中间添加显示时间的容器——div标签，并将其id属性设为：“showtime” div id=showtime /div div标签简介： div 是一个块级元素。这意味着它的内容自动地开始一个新行。实际上，换行是 div 固有的唯一格式表现。可以通过 div 的 class 或 id 应用额外的样式。 不必为每一个 div 都加上类或 id，虽然这样做也有一定的好处。 可以对同一个 div 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。 在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用于放置显示内容 div id=showtime 时间:span id=localtime/span /div span标签简介： span 标签被用来组合文档中的行内元素。 可以为 span 应用 id 或 class 属性，这样既可以增加适当的语义，又便于对 span 应用样式。 可以对同一个 span 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。 在body标签之前加入style标签，书写div和span的样式表 style type=text/css #showtime{ background:#333; color:#FFF; height:30px; line-height:30px; font-size:12px; text-indent:30px; width:250px; border:2px #999 solid; } #localtime{ margin-left:10px; color:#CCC; } /style 样式表（css）对页面元素样式的设置方式有三种： HTML标签（tag）定义：采用这种样式设置方式的页面中对应标签都会套用样式表定义的样式。 它的语法是： tag {property:value} 独立定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其class属性设置为该样式的样式名。它的语法是： .Classname {property:value} id定义：若某个HTML标签（tag）想套用这种方式定义的样式，必须将其id属性设置为该样式的样式名。它的语法是： #IDname {property:value} 本次任务使用的是id定义 书写实现电子时钟效果的JavaScript代码 在body标签中添加脚本标签 script language=javascript /script 说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。 定义生成时间字符串的函数 script language=javascript function showLocale(objD) { var str; var hh = objD.getHours(); var mm = objD.getMinutes(); var ss = objD.getSeconds(); var getweek=objD.getDay(); if(getweek==1) week=星期一; else if(getweek==2) week=星期二; else if(getw