13 -1 BOM和定时器

时间 2019-11-29

标签 bom 定时器繁體版

原文原文链接

一 BOMhtml

JavaScript基础分为三个部分：linux

ECMAScript：JavaScript的语法标准。包括变量、表达式、运算符、函数、if语句、for语句等。浏览器
DOM：文档对象模型，操做网页上的元素的API。好比让盒子移动、变色、轮播图等。框架
BOM：浏览器对象模型，操做浏览器部分功能的API。好比让浏览器自动滚动。异步

从上图也能够看出：ide

window对象是BOM的顶层(核心)对象，全部对象都是经过它延伸出来的，也能够称为window的子对象。函数
DOM是BOM的一部分。url

window对象：spa

window对象是JavaScript中的顶级对象。code
全局变量、自定义函数也是window对象的属性和方法。
window对象下的属性和方法调用时，能够省略window。

一、打开窗口：

window.open(url,target)

参数解释：

url：要打开的地址。
target：新窗口的位置。能够是：_blank 、_self、 _parent 父框架。

2 location对象的属性

href：跳转
hash 返回url中#后面的内容，包含#
host 主机名，包括端口
hostname 主机名
pathname url中的路径部分
protocol 协议通常是http、https
search 查询字符串

例子

 1 <body>
 2 <div>smyhvae</div>
 3 <script>
 4 
 5     var div = document.getElementsByTagName("div")[0];
 6 
 7     div.onclick = function () {
 8         location.href = "http://www.baidu.com";   //点击div时，跳转到指定连接
 9  //     window.open("http://www.baidu.com","_blank");  //方式二
10     }
11 
12 </script>
13 </body>

3 navigator对象

window.navigator 的一些属性能够获取客户端的一些信息。

userAgent：系统，浏览器)
platform：浏览器支持的系统，win/mac/linux

例子：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>BOM</title>
 6 </head>
 7 <body>
 8 <script>
 9     window.onload=function (ev) {
10         console.log(111);
11         console.log(window.navigator);
12         console.log(navigator.userAgent);
13         console.log(navigator.platform);//查看浏览器支持的系统
14 
15         setTimeout(function () {
16             //这两个不能同时存在
17             window.open('http://www.baidu.com','_self');//打开一个新的网页
18             // window.location.reload();//2秒以后整改网页刷新，全局刷新，不建议使用
19 
20         },2000);
21 
22     }
23 </script>
24 
25 </body>
26 </html>

View Code

二定时器

在js中的定时器分两种：一、setTimeout() 二、setInterval()

1.setTimeOut()

只在指定时间后执行一次

1 /定时器 异步运行  
2 function hello(){  
3 alert("hello");  
4 }  
5 //使用方法名字执行方法  
6 var t1 = window.setTimeout(hello,1000);  
7 var t2 = window.setTimeout("hello()",3000);//使用字符串执行方法  
8 window.clearTimeout(t1);//去掉定时器

2.setInterval()

在指定时间为周期循环执行

1 /实时刷新  时间单位为毫秒  
2 setInterval('refreshQuery()',8000);   
3 /* 刷新查询 */  
4 function refreshQuery(){  
5   console.log('每8秒调一次') 
6 }

两种方法根据不一样的场景和业务需求择而取之，

对于这两个方法，须要注意的是若是要求在每隔一个固定的时间间隔后就精确地执行某动做，那么最好使用setInterval，而若是不想因为连续调用产生互相干扰的问题，尤为是每次函数的调用须要繁重的计算以及很长的处理时间，那么最好使用setTimeout