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”
?div标签简介：
行是
式。
不必为每一个
可以对同一个
为某一类元素），而 id 用于标识单独的唯一的元素。
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);
——返回生成的字符串
?书写定时启动，获取当前时间的JavaScript脚本代码
脚本说明：
函数tick()的作用——定时启动，获取当前时间
tick();——调用、激活tick()函数的脚本语句；
tick()函数的函数体说明：
var today;
——定义变量，将来它的值便是当前系统时间
today = new Date();
——获取当前系统时间
document.getElementById("localtime").innerText = showLocale(today);
——调用showLocale()函数生成时间字符串，并将其作为内容加入span标签
1.3.3运行电子时钟.html文档
1.4能力拓展
1.4.1JavaScript函数简介
函数为程序设计人员提供了一个丰常方便的能力。通常在进行一个复杂的程序设计时，