JS典型网页特效

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”

2)在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用

于放置显示内容

时间:

3)在body标签之前加入style标签，书写div和span的样式表

4)书写实现电子时钟效果的JavaScript代码

在body标签中添加脚本标签

说明：script标签不一定非要在body标签中添加，他摆放的位置比较灵活。

定义生成时间字符串的函数

函数说明：

功能——将传入的时间对象转换为特定格式的字符串

参数——（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(getweek==3) week="星期三";

else if(getweek==4) week="星期四";

else if(getweek==5) week="星期五";

else if(getweek==6) week="星期六";

else week="星期日";

——根据之前得到的日期计算应显示为星期几

str =(objD.getYear()) +"年";

str+=(objD.getMonth() + 1) + "月" + objD.getDate() +"日";

——生成日期字符串

str+=week;

——加入星期字符串

if(hh<10) hh = '0' + hh;

if(mm<10) mm = '0' + mm;

if(ss<10) ss = '0' + ss;

——将时间字符串进行格式化，保证时、分、秒都由两位字符显示str += " " + hh + ":" + mm + ":" + ss;

——加入完成格式化的时、分、秒

return(str);

——返回生成的字符串