3.2 JavaScript函数

3.2.1 常用定时函数

在前面的示例中，时间是静止的，不能动态更新。若要像电子表一样不停地动态改变时间，则需要使用将要学习的定时函数。JavaScript中提供了两个定时函数setTimeout()和setInterval()。此外，还提供了用于清除定时器的两个函数clearTimeout()和clearInterval()。

1．setTimeout()

setTimeout()用于在指定的毫秒后调用函数或计算表达式，语法格式如下：

语法

下面使用setTimeout()函数实现3秒后弹出提示框，代码如示例10所示。

【示例10】 定时函数

➢ 3000表示3000毫秒，即3秒。

➢ 点击“显示提示消息”按钮调用timer()函数时，弹出一个警告提示框，由于使用了setTimetout()函数，因此调用函数timer()后，需要等待3秒，才能弹出警告提示框。

在浏览器中运行并点击“显示提示消息”按钮，等待3秒后，弹出如图3.12所示的警告提示框。

2．setInterval()

setInterval()可按照指定的周期（以毫秒计）来调用函数或计算表达式，语法格式如下：

语法

setInterval()会不停地调用函数，直到窗口被关闭或被其他方法强制停止。在示例10的代码中将setTimeout()函数改为使用setInterval()函数，修改后的代码如下所示：

在浏览器中重新运行上面的示例10，点击“显示提示消息”按钮，等待3秒后，弹出如图3.12所示的提示框。关闭此提示框后，间隔3秒后又会弹出提示框……只要把弹出的提示框关闭，3秒后就会再次弹出提示框。

提示

setTimeout()只执行一次函数，如果要多次调用函数，则需要使用setInterval()或者让被调用的函数再次调用setTimeout()。

知道了函数setInterval()的用法，现在将示例5改成时钟特效的效果，使时钟“动起来”，实现思路就是每过1秒都要重新获得当前时间并显示在页面上，修改后的代码如示例11所示。

【示例11】 时钟特效动起来

在浏览器中运行此示例11，时钟已经“动起来”，达到了真正的时钟特效。

3．clearTimeout()和clearInterval()

clearTimeout()函数用来清除由setTimeout()函数设置的定时器，语法格式如下：

语法

clearlnterval()函数用来清除由setInterval()函数设置的定时器，语法格式如下：

语法

现在将示例11实现的效果加一个需求，即通过点击“停止”按钮停止时钟特效，代码修改如示例12所示。

【示例12】 清除时钟特效

3.2.2 技能训练1

上机练习2 制作十二进制的时钟特效

训练要点

➢ Date对象的使用。

➢ setInterval()方法的使用。

需求说明

➢ 制作显示年、月、日、星期，并且显示上午（AM）和下午（PM）的十二进制的时钟，如图3.13所示。

代码实现思路及关键代码

（1）创建一个Date()对象，如var today=new Date()。

（2）通过Date对象的getFullYear()方法获得年份数，通过getMonth()方法获得月份数（0～11），通过getDate()方法获得天数，通过getDay()方法获得一个星期中的第几天，从0开始到6结束。

（3）通过getHours()方法获得当前小时数，通过getMinutes()方法获得当前分钟数，通过getSeconds()方法获得当前秒数。

（4）使用if语句判断当前小时是否大于12，如果大于12，则为下午；否则为上午。

（5）使用setInterval()设置每间隔指定毫秒后调用clock_12h()，代码如下所示。

3.2.3 自定义函数

1．函数的基本结构

函数是在调用时才会执行的一段代码块，可以重复使用。其基本语法结构如下：

语法

上述语法结构是由关键字function、函数名称、小括号内的一组可选参数以及大括号内的待执行代码块组成的。其中函数名称和参数个数均可以自定义，待执行的代码块可以由一句或多句JavaScript代码组成。

➢ function是定义函数的关键字，必须有。

➢ 函数名：可由大小写字母、数字、下划线（_）和$符号组成，但是函数名不能以数字开头，且不能是JavaScript中的关键字。

➢ 参数：是外界传递给函数的值，它是可选的，多个参数之间使用“，”分隔。参数0、参数1等是函数的参数。因为JavaScript本身是弱类型，所以它的参数也没有类型检查和类型限定。函数中的参数是可选的，根据是否带参数，函数可分为无参函数和有参函数。

➢ “{”和“}”定义了函数的开始和结束。

➢ 函数体：是专门用于实现特定功能的主体，由一条或多条语句组成。

➢ 返回值：在调用函数后若想得到处理结果，可在函数体中用return关键字返回。

2．参数设置

函数在定义时根据参数的不同，可分为两种类型，一种是无参函数，一种是有参函数。在定义有参函数时，设置的参数称为形参，函数调用时传递的参数称为实参。所谓形参指的就是形式参数，具有特定的含义；实参指的是实际参数，也就是具体的值。接下来将分别介绍几种常用的函数参数设置。

（1）无参函数

无参函数适用于不需要提供任何数据，即可完成指定功能的情况。

具体示例如下：

上述代码定义了一个名称为welcome的函数，该函数的参数个数为0。在待执行的代码部分只有一句alert()方法，用于在浏览器中弹出提示框并显示双引号内的文本内容。

需要注意的是，在自定义函数时，即使函数的功能实现不需要设置参数，小括号“()”也不能够省略。

（2）有参函数

在项目开发中，若函数体内的操作需要用户传递数据，此时函数定义时需要设置形参，用于接收用户调用函数时传递的实参。如果需要弹出的提示框每次显示的文本内容不同，可以使用参数传递的形式：

此时为之前的welcome函数方法传递了一个参数msg，在待执行的代码部分修改原先的alert()方法，用于在浏览器上弹出提示框并动态显示msg传递的文本内容。

（3）获取函数调用时传递的所有实参

在开发时若不能确定函数的形参个数，此时定义函数时可以不设置形参，在函数体中直接通过arguments对象获取函数调用时传递的实参，实参的总数可通过length属性获取，具体的实参值可通过数组遍历的方式进行操作，示例如下：

3．函数的调用

函数可以通过使用函数名称的方法进行调用。例如：

如果该函数存在参数，则调用时必须在函数的小括号内传递对应的参数值，如下所示：

函数可以在JavaScript代码的任意位置进行调用，也可以在指定的事件发生时调用。例如在按钮的点击事件中调用函数：

上述代码中的onclick属性表示元素被鼠标点击的状态触发等号右边的函数内容。

【示例13】 JavaScript函数的简单调用

示例13在浏览器中的运行效果如图3.14所示。

4．函数的返回值

相比Java而言，JavaScript函数更加简便，无须特别声明返回值类型。JavaScript函数如果存在返回值，直接在大括号内的代码块中使用return关键字后面紧跟需要返回的值即可。例如：

上述代码对两个数字进行了求和运算，使用自定义变量result获取total函数的返回值。此时在total函数的参数位置填入了两个测试数据，得到了正确的计算结果。函数也可以带有多个return语句：

上述代码对两个数字进行了比较运算，然后返回其中较大的数值。使用自定义变量result获取maxNum函数的返回值。此时在maxNum函数的参数位置填入了两个测试数据，得到了正确的计算结果。单独使用return语句可随时终止函数代码的运行。例如测试数值是否为偶数，如果是奇数则不提示，如果是偶数则弹出提示框：

函数在执行到return语句时就直接退出了代码块，即使后续还有代码也不会被执行。本例中如果参数为奇数才能符合if条件然后触发return语句，因此后续的alert()方法不会被执行到，从而做到只有在参数为偶数时才显示提示框。

【示例14】 JavaScript带有返回值函数的应用

示例14在浏览器中的运行效果如图3.15所示。

5．函数简单应用

下面通过示例15和示例16来学习如何定义和调用函数。

【示例15】 JavaScript无参函数的应用

study()是创建的无参函数，onclick表示按钮的点击事件，当点击按钮时调用函数study()。在浏览器中运行示例15，如图3.16所示，点击“显示5次欢迎学习JavaScript”按钮，调用无参函数study()，在页面中循环输出5行“欢迎学习JavaScript”。

在示例15中使用的是无参函数，运行一次，页面只能输出5行“欢迎学习JavaScript”，如果需要根据用户的要求每次输出不同行数，该怎么办呢？有参函数可以实现这样的功能。下面修改示例15，把函数study()修改成一个有参函数，使用prompt()提示用户每次输出"欢迎学习JavaScript"的行数，然后将prompt()方法返回的值作为参数传递给函数study()。

【示例16】 JavaScript有参函数的应用

count表示传递的参数，不需要定义数据类型，将prompt()方法返回的值作为参数传递给函数study(count)。

在浏览器中运行示例16，点击页面上的按钮，弹出提示用户输入显示欢迎学习JavaScript次数的提示框，用户输入值后，根据用户输入的值在页面上输出欢迎学习JavaScript，如图3.17所示。

6．变量的作用域

与Java中的变量一样，在JavaScript中，根据变量作用范围不同，可分为全局变量和局部变量。JavaScript中的全局变量，是在所有函数之外的脚本中声明的变量，作用范围是该变量定义后的所有语句，包括其后定义的函数中的代码，以及其后的<script>与</script>标签中的代码。

JavaScript中的局部变量，是在函数内声明的变量，如示例15代码中study()函数中声明的"var i=0;"，只有在该函数中且位于该变量之后的代码中可以使用这个变量，如果在之后的其他函数中声明了与这个局部变量同名的变量，则后声明的变量与这个局部变量毫无关系。

请使用断点调试的方式运行示例，分析全局变量和局部变量的作用。

【示例17】 JavaScript变量的作用域

运行示例，在prompt()弹出的输入框中输入67，点击“确定”按钮，运行结果如图3.18所示。

这里使用了onload事件，onload事件会在页面加载完成时立即发生。将断点设置在var i=20；这一行，单步运行。我们会发现，先执行var i=20，设置i为全局变量，再运行onload事件调用second()函数，在函数中，因为输入的值67大于20，所以执行else语句，即在页面中输出了67。然后执行函数first()，在函数first()中，声明i为局部变量，它只作用于函数first()，因此for循环输出了0、1、2、3、4。

3.2.4 技能训练2

上机练习3 编写一个max(x,y,z)的JavaScript函数

需求说明

➢ 试创建一个名称为max(x,y,z)的JavaScript函数，其返回值为x、y、z中的最大值

➢ 使用alert语句显示2、30、99这三个数中的最大值。

上机练习4 字符串大小写转换

需求说明

➢ 编写HTML表单，设置两个文本框和两个按钮，文本框显示转换前后数据，按钮用于转换。

➢ 为按钮添加点击事件，并利用函数deal()来处理。

➢ 编写deal()函数，根据传递的不同参数执行不同的转换操作。

➢ 将转换后的数据显示到对应位置。

➢ 运行后结果如图3.19所示。

上机练习5 编写一个四则运算函数

需求说明

➢ 点击页面上的按钮时，调用函数，使用prompt()方法获取两个变量的值和一个运算符，如图3.20所示。

➢ 运算结果使用alert()方法显示出来，如图3.21所示。

➢ 使用switch判断获取的运算符号。