javascript基础复习之函数，定时器，erval函数

Bertha 。 2022-09-26 03:10 203阅读 0赞

## Function对象 ##

JS中函数就是Function对象

函数名就是指向Function对象的引用

使用函数名就可以访问函数的对象

函数名()是调用函数

function 函数名 ([参数]) { 
    函数体；
    return 返回值；
    }

定义函数对象

函数的返回值

默认返回undefined

可以使用return返回具体的值

## 函数的重载 ##

**JS的函数没有重载**  
调用时只要函数名一样，无论传入多少个参数，调用的都是同一个函数  
没有接收到实参的参数值是undefined  
所有的参数传递给**arguments**数组对象

## JS传参比较灵活 ##

比如定义了

function sum(a,b)\{\}

然后传入参数 sum(1,2,3,4);也可以

**因为JS会把传入的参数封装到一个名为arguments的数组中，然后把arguments传给函数**

相当于在定义的函数中有个 arguments\[0\];

然后用arguments去给参数赋值  
就是

a = arguments\[0\];  
b = arguments\[1\];

因为arguments是一个数组所以还有点length属性，获取函数参数的个数。【i】还可以获取指定的参数。

**！！！可以利用arguments实现可变参数的函数。**

## 使用arguments模拟重载 ##

function sum(){ 
        var sum=0;
        for(var i=0;i<arguments.length;i++){ sum+=arguments[i]; }
          return sum;
        }

无论传入几个参数，都会进行加和运算，因为用的arguments数组，因为每个传入函数的参数都会先存到arguments数组中，然后在函数里对这个数组里面的值进行操作，就可以实现重载的效果了……………………

66666666，JS这个地方确实666啊

## 使用Function对象创建函数 ##

使用Function对象直接创建函数  
var functionName = new Function(arg1,…argN,functionBody);

var add = new Function(“x”,”y”,”return(x+y);”);  
var result = add(2,3);  
alert(result); //5  
alert(add);//弹出方法的文本

## 匿名函数 ##

创建匿名函数  
var func = function(arg1,……argN)\{ 函数体 return 返回值 \}

也可以把匿名函数在sort（）函数中用，把匿名函数写在sort的参数中，就是和那个compare函数一个意思了~~~

## 全局函数 ##

全局函数可用于所有的javascript对象  
常用的全局函数有：  
parseInt/parseFloat  
isNaN  
eval

## eval函数 ##

用于计算表达式字符串，或者用于执行字符串中的javascript代码  
只接受原始字符串作为参数  
如果参数中没有合法的表达式和语句，则抛出异常

例如：

var s1 = “2+3”;  
s1; //2+3;  
eval(s1);//5

var s2 = “var n = 5;console.log(n);”

![这里写图片描述][20160919144845777]

就是可以让写的字符串当做js代码运行~~~

一般用来 做计算器。。。科学计算器。。。

**主要函数：**

![这里写图片描述][20160919144926620]

还是可以运行alert（）

![这里写图片描述][20160919144955199]

写简单计算器好简单。。。。。

## JS的外部对象 ##

## BOM ##

就是浏览器对象模型，用来访问和操作浏览器窗口，使javascript有能力与浏览器对话  
通过使用BOM，可移动窗口，更改状态栏文本、执行其他不与页面内容发送直接联系的操作  
没有相关标准，但被广泛支持

浏览器提供的API，能够对浏览器进行操作。

## windows——浏览器 ##

子对象：  
history——–历史信息  
loaction——地址栏  
screen——–窗口  
navigator—-基本信息  
document—文档对象：页面的内容（还很复杂，还有很多下级）

这些个一起称之为BOM 浏览器对象模型

**BOM中包含DOM（document）**

## DOM ##

文档对象模型，用来操作文档  
定义了访问和操作HTML文档标准方法  
应用程序通过对DOM树的操作，来实现对HTML文档数据的操作

这个DOM就是document

document是根

## windows对象 ##

window表示浏览器窗口  
所有javascript全局对象、函数以及变量均自动成为window对象的成员

## window对象常用方法： ##

alert（），confirm（）  
setTimeout（），clearTimeout（）  
setInterval（），clearInterval（）

## 对话框 ##

**alert（str）**  
提示对话框，显示str字符串的内容  
**confirm(str)** //用来检测对用户提示~  
确认对话框，显示str字符串的内容  
按确定按钮返回true，其他操作返回false

![这里写图片描述][20160919145041075]

确定返回true，取消返回false；

![这里写图片描述][20160919145115404]

## 定时器 ##

多用于网页动态时钟，制作倒计时，跑马灯效果等  
**周期性时钟**  
以一定的时间间隔执行代码，循环往复

**一次性时钟**  
在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行

打开网页，过一会自己出来东西。。。。定时刷新

## 周期性定时器 ##

setInterval(exp,time): 周期性触发代码exp  
exp:执行语句  
time：时间周期，单位为**毫秒**  
返回已经启动的定时器对象  
clearInterval(tID): 停止启动的定时器  
tID：启动的定时器对象

windows.setInterval(“alert(‘hello’);”,3000);  
//或者

windows.setInterval(func,3000);

function func()\{ alert(“hello”); \}

就是到那个时间就循环执行那个函数，两种写法，直接写exp函数，或者写个函数，然后在exp写函数名

![这里写图片描述][20160919145147796]

或者

![这里写图片描述][20160919145218701]

**clearInterval(定时器的名);**

## 实例，动态时钟 ##

js代码：

![这里写图片描述][20160919145256107]

点击停止就会清除计时器，停止刷新，然后再次点击启动，就又会创建个计时器~~~

## 一次性定时器 ##

setTimeout(exp,time): 一次性触发代码exp  
exp: 执行语句  
time: 间隔时间，单位为毫秒  
返回已经启动的定时器  
clearTimeout(tID): 停止启动的定时器  
tID: 启动的定时器对象

与周期性定时器类似，就是函数名不一样是Timeout,而周期性的是 Interval ~~~

例子，点击删除后，显示操作成功，过两秒后隐藏掉操作成功，然后再次点击又会显示。

在下面对那个操作成功的段落定义 id 为msg，class定义为hide（默认样式为隐藏） ，然后上面获取Byid ，在用元素对象点classname = “新的演示”即 show，就会变成显示的了。

![这里写图片描述][20160919145335514]

然后两秒后隐藏。

## window的常用属性 ##

**screen对象**  
包含有关客户端显示屏幕的信息  
常用于获取屏幕的分辨率和色彩  
常用属性  
width/height //宽高  
availWidth/availHeight //可用的宽高

![这里写图片描述][20160919145404596]

可用的和现在的一样，是因为我把windows的下边的栏给默认隐藏了~

history对象  
包含用户（在浏览器窗口中）访问过的URL  
length属性： 浏览器历史列表中的URL数量  
方法  
back()  
forward()  
go(num)

alert(history.legth);  
history.forward(); //等同于单击“前进”按钮  
history.back(); //等同于单击“后退”按钮  
history.go(-2); //等同于单击两次“后退”按钮 写2就是前进两步

**location对象**

包含有关当前URL的信息  
常用于获取和改变当前浏览的网址  
href属性：当前窗口正在浏览的网页地址  
方法：  
reload(): 重新载入当前网址，同时刷新按钮

loaction.href=”[http://www.163.com][http_www.163.com]”;  
这个就跳转到163了

![这里写图片描述][20160919145436222]

**reload（）是重新刷新下页面**

**navigator对象**  
包含有关浏览器的信息  
常用于获取客户端浏览器和操作系统信息

navigator.userAgent

![这里写图片描述][20160919145509436]

“Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/50.0.2661.94 Safari/537.36”

## 例子： 秒表计时器 ##

js代码：

## 例子2：用一次性定时器实现点击图片，然后图片放大，过两秒后再变回去 ##

js代码：

[20160919144845777]: /images/20220717/c900dec8b39e4849bdf11c0cea368264.png
[20160919144926620]: /images/20220717/55b9c9d4ae01433c8740a4577a89c1bd.png
[20160919144955199]: /images/20220717/743b5f23398c4ce989429920c3557ba1.png
[20160919145041075]: /images/20220717/904ce2f90a7b45079ef38fe7581af8f1.png
[20160919145115404]: /images/20220717/03863423c01a4a0d8ad817795ddc5089.png
[20160919145147796]: /images/20220717/af6271af44824bc99d44f73c9cd7ae60.png
[20160919145218701]: /images/20220717/70a1341d9b404d29bd9e432cc893d62f.png
[20160919145256107]: /images/20220717/0842ce5465aa426a9e14a916710cffd7.png
[20160919145335514]: /images/20220717/4bc63a19ef524c4c911709ddd4c19a37.png
[20160919145404596]: /images/20220717/a595336b3578440eafd090d0cb748ddd.png
[http_www.163.com]: http://www.163.com
[20160919145436222]: /images/20220717/032085a82c4644e79deab178c186327f.png
[20160919145509436]: /images/20220717/82e9db050bf44ee38427db16f7dba1a6.png