都加上类或id，虽然这样做也有一定的好处。
可以对同一个
元素应用class或id属性，但是更常见的情况是只应用其中一种。
这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。
2）在showtime这个div中加入一个span标签，并将其id属性设为“localtime”，用于放置显示内容
时间:
Øspan标签简介：
标签被用来组合文档中的行内元素。
可以为span应用id或class属性，这样既可以增加适当的语义，又便于对span应用样式。
可以对同一个元素应用class或id属性，但是更常见的情况是只应用其中一种。
这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。
3）在body标签之前加入style标签，书写div和span的样式表
#showtime{
background:
#333;
color:
#FFF;
height:
30px;
line-height:
30px;
font-size:
12px;
text-indent:
30px;
width:
250px;
border:
2px#999solid;
}
#localtime{
margin-left:
10px;
color:
#CCC;
}
样式表（css）对页面元素样式的设置方式有三种：
ØHTML标签（tag）定义：
采用这种样式设置方式的页面中对应标签都会套用样式表定义的样式。
它的语法是：
tag{property:
value}
Ø独立定义：
若某个HTML标签（tag）想套用这种方式定义的样式，必须将其class属性设置为该样式的样式名。
它的语法是：
.Classname{property:
value}
Øid定义：
若某个HTML标签（tag）想套用这种方式定义的样式，必须将其id属性设置为该样式的样式名。
它的语法是：
#IDname{property:
value}
本次任务使用的是id定义
4）书写实现电子时钟效果的JavaScript代码
Ø在body标签中添加脚本标签
说明：
script标签不一定非要在body标签中添加，他摆放的位置比较灵活。
Ø定义生成时间字符串的函数
functionshowLocale（objD）
{
varstr;
varhh=objD.getHours（）;
varmm=objD.getMinutes（）;
varss=objD.getSeconds（）;
vargetweek=objD.getDay（）;
if（getweek==1）week="星期一";
elseif（getweek==2）week="星期二";
elseif（getweek==3）week="星期三";
elseif（getweek==4）week="星期四";
elseif（getweek==5）week="星期五";
elseif（getweek==6）week="星期六";
elseweek="星期日";
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编写的有用的功能的核心。
一般而言，函数可以将一个程序分为若干逻辑块，每个块实现某个特定的功能。
函数是JavaScript程序设计语言最主要的特征，而JavaScript之所以具有这么大的吸引力原因之一就是它特有的使用和创建函数的方式。
在接下来的能力拓展中，我们会详细介绍
函数说明：
功能——将传入的时间对象转换为特定格式的字符串
参数——（objD）时间对象
返回值——由时间对象转换来的字符串
函数体的具体意义：
varstr;
——定义变量，将来该变量的值就是由时间对象转换来的字符串
varhh=objD.getHours（）;
varmm=objD.getMinutes（）;
varss=objD.getSeconds（）;
vargetweek=objD.getDay（）;
——获取时、分、秒和所传入日期是一个星期中的第几天
if（getweek==1）week="星期一";
elseif（getweek==2）week="星期二";
elseif（getweek==3）week="星期三";
elseif（getweek==4）week="星期四";
elseif（getweek==5）week="星期五";
elseif（getweek==6）week="星期六";
elseweek="星期日";
——根据之前得到的日期计算应显示为星期几
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）;
——返回生成的字符串
Date对象是JavaScript中一个重要的内置对象，在下一节我们将着重介绍这个对象。
Ø书写定时启动，获取当前时间的JavaScript脚本代码
……
functiontick（）
{
vartoday;
today=newDate（）;
document.getElementById（"localtime"）.innerText=showLocale（today）;
window.setTimeout（"tick（）",1000）;
}
tick（）;
脚本说明：
函数tick（）的作用——定时启动，获取当前时间
tick（）;——调用、激活tick（）函数的脚本语句；
tick（）函数的函数体说明：
vartoday;
——定义变量，将来它的值便是当前系统时间
today=newDate（）;
——获取当前系统时间
document.getElementById（"localtime"）.innerText=showLocale（today）;
——调用showLocale（）函数生成时间字符串，并将其作为内容加入span标签localtime中
几乎每个HTML标签都有innerText属性，该属性的作用是设置或获取位于对象起始和结束标签内的文本。
window.setTimeout（"tick（）",1000）;
——设置每1000毫秒（1秒=1000毫秒）执行一次tick（）函数
setTimeout（表达式,延时时间）：
在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。
对于该函数的说明，我们会在“滚动公告”任务中与setInterval进行比较分析
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来检查参数的个数。
例：
Functionfunction_Name（exp1,exp2,exp3,exp4）
Number=function_Name.arguments.length;
if（Number>1）
document.wrile（exp2）;
if（Number>2）
document.write（exp3）;
if（Number>3）
document.write（exp4）
1.4.2JavaScript的date对象简介
Date中文为"日期"的意思，Date继承自Object对象，此对象提供操作，显示日期与时间的函数
ØDate对象构造函数
Date对象具有多种构造函数。
newDate（）
newDate（milliseconds）
newDate（datestring）
newDate（year,month）
newDate（year,month,day）
newDate（year,month,day,hours）
newDate（year,month,day,hours,minutes）
newDate（year,month,day,hours,minutes,seconds）
newDate（year,month,day,hours,minutes,seconds,microseconds）
ØDate对象构造函数参数说明
⏹milliseconds-距离JavaScript内部定义的起始时间1970年1月1日的毫秒数
⏹datestring-字符串代表的日期与时间。
此字符串可以使用Date.parse（）转换
⏹year-四位数的年份，如果取值为0-99，则在其之上加上1900
⏹month-0（代表一月）-11（代表十二月）之间的月份
⏹day-1-31之间的日期
⏹hours-0（代表午夜）-23之间的小时数
⏹minutes-0-59之间的分钟数
⏹seconds-0-59之间的秒数
⏹microseconds-0-999之间的毫秒数
ØDate对象返回值
⏹如果没有任何参数，将返回当前日期
⏹如果参数为一个数字，将数字视为毫秒值，转换为日期
⏹如果参数为一个字符串，将字符串视为日期的字符串表示，转换为日期
⏹还可以使用六个构造函数精确定义，并返回时间
Ø示例
vard1=newDate（）;
document.write（d1.toString（））;
vard2=newDate（"2009-08-0812:
12:
12）;
document.write（d2.toString（））;
vard3=newDate（2009,8,8）;
document.write（d3.toString（））;
⏹Date做为JavaScript的一种内置对象，必须使用new的方式创建。
⏹Date对象在JavaScript内部的表示方式是，距1970年1月1日午夜（GMT时间）的毫秒数（时间戳），我们在这里也把Date的内部表示形式称为时间戳。
可以使用getTime（）将Date对象转换为Date的时间戳，方法setTime（）可以把Date的时间戳转换为Date的标准形式。
ØDate函数使用语法
date.方法名（参数1,参数2,...）;
Date.方法名（）;
⏹date代表一个日期对象的实例，Date代表日期对象，date.方法名调用的为对象的成员函数
⏹Date.方法名调用的为对象的静态函数
Ø示例
vard=newDate（）;
vard2=Date.UTC（）;
1.5任务总结
本次任务我们使用JavaScript制作了一个基本的电子时钟特效。
在制作该特效的过程中我们了解了DIV、SPAN这两个HTML标签，HTML套用CSS样式表样式的方法和JavaScript的函数的意义以及JavaScript中的date对象。
我们将今天的知识点归纳如下：
ØDIV和SPAN都是HTML中的块级元素，我们经常使用DIV或者SPAN进行web页面的排版，让内容分块显示。
Ø样式表（css）对页面元素样式的设置方式有三种：
HTML标签（tag）定义、独立定义和id定义。
ØJavaScript中，函数是几乎所有JavaScript编写的有用的功能的核心。
它除了和普通编程语言（如c）的函数有相同目的（减少编码量，一处定义，随处调用）之外，还可以避免页面载入时执行某些不希望页面载入时就执行的脚本
Ødate对象是JavaScript中用于存储、处理和操作日期的内置对象
Ø特别提醒：
setTimeout（表达式,延时时间）：
在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。
1.6附录
1.6.1css常用属性大全
属性名
属性说明
属性值
FONT-FAMILY
使用什么字体
字体集
FONT-STYLE
字体是否斜体
normal、italic、oblique
FONT-VARIANT
是否用小体大写
normal、small-caps
FONT-WEIGHT
字体的粗细
normal、bold、bolder、lithter等
FONT-SIZE
字体的大小
absolute-size、relative-size、length、percentage等
COLOR
定义前景色
#RGB颜色的十六进制值
BACKGROUND-COLOR
定义背景色
#RGB颜色的十六进制值
BACKGROUND-IMAGE
定义背景图案
图片路径
BACKGROUND-REPEAT
重复方式
tepeat-x、repeat-y、no-repeat
BACKGROUND-ATTACHMENT
设置滚动
dcroll、fixed
BACKGROUND-POSITION
初始位置
percentage、length、top、left、right、bottom等
WORD-SPACING
单词之间的间距
normal
LETTER-SPACING
字母之间的间距
normal
TEXT-DECORATION
文字的装饰样式
none,underline,overline,line-through|blink
VERTICAL-ALIGN
垂直方向的位置
baseline,sub,super,top,text-top,middle,bottom,text-bottom,capitalize,uppercase
TEXT-TRANSFORM
文本转换
lowercase,none
TEXT-ALIGN
对齐方式
left,right,center,justify
TEXT-INDENT
首行的缩进方式
LINE-HEIGHT
文本的行高
normal
MARGIN-TOP
顶端边距
length,percentage,auto
MARGIN-BOTTOM
右侧边距
length,percentage,auto
MARGIN-LEFT
底端边距
length,percentage,auto
MARGIN-RIGHT
左侧边距
length,percentage,auto
PADDING-TOP
顶端填充距离
length,percentage
PADDING-BOTTOM
右侧填充距离
length,percentage
PADDING-LEFT
底端填充距离
length,percentage
PADDING-RIGHT
左侧填充距离
length,percentage
BORDER-TOP-WIDTH
顶端边框宽度
thin,medium,thick,length
BORDER-BOTTOM-WIDTH
底端边框宽度
thin,medium,thick,length
BORDER-LEFT-WIDTH
左端边框宽度
thin,medium,thick,length
BORDER-RIGHT-WIDTH
右端边框宽度
thin,medium,thick,length
BORDER-TOP
定义顶端
border-top-width,color等
BORDER-BOTTOM
定义底端
border-top-width,color等
BORDER-LEFT
定义左端
border-top-width,color等
BORDER-RIGHT
定义右端
border-top-width,color等
BORDER-STYLE
设置边框样式
none,dotted,dash,solid等
BORDER-COLOR
设置边框颜色
color
HEIGHT
定义高度属性
length,percentage,auto
WIDTH
定义宽度属性
length,percentage,auto
FLOAT
文字环绕
left,right,none
CLEAR
那一边环绕
left,right,none,both
BORDER-WIDTH
定义宽度
thin,medium,thick,length
DISPLAY
定义是否显示
block,inline,list-item,none
WHITE-SPACING
怎样处理空白
normal,pre,nowrap
LIST-STYLE-TYPE
加项目编号
disc,circle,square等
LIST-STYLE-IMAGE
加图案
none
LIST-STYLE-POSITION
第二行起始位置
inside,outside
LIST-STYLE
一次性定义列表属性
cursor
自动
auto
“十”字
crosshair
默认指针
default
手形
hand
移动
move
箭头朝右方
e-resize
箭头朝右上方
ne-resize
箭头朝左上方
nw-resize
箭头朝上方
n-resize
箭头朝右下方
se-resize
箭头朝左下方
sw-resize
箭头朝下方
s-resize
箭头朝左方
w-resize
文本“I”形
text
等待
wait
帮助
help