BOM（一）
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 * BOM 9 * - 浏览器对象模型 10 * - BOM可以使我们通过JS来操作浏览器 11 * - 在BOM中为我们提供了一组对象，用来完成对浏览器的操作 12 * - BOM对象 13 * Window 14 * - 代表的是整个浏览器的窗口，同时window也是网页中的全局对象 15 * Navigator 16 * - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 17 * Location 18 * - 代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面 19 * History 20 * - 代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录 21 * 由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页 22 * 而且该操作只在当次访问时有效 23 * Screen 24 * - 代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息 25 * 26 * 27 * 这些BOM对象在浏览器中都是作为window对象的属性保存的， 28 * 可以通过window对象来使用，也可以直接使用 29 * 30 * 31 */ 32 33 //console.log(navigator); 34 //console.log(location); 35 //console.log(history); 36 37 /* 38 * Navigator 39 * - 代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器 40 * - 由于历史原因，Navigator对象中的大部分属性都已经不能帮助我们识别浏览器了 41 * - 一般我们只会使用userAgent来判断浏览器的信息， 42 * userAgent是一个字符串，这个字符串中包含有用来描述浏览器信息的内容， 43 * 不同的浏览器会有不同的userAgent 44 * 45 * 火狐的userAgent 46 * Mozilla/5.0 (Windows NT 6.1; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0 47 * 48 * Chrome的userAgent 49 * Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/52.0.2743.82 Safari/537.36 50 * 51 * IE8 52 * Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) 53 * 54 * IE9 55 * Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) 56 * 57 * IE10 58 * Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E) 59 * 60 * IE11 61 * Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; .NET4.0E; rv:11.0) like Gecko 62 * - 在IE11中已经将微软和IE相关的标识都已经去除了，所以我们基本已经不能通过UserAgent来识别一个浏览器是否是IE了 63 */ 64 65 //alert(navigator.appName); 66 67 var ua = navigator.userAgent; 68 69 console.log(ua); 70 71 if(/firefox/i.test(ua)){ 72 alert("你是火狐！！！"); 73 }else if(/chrome/i.test(ua)){ 74 alert("你是Chrome"); 75 }else if(/msie/i.test(ua)){ 76 alert("你是IE浏览器~~~"); 77 }else if("ActiveXObject" in window){ 78 alert("你是IE11，枪毙了你~~~"); 79 } 80 81 /* 82 * 如果通过UserAgent不能判断，还可以通过一些浏览器中特有的对象，来判断浏览器的信息 83 * 比如：ActiveXObject 84 */ 85 /*if("ActiveXObject" in window){ 86 alert("你是IE，我已经抓住你了~~~"); 87 }else{ 88 alert("你不是IE~~~"); 89 }*/ 90 91 /*alert("ActiveXObject" in window);*/ 92 93 94 95 </script> 96 </head> 97 <body> 98 99 </body> 100 </html>
History
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 * History 9 * - 对象可以用来操作浏览器向前或向后翻页 10 */ 11 window.onload = function(){ 12 13 //获取按钮对象 14 var btn = document.getElementById("btn"); 15 16 btn.onclick = function(){ 17 /* 18 * length 19 * - 属性，可以获取到当成访问的链接数量 20 */ 21 //alert(history.length); 22 23 /* 24 * back() 25 * - 可以用来回退到上一个页面，作用和浏览器的回退按钮一样 26 */ 27 //history.back(); 28 29 /* 30 * forward() 31 * - 可以跳转下一个页面，作用和浏览器的前进按钮一样 32 */ 33 //history.forward(); 34 35 /* 36 * go() 37 * - 可以用来跳转到指定的页面 38 * - 它需要一个整数作为参数 39 * 1:表示向前跳转一个页面 相当于forward() 40 * 2:表示向前跳转两个页面 41 * -1:表示向后跳转一个页面 42 * -2:表示向后跳转两个页面 43 */ 44 history.go(-2); 45 }; 46 47 }; 48 49 </script> 50 </head> 51 <body> 52 53 <button id="btn">点我一下</button> 54 55 <h1>History</h1> 56 57 <a href="01.BOM.html">去BOM</a> 58 </body> 59 </html>
Location
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 /* 8 * Location 9 * - 该对象中封装了浏览器的地址栏的信息 10 */ 11 window.onload = function(){ 12 13 //获取按钮对象 14 var btn = document.getElementById("btn"); 15 16 btn.onclick = function(){ 17 18 //如果直接打印location，则可以获取到地址栏的信息（当前页面的完整路径） 19 //alert(location); 20 21 /* 22 * 如果直接将location属性修改为一个完整的路径，或相对路径 23 * 则我们页面会自动跳转到该路径，并且会生成相应的历史记录 24 */ 25 //location = "http://www.baidu.com"; 26 //location = "01.BOM.html"; 27 28 /* 29 * assign() 30 * - 用来跳转到其他的页面，作用和直接修改location一样 31 */ 32 //location.assign("http://www.baidu.com"); 33 34 /* 35 * reload() 36 * - 用于重新加载当前页面，作用和刷新按钮一样 37 * - 如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面 38 */ 39 //location.reload(true); 40 41 /* 42 * replace() 43 * - 可以使用一个新的页面替换当前页面，调用完毕也会跳转页面 44 * 不会生成历史记录，不能使用回退按钮回退 45 */ 46 location.replace("01.BOM.html"); 47 48 }; 49 50 }; 51 52 </script> 53 </head> 54 <body> 55 56 <button id="btn">点我一下</button> 57 58 <h1>Location</h1> 59 60 <input type="text" /> 61 <a href="01.BOM.html">去BOM</a> 62 </body> 63 </html>
定时器setInterval()
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 10 //获取count 11 var count = document.getElementById("count"); 12 13 //使count中的内容，自动切换 14 /* 15 * JS的程序的执行速度是非常非常快的 16 * 如果希望一段程序，可以每间隔一段时间执行一次，可以使用定时调用 17 */ 18 /*for(var i=0 ; i<10000 ; i++){ 19 count.innerHTML = i; 20 21 alert("hello"); 22 }*/ 23 24 /* 25 * setInterval() 26 * - 定时调用 27 * - 可以将一个函数，每隔一段时间执行一次 28 * - 参数： 29 * 1.回调函数，该函数会每隔一段时间被调用一次 30 * 2.每次调用间隔的时间，单位是毫秒 31 * 32 * - 返回值： 33 * 返回一个Number类型的数据 34 * 这个数字用来作为定时器的唯一标识 35 */ 36 var num = 1; 37 38 var timer = setInterval(function(){ 39 40 count.innerHTML = num++; 41 42 if(num == 11){ 43 //关闭定时器 44 clearInterval(timer); 45 } 46 47 },1000); 48 49 //console.log(timer);//1 50 51 //clearInterval()可以用来关闭一个定时器 52 //方法中需要一个定时器的标识作为参数，这样将关闭标识对应的定时器 53 //clearInterval(timer); 54 55 }; 56 57 58 </script> 59 </head> 60 <body> 61 <h1 id="count"></h1> 62 </body> 63 </html>
开启一个定时器，来自动切换图片
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 window.onload = function(){ 9 10 /* 11 * 使图片可以自动切换 12 */ 13 14 //获取img标签 15 var img1 = document.getElementById("img1"); 16 17 //创建一个数组来保存图片的路径 18 var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]; 19 20 //创建一个变量，用来保存当前图片的索引 21 var index = 0; 22 23 //定义一个变量，用来保存定时器的标识 24 var timer; 25 26 //为btn01绑定一个单击响应函数 27 var btn01 = document.getElementById("btn01"); 28 btn01.onclick = function(){ 29 30 /* 31 * 目前，我们每点击一次按钮，就会开启一个定时器， 32 * 点击多次就会开启多个定时器，这就导致图片的切换速度过快， 33 * 并且我们只能关闭最后一次开启的定时器 34 */ 35 36 //在开启定时器之前，需要将当前元素上的其他定时器关闭 37 //多次点击后，开启了多个定时器，需要开启一个，关闭一个 38 clearInterval(timer); 39 40 /* 41 * 开启一个定时器，来自动切换图片 42 */ 43 timer = setInterval(function(){ 44 //使索引自增 45 index++; 46 //判断索引是否超过最大索引 47 /*if(index >= imgArr.length){ 48 //则将index设置为0 49 index = 0; 50 }*/ 51 index %= imgArr.length; 52 //修改img1的src属性 53 img1.src = imgArr[index]; 54 55 },1000); 56 }; 57 58 //为btn02绑定一个单击响应函数 59 var btn02 = document.getElementById("btn02"); 60 btn02.onclick = function(){ 61 //点击按钮以后，停止图片的自动切换，关闭定时器 62 /* 63 * clearInterval()可以接收任意参数， 64 * 如果参数是一个有效的定时器的标识，则停止对应的定时器 65 * 如果参数不是一个有效的标识，则什么也不做 66 */ 67 clearInterval(timer); 68 69 }; 70 71 72 }; 73 74 </script> 75 </head> 76 <body> 77 78 <img id="img1" src="img/1.jpg"/> 79 <br /><br /> 80 <button id="btn01">开始</button> 81 <button id="btn02">停止</button> 82 </body> 83 </html>
开启一个定时器，来控制div的移动
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style type="text/css"> 7 #box1{ 8 width: 100px; 9 height: 100px; 10 background-color: red; 11 position: absolute; 12 } 13 14 15 </style> 16 17 <script type="text/javascript"> 18 19 //使div可以根据不同的方向键向不同的方向移动 20 /* 21 * 按左键，div向左移 22 * 按右键，div向右移 23 * 。。。 24 */ 25 window.onload = function(){ 26 27 28 //定义一个变量，来表示移动的速度 29 var speed = 10; 30 31 //创建一个变量表示方向 32 //通过修改dir来影响移动的方向 33 var dir = 0; 34 35 //开启一个定时器，来控制div的移动 36 setInterval(function(){ 37 /* 38 * 37 左 39 * 38 上 40 * 39 右 41 * 40 下 42 */ 43 switch(dir){ 44 case 37: 45 //alert("向左"); left值减小 46 box1.style.left = box1.offsetLeft - speed + "px"; 47 break; 48 case 39: 49 //alert("向右"); 50 box1.style.left = box1.offsetLeft + speed + "px"; 51 break; 52 case 38: 53 //alert("向上"); 54 box1.style.top = box1.offsetTop - speed + "px"; 55 break; 56 case 40: 57 //alert("向下"); 58 box1.style.top = box1.offsetTop + speed + "px"; 59 break; 60 } 61 },30); 62 63 64 65 //为document绑定一个按键按下的事件 66 document.onkeydown = function(event){ 67 event = event || window.event; 68 69 //当用户按了ctrl以后，速度加快 70 if(event.ctrlKey){ 71 speed = 500; 72 }else{ 73 speed = 10; 74 } 75 76 //使dir等于按键的值 77 dir = event.keyCode; 78 }; 79 80 //当按键松开时，div不再移动 81 document.onkeyup = function(){ 82 //设置方向为0 83 dir = 0; 84 }; 85 86 }; 87 88 89 </script> 90 </head> 91 <body> 92 <div id="box1"></div> 93 </body> 94 </html>
延时调用
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 <script type="text/javascript"> 7 8 var num = 1; 9 10 //开启一个定时器 11 /*setInterval(function(){ 12 console.log(num++); 13 },3000);*/ 14 15 16 /* 17 * 延时调用， 18 * 延时调用一个函数不马上执行，而是隔一段时间以后在执行，而且只会执行一次 19 * 20 * 延时调用和定时调用的区别，定时调用会执行多次，而延时调用只会执行一次 21 * 22 * 延时调用和定时调用实际上是可以互相代替的，在开发中可以根据自己需要去选择 23 */ 24 var timer = setTimeout(function(){ 25 console.log(num++); 26 },3000); 27 28 //使用clearTimeout()来关闭一个延时调用 29 clearTimeout(timer); 30 31 </script> 32 </head> 33 <body> 34 </body> 35 </html>
