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="showtime"></div>➢div标签简介：<div> 是一个块级元素。
这意味着它的内容自动地开始一个新行。
实际上，换行是 <div> 固有的唯一格式表现。
可以通过 <div> 的 class 或 id 应用额外的样式。
不必为每一个 <div> 都加上类或 id，虽然这样做也有一定的好处。
可以对同一个 <div> 元素应用 class 或 id 属性，但是更常见的情况是只应用其中一种。
这两者的主要差异是，class 用于元素组（类似的元素，或者可以理解为某一类元素），而 id 用于标识单独的唯一的元素。
2)在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用于放置显示内容<div id="showtime">时间:<span id="localtime"></span>3)在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>4)书写实现电子时钟效果的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(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);}</script>函数说明：功能——将传入的时间对象转换为特定格式的字符串参数——（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脚本代码<script language="javascript">……function tick(){var today;today = new Date();document.getElementById("localtime").innerText = showLocale(today);window.setTimeout("tick()", 1000);}tick();</script>脚本说明：函数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函数简介函数为程序设计人员提供了一个丰常方便的能力。
通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。
从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。
JavaScript函数可以封装那些在程序中可能要多次用到的模块。
并可作为事件驱动的结果而调用的程序。
从而实现一个函数把它与事件驱动相关联。
这是与其它语言不样的地方。
1.4.1.1JavaScript函数的意义➢将脚本编写为函数，就可以避免页面载入时执行该脚本。
➢函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。
➢你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js 文件，那么甚至可以从其他的页面中调用）。
1.4.1.2创建函数的语法Function 函数名（参数,变元）{函数体;Return 表达式;}➢说明⏹当调用函数时,所用变量或字面量均可作为变元传递。
⏹函数由关键字Function定义。
⏹函数名：定义自己函数的名字。
⏹参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。
⏹通过指定函数名（实参）来调用一个函数。
⏹必须使用Return将值返回。
⏹函数名对大小写是敏感的。
1.4.1.3函数中的形式参数在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。
那么怎样才能确定参数变量的个数呢？在JavaScript中可通过arguments .Length来检查参数的个数。
1.4.2JavaScript的date对象简介Date中文为"日期"的意思，Date继承自Object对象，此对象提供操作，显示日期与时间的函数➢Date对象构造函数Date对象具有多种构造函数。