JavaScript
BOM介绍
概念
BOM（Browser Object Model）即浏览器对象模型。 本质： 通过对象抽象浏览器中的一些功能 例如：（刷新页面，alert,confirm,pormpt,跳转 ...）BOM顶级对象
window对象是js中的顶级对象，定义在全局作用域中的变量、函数都会变成window对象的属性和方法，在调用的时候可以省略window。 注意： 1.文档document也属于window对象中的一个 2.window代表整个窗口页面加载事件
window.onload = function() {} ===> 页面加载完成：页面上的所有元素都创建完成，并且引用的外部资源都下载完毕（js,css）后执行window对象中的方法和属性
1.location属性 a.window对象身上有一个属性叫location b.location也是一个对象 2.location对象中的属性 a. location.href 获取当前网页的地址(网址) b. location.host 当前网页中主机地址 c. location.hostname 当前网页主机的名字 d. location.pathname 获取网页地址路径 e. location.protocol 获取当前网页协议类型(http, https, ftp) 3.locationd对象中的方法 a. 刷新页面(浏览器)加载 b. location.reload(boolean); 参数介绍: 默认值是false, 从计算机本地进行重新加载 true, 加载页面的时候,访问远程服务器,重新加载数据this关键字小结
this 谁调用this就指向谁 总结: 1. 在普通函数中this指向的是window对象 2. 在构造函数中this指向的是创建的对象 3. 在事件中this指向的是事件源对象 4. 在一个对象中this指向当前对象定时器
隔一段时间执行，只执行一次 ==》定时炸弹 ☞ 使用 window.setTimeout(function, time)； function： 处理程序，可以是匿名函数 time： 间隔时间，毫秒 返回值：定时器标识 ☞ 清除定时器 1. setTimeout有一个返回值,代表当前定时器的标识 2. clearTimeOut(定时器标识) 案例： 删除提示效果（点击按钮，显示一个层，3秒以后自动消失） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .box { width: 100px; height: 50px; background-color: red; text-align: center; line-height: 50px; display: none; color: blanchedalmond; } </style> </head> <body> <a href="javascript:;">删除</a> <div class="box">删除成功</div> <script> var btn = document.querySelector('a'); var div = document.querySelector('div'); btn.onclick = function () { //将隐藏的提示信息显示 div.style.display = 'block'; //3秒之后隐藏该元素 setTimeout(function () { div.style.display = 'none'; }, 3000); } </script> </body> </html>隔一段时间执行，并且会重复执行 ===》 类似于闹钟 ☞ 使用 window.setInterval(function, time); function: 处理程序，可以是匿名函数 time：时间，毫秒 返回值：定时器标识 ☞ 清除定时器 clearInterval(定时器标识)； 案例： 1.倒计时案例 实现方法一： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; } html, body { width: 100%; height: 100%; background-color: black; } .main { width: 250px; display: flex; justify-content: space-between; margin: 300px auto; text-align: center; align-items: center; } .gang { width: 20px; height: 10px; background-color: #fff; } </style> </head> <body> <div class="main"> <img src="" alt=""> <img src="" alt=""> <div class="gang"></div> <img src="" alt=""> <img src="" alt=""> <div class="gang"></div> <img src="" alt=""> <img src="" alt=""> </div> <script> var img = document.querySelectorAll('img'); setInterval(function () { var date = new Date(); var h = date.getHours(); var m = date.getMinutes(); var s = date.getSeconds(); img[0].src = 'img/' + parseInt(h / 10) + '.png' img[1].src = 'img/' + parseInt(h % 10) + '.png' img[2].src = 'img/' + parseInt(m / 10) + '.png' img[3].src = 'img/' + parseInt(m % 10) + '.png' img[4].src = 'img/' + parseInt(s / 10) + '.png' img[5].src = 'img/' + parseInt(s % 10) + '.png' }) </script> </body> </html> 实现方法二： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } html,body { width: 100%; height: 100%; background-color: #000; } .time { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .time div { float: left; } .line { width: 20px; height: 10px; background-color: #fff; margin-top: 16px; margin: 16px 10px 0; } </style> </head> <body> <div class="time"> <div class="h"> <img alt="" class="h1"> <img alt="" class="h2"> </div> <div class="line"></div> <div class="m"> <img alt="" class="m1"> <img alt="" class="m2"> </div> <div class="line"></div> <div class="s"> <img alt="" class="s1"> <img alt="" class="s2"> </div> </div> <script> var h = document.querySelectorAll('.h img'); var m = document.querySelectorAll('.m img'); var s = document.querySelectorAll('.s img'); setInterval(function(){ var d = new Date(); //获取小时 var hour = d.getHours().toString(); if(hour < 10) { h[0].src = 'img/0.png'; h[1].src = 'img/' + hour + '.png'; }else { h[0].src = 'img/' + hour.substr(0, 1) + '.png'; h[1].src = 'img/' + hour.substr(1,1) + '.png'; } //获取分钟 var minute = d.getMinutes().toString(); if(minute < 10) { m[0].src = 'img/0.png'; m[1].src = 'img/' + minute + '.png'; }else { m[0].src = 'img/' + minute.substr(0, 1) + '.png'; m[1].src = 'img/' + minute.substr(1,1) + '.png'; } //获取秒 var second = d.getSeconds().toString(); if(second < 10) { s[0].src = 'img/0.png'; s[1].src = 'img/' + second + '.png'; }else { s[0].src = 'img/' + second.substr(0, 1) + '.png'; s[1].src = 'img/' + second.substr(1,1) + '.png'; } }); </script> </body> </html> 2.动画效果 offsetLeft: 水平偏移量相对HTML offsetTop： 垂直偏移量相对HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 100px; height: 100px; border-radius: 50%; background-color: cadetblue; position: relative; top: 0; left: 0; } </style> </head> <body> <div></div> <button class="btn1">向右移动800</button> <button class="btn2">向左移动0</button> <script> var div = document.querySelector('div'); var btn1 = document.querySelector('.btn1'); var btn2 = document.querySelector('.btn2'); var myID; btn1.onclick = function () { animation(div, 0, 800, 20); } btn2.onclick = function () { animation(div, 800, 0, 20); } function animation(element, current, target, step) { current = element.offsetLeft; if (element.timeID != null) { clearInterval(element.timeID); } element.timeID = setInterval(function () { if (current > target) { step = -Math.abs(step); } if (Math.abs(current - target) <= Math.abs(step)) { current = target; clearInterval(element.timeID); } else { current += step; } element.style.left = current + 'px'; }, 20) } </script> </body> </html>
如有不足，请多指教，
未完待续，持续更新！
大家一起进步！