下载后可任意编辑JS 典型网页特效学习情境1 电子时钟1.1任务目标许多网站都在页面上有一个浮动的电子时钟以显示当前时间,提醒上网者注意上网时间。本次任务的目标是要在 web 页面上打造一个电子时钟。下面这张图片就是我们要实现的一个最基本的电子时钟的效果图:1.2设计思路1.2.1 结构规划 (div+css 结构)本次任务的时钟显示部分使用一个 DIV(层)实现,而时钟的显示样式则使用 CSS样式表加以修饰。而电子时钟的效果是通过每隔一秒猎取一次系统时间并刷新 DIV 内容的方式来实现。下载后可任意编辑1.2.2 任务分析 要实现本次任务的特效,我们应掌握以下几个关键知识点的应用:1window.setTimeout()方法的使用;2时间对象的使用;3猎取 web 页面元素和在 web 页面元素中添加内容的方法;1.3任务实施1.3.1 创建一个 html 文档作为本次任务的开发载体1)打开 DreamWeaver,点击文件->新建,在弹出的新建文件对话框中选择 html,点击创建生成一个 html 文档下载后可任意编辑2)点击文件->保存,或直接按快捷键 Ctrl+S 将文档保存为“电子时钟.html”1.3.2 制作电子时钟的显示面板;1)在 body 标签中间添加显示时间的容器——div 标签,并将其 id 属性设为:“showtime”
是一个块级元素。这意味着它的内容自动地开始一个新行。实际上,换行是
固有的唯一格式表现。可以通过
的 class 或 id 应用额外的样式。不必为每一个
都加上类或 id,虽然这样做也有一定的好处。可以对同一个
元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识单独的唯一的元素。下载后可任意编辑2)在 showtime 这个 div 中加入一个 span 标签,并将其 id 属性设为“localtime”,用于放置显示内容
时间:
span 标签简介:
标签被用来组合文档中的行内元素。可以为 span 应用 id 或 class 属性,这样既可以增加适当的语义,又便于对 span 应用样式。可以对同一个 元素应用 class 或 id 属性,但是更常见的情况是只应用其中一种。这两者的主要差异是,class 用于元素组(类似的元素,或者可以理解为某一类元素),而 id 用于标识...1、当您付费下载文档后,您只拥有了使用权限,并不意味着购买了版权,文档只能用于自身使用,不得用于其他商业用途(如 [转卖]进行直接盈利或[编辑后售卖]进行间接盈利)。
2、本站所有内容均由合作方或网友上传,本站不对文档的完整性、权威性及其观点立场正确性做任何保证或承诺!文档内容仅供研究参考,付费前请自行鉴别。
3、如文档内容存在违规,或者侵犯商业秘密、侵犯著作权等,请点击“违规举报”。