JavaScript与动态交互网页的制作

Slides:

Advertisements

Similar presentations

因数与倍数 2 、 5 的倍数的特征

Advertisements

7.1 内置对象概述及分类 JSP 视频教学课程. JSP2.2 目录 1. 内置对象简介 1. 内置对象简介 2. 内置对象分类 2. 内置对象分类 3. 内置对象按功能区分 3. 内置对象按功能区分 4. 内置对象作用范围 4. 内置对象作用范围.

1 HTML 语言与网页设计 —— DHTML 技术 2 学习目标理解客户端脚本的作用，掌握在网页中使用客户端脚本的方法。理解 JavaScript 语言的基本语法。理解 JavaScript 对象和浏览器对象在脚本编程中的作用。理解 DHTML 的原理，能够在网页中应用 DHTML.

JavaScript脚本语言两个简单的方法 alert(strvar); document.write(strvar);

Tool Command Language --11级ACM班金天行.

JavaScript中常用的互動方式認識簡單的交談與基本的運算.

第12讲 Javascript 复习信息学院孙辉.

P303 HTML/DHTML/CSS/JavaScript 專業HTML網頁設計陳錦輝.

第一讲 JavaScript编程基础信息学院周宝刚.

第4章 JavaScript脚本语言基础 4.1 JavaScript简介 4.2 JavaScript语法基础

JavaScript 语言基础.

第3章 JavaScript语言基础.

《网页设计与制作》教学课件主讲人：湖南铁道职业技术学院陈承欢

14 JavaScript语言基础 JavaScript是一种轻量级、解释型的Web开发语言。所谓轻量级，就是语言的体系结构不是很庞杂，例如，没有C、Java等语言中的类、内存管理、系统管理等高深的知识范畴；所谓解释型，就是语言在浏览器或服务器等环境中直接被解释执行，不需要对源代码进行编译操作。

第6章脚本编程讲述脚本的概念、JavaScript的基本语法、在页面上创建JavaScript的方法，重点介绍了JavaScript内置对象和浏览器对象在Web页上的应用.

Oracle数据库 Oracle 子程序.

C++中的声音处理在传统Turbo C环境中，如果想用C语言控制电脑发声，可以用Sound函数。在VC6.6环境中如果想控制电脑发声则采用Beep函数。原型为： Beep(频率,持续时间) , 单位毫秒暂停程序执行使用Sleep函数 Sleep(持续时间), 单位毫秒引用这两个函数时，必须包含头文件

在PHP和MYSQL中实现完美的中文显示

第九章字符串.

EBNF与操作语义请用扩展的 BNF 描述 javascript语言里语句的结构；并用操作语义的方法描述对应的语义规则

EBNF 请用扩展的 BNF 描述 C语言里语句的结构；请用扩展的 BNF 描述 C++语言里类声明的结构；

JavaScript 语言3 学习网站：心蕊设计

本單元介紹何謂變數，及說明變數的宣告方式。

第八章菜单设计 §8.1 Visual FoxPro 系统菜单 §8.2 为自己的程序添加菜单 §8.3 创建快捷菜单.

走进编程程序的顺序结构（二）.

辅导课程六.

第一单元初识C程序与C程序开发平台搭建 ---观其大略

1.2 MATLAB变量表达式与数据格式 MATLAB变量与表达式 MATLAB的数据显示格式

第二章 Java语言基础.

网站设计与建设 Website design and developments

用event class 从input的root文件中，由DmpDataBuffer::ReadObject读取数据的问题

宁波市高校慕课联盟课程与进行交互 Linux 系统管理.

SOA – Experiment 2: Query Classification Web Service

JavaScript培训

第4章 PHP流程控制语句.

C++语言程序设计 C++语言程序设计第七章类与对象第十一组 C++语言程序设计.

1.3 C语言的语句和关键字一、C语言的语句与其它高级语言一样，Ｃ语言也是利用函数体中的可执行语句，向计算机系统发出操作命令。按照语句功能或构成的不同，可将Ｃ语言的语句分为五类。 goto, return.

C语言程序设计主讲教师：陆幼利.

简单介绍用C++实现简单的模板数据结构 ArrayList(数组, 类似std::vector)

JavaScript Sunxiaoshen.

计算机网络与网页制作 Chapter 07：Dreamweaver CS5入门

C语言程序设计第一章数据类型, 运算符与表达式第二章顺序程序设计第三章选择结构程序设计第四章循环控制第五章数组.

项目二：HTML语言基础.

成绩是怎么算出来的？ 16级第一学期半期考试成绩班级姓名语文数学英语政治历史地理物理化学生物总分 1 张三1 115

第3章 JavaScript基本语句.

第4章 Excel电子表格制作软件 4.4 函数（一）.

第九节赋值运算符和赋值表达式.

iSIGHT 基本培训使用 Excel的栅栏问题

3.16 枚举算法及其程序实现 ——数组的作用.

多层循环 Private Sub Command1_Click() Dim i As Integer, j As Integer

ASP.NET实用教程清华大学出版社第4章 C#编程语言教学目标教学重点教学过程 2019年5月5日.

2.6 字符型数据一、字符常量 1、字符常量的定义用一对单引号括起来的单个字符，称为字符常量。例如，‘A’、‘１’、‘＋’等。

第二章 Java基本语法讲师：复凡.

本节内容 C语言的汇编表示视频提供：昆山爱达人信息技术有限公司官网地址：联系QQ: QQ交流群：联系电话：

第二章 Java基本语法讲师：复凡.

第二节函数的极限一、函数极限的定义二、函数极限的性质三、小结思考题.

Python 环境搭建基于Anaconda和VSCode.

复习标签（label）、文本框(text)控件按钮：点击事件

基于列存储的RDF数据管理朱敏

C++语言程序设计 C++语言程序设计第一章 C++语言概述第十一组 C++语言程序设计.

本节内容动态链接库视频提供：昆山爱达人信息技术有限公司官网地址：联系QQ： QQ交流群：联系电话：

数据表示第 2 讲.

第8章创建与使用图块将一个或多个单一的实体对象整合为一个对象，这个对象就是图块。图块中的各实体可以具有各自的图层、线性、颜色等特征。在应用时，图块作为一个独立的、完整的对象进行操作，可以根据需要按一定比例和角度将图块插入到需要的位置。 2019/6/30.

鸡兔同笼(续) ——选择结构.

创建、启动和关闭Activity 本讲大纲： 1、创建Activity 2、配置Activity 3、启动和关闭Activity

数的简单处理 ——顺序结构、变量、数据类型、运算符

使用Fragment 本讲大纲： 1、创建Fragment 2、在Activity中添加Fragment

任课教师:戴开宇 TA:时均帅、谭肖、王安华程序设计B班 :20-16:50(90分钟)

顺序结构程序设计 ——关于“字符串”和数值.

第二章简单数据类型 §2.1 数据类型概述 §2.2 变量和常量 §2.3 简单数据类型 §2.4 简单数据类型的相互转换

Presentation transcript:

JavaScript与动态交互网页的制作第7章 JavaScript与动态交互网页的制作

本章内容第1节 JavaScript概述第2节 JavaScript基础第3节 JavaScript实例制作

第1节 JavaScript概述 1.1 JavaScript历史 1.2 JavaScript的特点 1.3 JavaScript与HTML

第1节 JavaScript概述一、JavaScript历史 JavaScript作为一种简单的脚本语言，其前身是LiveScript，是NetScape公司开发的一种语言。随着Sun公司开发出具有跨平台等许多优越特性的Java语言，NetScape公司将Java语言的部分特性融合进来，将LiveScript发展成现在的JavaScript。所以JavaScript和Java是两家不同的公司提出的不同的编程语言，只是在某些特性上有共同之处。

第1节　JavaScript概述二、JavaScript的特点是一种脚本编写语言基于对象的语言简单性安全性动态性跨平台性

第1节 JavaScript概述三、 JavaScript与HTML 1、在HTML中加入JavaScript <script language="JavaScript"> <!— ……JavaScript 脚本 //—> </script> 注意：用户编写的JavaScript脚本加在中间，<!— ……—>是为了把脚本对那些不支持元素SCRIPT的浏览器屏蔽掉，否则会把脚本当作文档的一部分显示在浏览器上。另外JavaScript也可以以一个外部文件的形式出现，这个文件的扩展名为“.js”。在使用时，需要通过设定SCRIPT元素的src属性来进行引用。 <script src=“script.js” language=“JavaScript”></script>

第1节 JavaScript概述 2、JavaScript的注释 JavaScript的注释是C++风格的，即有两种注释方法。一种是单行注释，即在注释文字前加上“//”，这一行中在“//”后的文字都算作注释，浏览器将忽略，不对其进行解释。另一种注释是成段注释，方法为：在注释文字的前后两端分别加上“/*”和“*/”，在这中间的文字将被浏览器忽略，不进行解释执行。 3、JavaScript脚本的语句语句：就是在脚本中完整地完成一个动作的指令，可以是一个表达式、变量声明、赋值表达式、控制语句等。注意： JavaScript的一个语句可以用“；”标志结束，也可以没有任何标记，但必须自成一行。当把多句语句安排在一行时，这多个语句之间必须用“；”隔开，否则会出现语法错误。 4、 JavaScript的排错 JavaScript没有专门的排错工具，只能依靠浏览器，如果发现错误，就会弹出相应的对话框提示它认为的错误原因。

第2节 JavaScript基础 2.1 JavaScript的变量 2.2 JavaScript的常量 2.3 JavaScript的运算 2.5 函数 2.6 对象与属性方法

第2节 JavaScript基础一、JavaScript的变量 1、变量名所谓变量(variable)就是在程序运行期间其值可以改变的量，在JavaScript中一个变量由一个该文档中独一无二的字符串或字符来代表。变量的命名规则为：变量名只能由字母、数字和下划线3种字符组成，且第一个字符必须是英文字母或下划线。变量名中不能出现空格。变量名不能和JavaScript的“保留”字重名。如class、new、throw等。在引用变量名时要区分大小写。例如：NUM、Num、num是三个不同的变量。

第2节　JavaScript基础 2、变量赋值将一个数据存放在一个变量中，这个过程称为“赋值”，在JavaScript中赋值用等号“=”来实现。例如：number=100，str=”you clicked button”等 3、变量声明在JavaScript中主要使用保留字var来声明变量，通常的声明方法为： var 变量名; 也可以在声明变量时给变量赋初值，如： var number=100 var string=” you clicked button”

第2节 JavaScript基础 4、变量类型（1）字符型用单撇号栝起来的一个字符称为字符型常量。如’a’、’B’、’8’、’#’等都是合法的字符常量，在内存中占一个字节。另外一些特殊字符要特殊表示。如反斜杠“\”表示为“\\”；单引号“’”表示为“\’”；双引号“””表示为“\””；换行表示为“\n”等。将一个字符常量赋予一个变量中，实际上是将该字符的ASCII码值存储到内存单元中。例如ch=’A’ ，s=’c’等。（2）整型整型常量就是整型数据，例如200、-125等。在赋值时直接引用即可，例如a=251、num=-121等。

第2节　JavaScript基础（3）浮点型浮点型就是实数型，例如22.15、3.1415926等。另外也可以用科学计数法表示，例如5.25e5或5.25E5表示5.25×105。（4）布尔型布尔型就是逻辑值型，它只有两个取值：true和false(表示真和假)。例如isChange=false表示isChange的逻辑值为假。（5）字符串型例如：“My computer”、“欢迎使用”等，把一个字符串赋予一个变量时要用双引号把字符串括起来。例如：var str=”welcome”。 JavaScript专门有一个对象String来处理字符串的运算。

第2节 JavaScript基础二、JavaScript的常量 JavaScript中预定了一些常数或文字，用于特殊用途： 1、NaN 该值用于函数返回特殊值，表示表达式不是数字(Not a Number)。例如下面的语句就在页面上显示一个“NaN”。 var str=”abc” document.write(parseInt(str)); 其中，方法parseInt(str)功能为把一个用字符串形式表示的数字转化为数字，变量str为”abc”不是数字，因此返回一个“NaN”。 2、null null代表一个变量中没有有效的数据。可以对一个变量显式地复制为null。

第2节 JavaScript基础 3、true，false 4、Infinity 该常量用来代表无穷大，例如：document.write(62/0) 在网页上显示Infinity。 5、undefined 该变量是在一个变量被创建之后和被赋值之前分配给该变量的一个特殊值。例如： var num document.write(num) 在网页上将显示undefined。

第2节 JavaScript基础 6. MAX_VALUE 代表JavaScript所能表达的最大值。约等于1.79E+308。 7. MIN_VALUE 代表JavaScript所能表达的最接近零的数。约等于2.22E-308。 8. NEGATIVE_INFINITY 代表比在JavaScript中能够表示的最小的负数更小的值(即负无穷小)。 9. POSITIVE_INFINITY 代表比在JavaScript中能够表示的最大正数更大的值(即正无穷大)。

第2节 JavaScript基础三、JavaScript的运算 JavaScript中的运算符很丰富，可分为以下几类：算术运算符：+(加法)、- (减法/取负)、* (乘法)、/ (除法)、% (求余数)、++ (递增)、-- (递减)；逻辑运算符：== (相等)、!= (不相等)、<(小于)、>(大于)、<=(小于等于)、>=(大于等于)、&&(逻辑与)、||(逻辑或)、！(逻辑非)；位运算符：&(位与)、|(位或)、~(位非)、^(异或)、<<(位左移)、>>(位右移)、>>>(无符号右移)；条件运算符：?: (三目运算)；逗号运算符：，(逗号运算)；特殊运算符：delete、typeof、void；

第2节 JavaScript基础四、JavaScript的控制语句 JavaScript中也有两种控制语句：条件控制语句和循环控制语句。 1、条件控制 If语句的基本格式： if (condition) then statement1 [ else statement2 ]

第2节 JavaScript基础例如：一个根据不同时间显示不同问候语的程序。显示结果： <html> <body> <script language="JavaScript" >  </script> </body> </html> 显示结果：

第2节 JavaScript基础 2、循环控制循环控制有四种形式，分别为：for循环、for…in、while和do…while。 for循环的形式为： for(initialization ; test ; increment) statement 例如：for循环，求0到10的和。 <html> <body> <script language="JavaScript" >  </script> </body> </html>

第2节 JavaScript基础（2）for…in循环这种循环对应于一个对象的每个属性，或一个数组的每个元素，执行一个或多个语句。格式为： for(variable in [object | array]) statement 其中variable是一个变量，它可以是object的任一属性或array的任一元素；object、array为要在其上遍历的对象或数组；statement是相对于object的每个属性或array的每个元素，都要被执行的语句，可以是复合语句。

第2节 JavaScript基础（3）while循环这种循环先判定指定的条件是否为true，如果expression的Boolean值为true，则执行一个语句，直到expression的Boolean值为false时结束。格式为： while(expression) statement 例如：while循环 var i=0 while(i<3) { document.write(“This is ” + i + “line.<br>”) i++ } 这段代码在浏览器窗口中执行的结果为： This is 1 line. This is 2 line. This is 3 line.

第2节 JavaScript基础（4）do…while循环这种循环和while循环基本一样，但是它先执行一次statement语句，然后才判定指定的条件是否为true，如果expression的Boolean值为true，则继续执行下一个循环语句，直到expression的Boolean值为false时结束。格式为： do{ statement } while(expression) 例如：这个例子和前一个相比稍有变化。 var i=0 do { document.write(“This is ” + i + “line.<br>”) i++ } while(i<3) 其执行结果与上例一样。

第2节 JavaScript基础例如：break语句 3、break语句与continue语句 <html> <body> <script language="JavaScript" >  </script> </body> </html>

第2节　JavaScript基础这段代码实现了在小于100的整数中找出所有的质数，并在浏览器窗口中显示出来，显示结果：

第2节 JavaScript基础例如：continue语句 var s= " ",i=0; while(i<10) { i++; if(i==5) continue; } s+=i; document.write(s) 这段代码中当i=5时跳过下面的语句，重复执行下一轮循环。因此，结果s应为40而不是45。

第2节 JavaScript基础五、函数 1、函数声明 JavaScript中的函数使用关键字function来声明一个函数，其格式为： function functionname([argument1 [,argument2 [,…argumentn]]]) { statements } 其中，functionname为函数名，在文档中是独一无二的，且取函数名时必须符合变量命名规则；argument1…argumentn是可选的、函数的参数列表，各个参数之间用逗号分开；statements为一个或多个JavaScript语句组成的函数体，通过它们来实现函数的功能。注意：使用function语句声明的函数，必须被调用才能执行。

第2节 JavaScript基础例如：function </html> <html> <head> <script language="JavaScript" >  </script> </head> <body> <input name="button" type="button" value="单击这个按钮" onclick="f1()"> </body> </html>

第2节　JavaScript基础这段代码中，定义了一个函数f1()。用鼠标单击“单击这个按钮”，就会调用f1()函数，弹出一个对话框。

第2节 JavaScript基础 2、全局变量和局部变量所谓全局变量是在文档中所有函数为声明的变量，他的有效范围为整个文档；而局部变量是在某个函数内部声明定义的变量，他的有效范围只在函数内部。在一个文档中，如果出现同名的全局变量和局部变量时，在该函数内，局部变量的优先权大于全局变量。例如：全局变量和局部变量 <script> <!— var variable=”这是一个全局变量” function func1() { alert(variable) } function func2() var variable=” 这是一个局部变量” func1() func2() //--> </script> 在这个例子中，函数func1()显示的是全局变量variable的值。函数func2()显示的是局部变量variable的值。

第2节 JavaScript基础 3、函数的参数函数的参数是函数间互传数据的主要渠道，通过函数的参数，使实现在不同的情况下执行统一功能的模块成为可能。例如：函数参数的传递 <html> <head> <script language="JavaScript" > <!-- function f1() { var name=window.prompt("请输入你的姓名：","") f2(name) } function f2(str) var username=“”

第2节 JavaScript基础 username=str alert("你的姓名是：" + username) } // --> </head> <body> <input name="button" type="button" value="单击这个按钮" onclick="f1()"> </body> </html> 在这段代码中定义了两个函数f1()和f2()，在IE浏览器中单击“单击这个按钮”按钮将弹出输入框，输入姓名后，单击“确定”按钮，将弹出一个对话框。在这个例子中，在f1()中调用了一个带参数的函数f2()。

第2节　JavaScript基础

第2节 JavaScript基础 4、函数的返回值 JavaScript中的函数可以返回一个布尔值、整型、实型、字符串等类型的数值，还可以是对象。函数返回数值需要一个关键字return，例如：根据不同时间显示不同问候语的程序也可以这样写。 <html> <body> <script language="JavaScript" >  </script> </body> </html>

第2节 JavaScript基础 5、函数的调用函数的调用就是在函数声明定义后使用函数名称和参数进行调用。通常函数调用有两种方式：一种函数的调用是在脚本内部的函数之外，JavaScript没有主函数的概念，它的执行入口点就是元素SCRIPT，浏览器遇到这个元素，就把其中的脚本逐行解释执行，如果遇到函数调用的语句就到该文档中所有SCRIPT标记中寻找匹配的函数，找到后就转入函数内部执行。还有一种函数调用的方式是“事件驱动”的调用方式。所谓事件就是发生在文档中某个元素上的动作，诸如按钮被按下、鼠标掠过、图像被加载等等，当这些事件中的某一件发生时就调用某一个函数执行相应的动作，这个过程就称为事件驱动的函数调用。这两种函数调用的方法，在前面的例子中都已经使用过。

第2节 JavaScript基础六、对象与属性方法 1、 JavaScript中的对象（1）对象 JavaScript本身提供的内置对象，包括字符串对象String、数学对象Math、日期时间对象Date、数组对象Array等，这些对象在使用前需要用“New”关键字进行申明；浏览器相关的对象，包括文档对象Document、窗口对象Window、历史对象History、定为对象Location以及浏览器对象Navigator，这类对象非常特殊，它们在网页加载时会自动创建，所以在使用时无需申明，可以直接使用；自定义对象，在JavaScript中还可以自行定义一个新的对象。

第2节 JavaScript基础（2）几个关键字 a. this this实际上是一个“虚拟”对象，它代表了当前的对象。 b. new 该关键字用于创建一个新对象。用法为：new constructor[(arguments)] c. with 该关键字为语句设定默认对象，用法为： with(object) statement

第2节 JavaScript基础（3）JavaScript的内置对象所谓的“内置对象”一是指它们不是由用户创建的，而是指它们不依赖于某一特定的文档或窗口。 a. array对象该对象是JavaScript提供的数组对象，提供对创建任何数据类型的数组的支持，构造方法为 new array() new array(size) new array(element0,element1,……elementn) b. image对象该对象是JavaScript提供的图像对象，提供对图像的操作，其构造方法为：new image()

第2节 JavaScript基础 c. date对象该对象启用基本存储器并取得日期和时间，其构造方法为： d. math对象 var newDateObj=new Date() var newDateObj=new Date(dateVal) var newDateObj=new Date(year,month,date[,hours[,minutes[,seconds[,ms]]]]) var newDateObj=new Date(“month,date,year,hours:minutes:seconds”) d. math对象该对象提供基本数学函数和常数，在脚本中按如下形式直接调用其方法和属性。用法：Math[.{property | method}] Math 对象不能用new运算符创建，该对象在装载脚本引擎时由该引擎创建。其所有方法和属性在脚本中总是可用。

第2节 JavaScript基础 e. String对象该对象是字符串的抽象，通过它的属性和方法可以方便的进行处理或格式化文本字符串以及确定和定位字符串中的子字符串。使用格式为："String literal"[.method] String对象可用字符串文字显式创建。用这种方法创建的String对象与用new运算符创建的String对象处理上不同。所有字符串文字共享公用的全局字符串对象。所以，如果为字符串文字添加属性，则它对所有标准字符串对象都是可用的。 f. Navigator对象这个对象用来获得浏览器信息

第3节　JavaScript实例制作 3.1　使用Window对象 3.2　使用document对象 3.3 计时器的制作

第3节 JavaScript实例制作一、使用window对象 window对象是JavaScript中HTML元素对象的最顶层，也是文档脚本中的默认当前对象，它提供了获取浏览器窗口信息的属性和操纵浏览器窗口的方法。 1、window对象的属性和方法 window对象的属性参见教材 window对象的方法（1） alert()，confirm()，prompt() 这三个方法都用来打开对话框，只是用途各不相同。 alert用来弹出一个消息提示对话框。例如： alert(“信息提示窗口”)

第3节　JavaScript实例制作 confirm()方法用于弹出一个确认对话框，该对话框有“确定”(OK)和“取消”(CANCEL)两个按钮，如果用户选择前者，返回true，否则返回false。该方法接受字符串参数，用做对话框的提示文字。例如： if(confirm("你继续操作吗？")) { …… //确定后执行的代码 } else …… //取消后执行的代码

第3节　JavaScript实例制作 prompt()方法用于弹出一个信息输入对话框。该方法接受两个字符串参数，前一个用作对话框的提示文字，后一个用作输入文本框的预置文字。返回值为接收到的字符串。例如： var name=window.prompt("请输入你的姓名:","") 在浏览器中执行的结果

第3节 JavaScript实例制作（2）open()和close() 这两个方法用于窗口的打开和关闭。 [windowVar=][window.]open(“URL”,”windowName”[,”windowFeature”]) close()方法用来关闭当前浏览器窗口，该方法执行后，浏览器窗口关闭。（3）setTimeout()和clearTimeout() 这两个方法提供了时间控制功能。 SetTimeout()功能为在一定的时间之后执行某一函数，其用法为： [handle=][window.]setTimeout(“function”,time)

第3节 JavaScript实例制作 2、根据浏览器改变显示文档利用navigator对象获得浏览器的名称，然后根据浏览器名称，利用window对象的属性location更换文档。例如：根据浏览器更换文档 function Init() { if(navigator.appName==”Netscape”) window.location=”index_for_netscape.htm” } …… <Body onload=”Init()”>

第3节 JavaScript实例制作 3、打开定制窗口使用对象window的方法open()可以打开一个定制窗口，并且根据需要，通过以下几个属性来控制菜单、工具栏、url定位栏及状态栏等在窗口中是否显示。 toolbar——浏览器窗口的工具栏 location——浏览器窗口的url定位栏 status——浏览器窗口的状态栏 menubar——浏览器窗口的菜单 scrollbars——浏览器窗口的滚动条 resizeable——浏览器窗口是否可改变大小 width——浏览器窗口的宽度 heigh——浏览器窗口的高度

第3节 JavaScript实例制作二、使用document对象 1、 document对象的属性和方法参见教材 2、显示文档最后修改日期在页面中添加网页的最后修改日期的方法为调用document对象的属性lastModified，然后用write方法写到网页上，通常代码如下： <script>  </script>

第3节 JavaScript实例制作 3、控制页面背景通过document的bgColor属性可以控制页面的背景色，可以用它来实现根据用户选择设置背景色，或利用随机数随机设置页面的背景色。如果和setTimeout方法一起使用，则可以做出页面颜色动态渐变的效果。例如：背景色渐变 <html> <head> <script language="JavaScript"> <!-- function tohex(num) //十进制到十六进制字符串转换 { var hex=num.toString(16) //把十进制数转变为十六进制字符串 if(num<16) hex="0"+hex //如果只有一位，添“0”凑足两位 return(hex) }

第3节　JavaScript实例制作 var color=17 //全局变量设置颜色值 function change() { color+=17 //色值增加 document.bgColor="#"+tohex(color)+tohex(color)+tohex(color) //设置背景色 if(color<255) setTimeout("change()",100) //如果颜色没变到白色，循环递归调用 } //--> </script> </head> <body bgcolor="#000000" onload="change()"> </body> </html> 这个例子把背景色动态地从黑色(#000000)渐变为白色(#ffffff)。其中tohex()调用的方法toString(16)为JavaScript内置方法，参数16表示把数字按十六进制转换为字符串(String)。如果没有参数，则缺省按十进制转换为字符串。在该段代码的基础上，只需稍作变化就可以改为七彩颜色变化的背景。

第3节 JavaScript实例制作三、计时器的制作计时器实现的原理是利用方法setTimeout()的计时功能。脚本的具体工作流程是：当网页加载时，变量time置初始值0，然后调用方法setTimeout()，每隔一秒钟就使变量time增加1，然后把time的值转化为HH: MM: SS的时间指示字符串，把它显示在单行文本输入框中。代码如下： <html> <head> <script language="JavaScript" > <!-- var time=0 function parseTime(time) //将秒数转化为HH: MM: SS格式 { var strhr var strmt var strsd var hours=Math.floor(time/3600) var minutes=Math.floor(time/60)-hours*60 var seconds=time-hours*3600-minutes*6

第3节 JavaScript实例制作 if(hours<10)strhr="0"+hours else strhr=hours if(minutes<10)strmt="0"+minutes else strmt=minutes if(seconds<10)strsd="0"+seconds else strsd=seconds return(strhr+":"+strmt+":"+strsd); } function staytimer() { document.f1.elements[0].value=parseTime(time) //设置表单文本输入框的值 time++ circle() //循环调用

第3节 JavaScript实例制作 function circle() { idTime=setTimeout("staytimer()",1000); //每隔一秒调用一次staytimer() } //--> </script> </head> <body onload="staytimer()"> <form name="f1"> <p><input type="text" name="T1" size="20" readonly></p> </form> </body> </html> 通过在BODY元素中的onload事件属性中添加staytimer()，以调用该函数，使其运行。在IE浏览器中的显示结果

第3节　JavaScript实例制作

责任编辑：…… 撰稿教师：……（以姓氏为序）电子编辑：…… 主编：…… 制作：…… 谢谢观看，再见！