JS典型网页特效.docx

可以对同一个

Øspan标签简介：

标签被用来组合文档中的行内元素。

可以为span应用id或class属性，这样既可以增加适当的语义，又便于对span应用样式。

可以对同一个元素应用class或id属性，但是更常见的情况是只应用其中一种。

这两者的主要差异是，class用于元素组（类似的元素，或者可以理解为某一类元素），而id用于标识单独的唯一的元素。

在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定义

书写实现电子时钟效果的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进行比较分析

运行电子时钟.html文档

能力拓展

1.1.2JavaScript函数简介

函数为程序设计人员提供了一个丰常方便的能力。

通常在进行一个复杂的程序设计时，总是根据所要完成的功能，将程序划分为一些相对独立的部分，每部分编写一个函数。

从而，使各部分充分独立，任务单一，程序清晰，易懂、易读、易维护。

JavaScript函数可以封装那些在程序中可能要多次用到的模块。

并可作为事件驱动的结果而调用的程序。

从而实现一个函数把它与事件驱动相关联。

这是与其它语言不样的地方。

JavaScript函数的意义

Ø将脚本编写为函数，就可以避免页面载入时执行该脚本。

Ø函数包含着一些代码，这些代码只能被事件激活，或者在函数被调用时才会执行。

Ø你可以在页面中的任何位置调用脚本（如果函数嵌入一个外部的.js文件，那么甚至可以从其他的页面中调用）。

创建函数的语法

Function函数名（参数,变元）{

函数体;

Return表达式;

}

Ø说明

⏹当调用函数时,所用变量或字面量均可作为变元传递。

⏹函数由关键字Function定义。

⏹函数名：

定义自己函数的名字。

⏹参数表，是传递给函数使用或操作的值，其值可以是常量，变量或其它表达式。

⏹通过指定函数名（实参）来调用一个函数。

⏹必须使用Return将值返回。

⏹函数名对大小写是敏感的。

函数中的形式参数

在函数的定义中，我们看到函数名后有参数表，这些参数变量可能是一个或几个。

那么怎样才能确定参数变量的个数呢？

在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）;

...

JavaScript的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（）;

任务总结

本次任务我们使用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（表达式,延时时间）：

在执行时，是在载入后延迟指定时间后，去执行一次表达式，仅执行一次。

附录

css常用属性大全

属性名

 属性说明

 属性值

 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

date对象的方法列表

方法

描述

Date（）

返回当日的日期和时间。

getDate（）

从Date对象返回一个月中的某一天（1~31）。

getDay（）