JavaScript浏览器对象模型-BOM-Window 对象-BOM 对象-定时器
window对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window对象</title> </head> <body> <script> /* 1. 在浏览器环境中Global对象就是window对象 Global对象的属性和方法就是window对象的属性和方法 2. 还提供了当前DOM中所有的事件类型 3. 其他BOM对象都是window对象的属性 4. window对象提供了属性和方法 5. HTML5提供的部分新特性 */ console.log(window); // 1. 变量与属性的关系,函数与方法的关系 var str = 'string'; console.log(str); console.log(window.str); // 2. 获取窗口的宽度和高度 console.log(window.innerWidth, window.innerHeight);//获得的是可视区域的宽高 console.log(window.outerWidth, window.outerHeight);//获得的是加上工具条与滚动条窗口的宽度与高度。 // 3. self属性 -> 表示window对象本身 console.log(window === window.self); // 4. 判断是否为顶级窗口 console.log(window.top === window.self);// true </script> </body> </html> |
window对象的方法
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>window对象的方法</title> <style> body { margin: 0px; height: 2000px; } </style> </head> <body> <button id="btn">打开</button> <button id="btn2">移动</button> <script> // scrollBy() 方法可把内容滚动指定的像素数。 var btn = document.getElementById('btn'); btn.onclick = function () { window.scrollBy(100, 200); } // 点击按钮,窗口向下移动 2000 //scrollTo() 方法可把内容滚动到指定的坐标。 var btn2 = document.getElementById('btn2'); btn2.onclick = function () { window.scrollTo(0, 2000); } </script> </body> </html> |
navigator对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>navigator对象</title> </head> <body> <script> console.log('浏览器的代码名: ' + navigator.appCodeName); console.log('浏览器的名称: ' + navigator.appName); console.log('浏览器的平台和版本信息: ' + navigator.appVersion); console.log('运行浏览器的操作系统平台: ' + navigator.platform); //userAgent 属性返回由客户机发送服务器的 user-agent 头部的值 var ua = navigator.userAgent; //判断浏览器 if (/firefox/i.test(ua)) { console.log('当前使用的是 Firefox 浏览器'); } else if (/chrome/i.test(ua)) { console.log('当前使用的是 Chrome 浏览器'); } else if (/safari/i.test(ua)) { console.log('当前使用的是 Safari 浏览器'); } else if (/msie/i.test(ua)) { console.log('当前使用的是 IE 11 之前版本的浏览器'); } else if ("ActiveXObject" in window) { console.log('当前使用的是 IE 11 浏览器'); } //判断操作系统 if (/windows/i.test(ua)){ console.log('当前使用的是 Windows 操作系统'); }else if (/mac/i.test(ua)){ console.log('当前使用的是 Mac 操作系统'); }else if (/android/i.test(ua)){ console.log('当前使用的是 Android 操作系统'); }else if (/iphone/i.test(ua)){ console.log('当前使用的是 iPhone 操作系统'); } </script> </body> </html> |
history对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <html lang="en"> <head> <meta charset="UTF-8"> <title>history对象</title> </head> <body> <!-- forward(): 实现跳转下一个页面,作用和浏览器的前进按钮一样。 back(): 实现转跳到上一个页面,作用和浏览器的回退按钮一样。 go(): 实现跳转到指定的页面。如果为负数表示后退,如果为正数表示前进。 --> <script type="text/javascript"> function goForward() { window.history.forward(); } function back() { window.history.back(); } </script> <input type="button" value="下一个页面" onclick="goForward()" /> <input type="button" value="上一个页面" onclick="back()" /> </body> </html> |
location对象
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>location对象</title> </head> <body> <script> //Location 对象包含了浏览器的地址栏中的信息。该对象主要用于获取和设置地址。 console.log(location.href); </script> </body> </html> |
定时器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <button id="start">开始</button> <button id="stop">结束</button> <div id="show"></div> <script> /* setInterval(code,time) * 参数 * code - 表示按照指定周期所执行的代码块 * 最简单的实现方式就是回调函数 * time - 表示指定周期,以毫秒为单位 * 返回值 - 作为当前定时器的标识(ID) * 问题 * 导致第一次执行时,会出现指定时间的延迟 */ //开始按钮 var start = document.getElementById('start'); var show = document.getElementById('show'); var t; start.addEventListener('click',function(){ showTime(); t = setInterval(showTime, 1000); }) function showTime(){ var date = new Date(); show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds(); } //结束按钮 /* clearInterval(id) * id - 表示setInterval()方法的返回值 */ var stop = document.getElementById('stop'); stop.addEventListener('click',function(){ clearInterval(t); }) </script> </body> </html> |
延迟调用
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>延迟调用</title> </head> <body> <button id="btn">按钮</button> <button id="end">停止</button> <div id="show"></div> <script> /* setTimeout(code, millisec) setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。 setTimeout() 只执行 code 一次。 如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout() 。 */ var btn = document.getElementById('btn'); var t ; btn.addEventListener('click',function(){ showTime(); //插入时间的代码 function showTime() { var date = new Date(); show.innerHTML = date.getFullYear() + '-' + date.getMonth() + '-' + date.getDate() + '-' + date.getHours() + '-' + date.getMinutes() + '-' + date.getSeconds(); t = setTimeout(showTime, 1000); //单次定时器执行一次,并调用函数,定时器在函数体内,再次调用定时器,实现循环 } }); //结束执行代码 //clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。 var end = document.getElementById('end'); end.addEventListener('click',function(){ clearTimeout(t); }) </script> </body> </html> |
向下滑动
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>向下滑动</title> <style> body { margin: 0px; } #show { width: 200px; /* 高度为 0 */ height: 100px; background-color: lightcoral; margin: 0 auto; /* 设置为隐藏 */ /*display: none;*/ } </style> </head> <body> <div id="show"></div> <script> var show = document.getElementById('show'); /*show.style.display = 'block'; var t = setInterval(function(){ var style = window.getComputedStyle(show,null); var height = parseInt(style.height); // 判断当前的高度是否为 400 if (height >= 400){ clearInterval(t); } else { height++; show.style.height = height + 'px'; } },50);*/ slideDown(show,400); /* 将上述实现的向下滑动效果,封装在一个固定的函数中 * 设计当前实现向下滑动效果函数的形参 * elem - 表示实现向下滑动效果的元素 * maxHeight - 表示元素向下滑动的最大高度值 * 函数的逻辑与默认设置CSS样式属性的值无关 */ function slideDown(elem, maxHeight){ // 操作的元素默认的display值为none elem.style.display = 'block'; elem.style.height = '0px'; var t = setInterval(function(){ var style = window.getComputedStyle(elem,null); var height = parseInt(style.height); // 判断当前的高度是否为 400 if (height >= maxHeight){ clearInterval(t); } else { height++; elem.style.height = height + 'px'; } },50); } </script> </body> </html> |
移动效果
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>移动效果</title> <style> body { margin: 0px; } #box { width: 100px; height: 100px; background-color: lightcoral; position: absolute; left: 100px; top: 100px; } </style> </head> <body> <div id="box"></div> <script> /* * 向右移动 * 当前元素移动到页面的最右边时 -> 向左移动 * 向左移动 * 当前元素移动到页面的最左边时 -> 向右移动 */ var box = document.getElementById('box'); var flag = false;// 定义一个开关,默认向右 var speed = 1; setInterval(function(){ //speed += 1; // 获取可视窗口的宽度 var WIDTH = window.innerWidth; var style = window.getComputedStyle(box, null); var left = parseInt(style.left); var width = parseInt(style.width); //到最右边时 if(left + width >= WIDTH){ flag = true; }else if(left <= 0){ flag = false; } // 判断当前元素移动的方向 if (flag) {// 向左移动 left -= speed; } else {// 向右移动 left += speed; } box.style.left = left + 'px'; },10); </script> </body> </html> |
事件与动画结合
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件与动画结合</title> <style> body { margin: 0px; } </style> </head> <body> <div></div> <script> var body = document.body; var opacity = 1; //创建div document.addEventListener('click',function showTime(event){ var left = event.clientX; var top = event.clientY; var div = document.createElement('div'); div.style.width = 100 + 'px'; div.style.height = 100 + 'px'; div.style.borderRadius = '50%'; // 颜色随机 var r = parseInt(Math.random() * 255); var g = parseInt(Math.random() * 255); var b = parseInt(Math.random() * 255); div.style.backgroundColor = 'rgb('+ r + ',' + g + ',' + b + ')'; div.style.display = 'block'; div.style.position = 'absolute'; div.style.top = top-50 + 'px'; div.style.left = left-50 + 'px'; div.style.opacity = 1; body.appendChild(div); //慢慢消失 var style = window.getComputedStyle(div, null); t = setInterval(function(){ opacity = style.opacity; console.log(opacity); opacity -= 0.05; div.style.opacity = opacity; }, 1000); if (t <= 0) { clearTimeout(t); // 删除当前元素 } }) </script> </body> </html> |