BOM
window对象
console.dir(window);
//dir将所有属性都打开
看到很多东西,这些都是window下的一些方法。
console.log(window.innerWidth,window.innerHeight); //可视区域的宽高
Jack 获取可视区宽高
open方法
open方法:打开一个新窗口 属性: window.open(URL,target,specs) 地址、属性、新窗口规格 常用就这三个,还有一个replace 属性: _blank 新窗口打开(默认) _self 当前窗口打开 窗口规格 width=pixels 窗口的宽度.最小.值为100 height=pixels 窗口的高度。最小.值为100 location=yes|no|1|0 是否显示地址字段.默认值是yes menubar=yes|no|1|0 是否显示菜单栏.默认值是yes resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes status=yes|no|1|0 是否要添加一个状态栏.默认值是yes titlebar=yes|no|1|0 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes
// window.open(); //打开一个新窗口 // window.open("http://jack.jackafan.top")
按钮控制打开新窗口和关闭窗口
btn.onclick = function(){ // window.open("http://jack.jackafan.top"); //URL // window.open("http://jack.jackafan.top","_self") //URL,属性 // window.open("http://jack.jackafan.top","_blank","width=600,height=600,location=1"); //URL,属性,规格 let win = window.open("http://jack.jackafan.top","_blank","width=600,height=600,location=1"); // console.log(win);//得到打开窗口的属性 //close关闭窗口,一般的使用范围是设置弹窗 setTimeout(function(){ win.close(); },3000) }
Jack 打开新窗口
window默认常用弹窗
btn.onclick = function(){ // alert("弹出一个消息") // confirm("是否按钮"); // let firm = confirm("确定?"); // console.log(firm);//得到返回值 // prompt("Hello,boy(提示信息)","Hi(默认值)"); console.log(prompt("Hello,boy(提示信息)","Hi(默认值)"));//得到返回值 }
Jack 是否弹窗比较实用~
源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>BOM</title> <style> img{ box-shadow:2px 2px 2px #333; border-radius: 3px; } </style> </head> <body> <button id="btn">Open</button> <script> { // window属性 // console.dir(window) // console.log(window.innerWidth,window.innerHeight); } { /* open方法:打开一个新窗口 属性: window.open(URL,target,specs) 地址、属性、新窗口规格 常用就这三个,还有一个replace 属性: _blank 新窗口打开(默认) _self 当前窗口打开 窗口规格 width=pixels 窗口的宽度.最小.值为100 height=pixels 窗口的高度。最小.值为100 location=yes|no|1|0 是否显示地址字段.默认值是yes menubar=yes|no|1|0 是否显示菜单栏.默认值是yes resizable=yes|no|1|0 是否可调整窗口大小.默认值是yes scrollbars=yes|no|1|0 是否显示滚动条.默认值是yes status=yes|no|1|0 是否要添加一个状态栏.默认值是yes titlebar=yes|no|1|0 是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框.默认值是yes toolbar=yes|no|1|0 是否显示浏览器工具栏.默认值是yes */ // window.open(); //打开一个新窗口 // window.open("http://jack.jackafan.top") let btn = document.querySelector("#btn"); // btn.onclick = function(){ // // window.open("http://jack.jackafan.top"); //URL // // window.open("http://jack.jackafan.top","_self") //URL,属性 // // window.open("http://jack.jackafan.top","_blank","width=600,height=600,location=1"); //URL,属性,规格 // let win = window.open("http://jack.jackafan.top","_blank","width=600,height=600,location=1"); // // console.log(win);//得到打开窗口的属性 // //close关闭窗口,一般的使用范围是设置弹窗 // setTimeout(function(){ // win.close(); // },3000) // } } { // window各种弹窗 let btn = document.querySelector("#btn"); btn.onclick = function(){ alert("弹出一个消息") // confirm("是否按钮"); // let firm = confirm("确定?"); // console.log(firm);//得到返回值 // prompt("Hello,boy(提示信息)","Hi(默认值)"); // console.log(prompt("Hello,boy(提示信息)","Hi(默认值)"));//得到返回值 } } </script> </body> </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> .inner{ height:200px; border:2px solid pink; } #banner{ position: absolute; left:0; top:0; width:200px; height:200px; background:#000; color:#fff; font:20px/50px; } </style> <script> window.onload = function(){ let banner = document.querySelector("#banner"); { // console.log(banner.offsetWidth,banner.offsetHeight,window.innerWidth,window.innerHeight); //小盒子(广告)宽、高、大盒子(页面)宽、高 } let resizeBanner = ()=> { let l = (window.innerWidth - banner.offsetWidth)/2; let t = (window.innerHeight - banner.offsetHeight)/2; console.log(l,t); banner.style.left = l + "px"; banner.style.top = t + "px"; } resizeBanner(); } </script> </head> <body> <div id="banner">广告弹窗</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> </body> </html>
但这广告只是刚开始的时候居中,滚动条发生改变的时候不发居中
Jack 获取宽高达到居中
onresize窗口大小发生改变居中
<!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> .inner{ height:200px; border:2px solid pink; } #banner{ position: absolute; left:0; top:0; width:200px; height:200px; background:#000; color:#fff; font:20px/50px; } </style> <script> window.onload = function(){ let banner = document.querySelector("#banner"); { // console.log(banner.offsetWidth,banner.offsetHeight,window.innerWidth,window.innerHeight); //小盒子(广告)宽、高、大盒子(页面)宽、高 } let resizeBanner = ()=> { let l = (window.innerWidth - banner.offsetWidth)/2; let t = (window.innerHeight - banner.offsetHeight)/2; console.log(l,t); banner.style.left = l + "px"; banner.style.top = t + "px"; } resizeBanner(); { // window resize 监听窗口大小发生改变的时候触发 window.onresize = function(){ console.log("窗口大小发生改变"); resizeBanner(); } } } </script> </head> <body> <div id="banner">广告弹窗</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> </body> </html>
onresize window.innerWidth obj.offsetWidth
问题 滚动条滚动的时候还是不居中
Jack onresize窗口大小改变触发
scroll滚动条事件
<!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> .inner{ height:200px; border:2px solid pink; } #banner{ position: absolute; left:0; top:0; width:200px; height:200px; background:#000; color:#fff; font:20px/50px; } </style> </head> <body> <!-- <div id="banner">广告弹窗</div> --> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> </body> <script> // scroll 监听滚动条发生变化时触发 window.onscroll = function(){ // console.log(window.scrollY,window.scrollX,1); /* 获取滚动条位置: window.scrollY 获取纵向滚动条位置 window.scrollX 获取横向滚动条位置 只支持谷歌,火狐,手机 document.body.scrollLeft document.body.scrollTop 但谷歌不行哦 document.documentElement.scrollLeft document.documentElement.scrollTop 但IE不行 一般这样写: var scrollT = document.documentElement.scrollTop || document.body.scrollTop; var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft; */ var scrollT = document.documentElement.scrollTop || document.body.scrollTop; console.log(scrollT); { // 设置位置: setTimeout(()=>{ document.documentElement.scrollTop = document.body.scrollTop = 0; },2000) } } </script> </html>
获取滚动条位置:
window.scrollY 获取纵向滚动条位置
window.scrollX 获取横向滚动条位置
只支持谷歌,火狐,手机
document.body.scrollLeft
document.body.scrollTop
但谷歌不行哦
document.documentElement.scrollLeft
document.documentElement.scrollTop
但IE不行
一般这样写:
var scrollT = document.documentElement.scrollTop || document.body.scrollTop;
var scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
设置位置:
document.documentElement.scrollTop = document.body.scrollTop = 0;
Jack 设置滚动条位置,一键回到顶部~
使用scroll和onresize居中广告
<!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> .inner{ height:200px; border:2px solid pink; } #banner{ position: absolute; left:0; top:0; width:200px; height:200px; background:#000; color:#fff; font:20px/50px; transition:.3s; } </style> <script> window.onload = function(){ let banner = document.querySelector("#banner"); let resizeBanner = ()=> { let l = (window.innerWidth - banner.offsetWidth)/2; let t = (window.innerHeight - banner.offsetHeight)/2; let scrollL = document.documentElement.scrollLeft || document.body.scrollLeft; let scrollT = document.documentElement.scrollTop || document.body.scrollTop; console.log(l,t); banner.style.left = l + scrollL + "px"; banner.style.top = t + scrollT + "px"; // 自身位置 + 滚动条位置 } resizeBanner(); { // window resize 监听窗口大小发生改变的时候触发 window.onresize = function(){ // console.log("窗口大小发生改变"); resizeBanner(); } // 滚动条滚动时触发 window.onscroll = function(){ // 滚动的时候有跳动,scc加一个动画 resizeBanner(); } } } </script> </head> <body> <div id="banner">广告弹窗</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> <div class="inner">JackAfan</div> </body> </html>
总结
window.innerWidth、obj.offsetWidth、window.innerHeight、obj.offsetHeight
可视区宽、obj宽、可视区高、obj高
上距离 = (大高-小高)/2 + 滚动条上距离
左距离 = (大宽-小宽)/2 + 滚动条左距离
window resize 监听窗口大小发生改变的时候触发
window.onscroll 滚动条滚动时触发
滚动条左距离 scrollL = document.documentElement.scrollLeft || document.body.scrollLeft;
滚动条上距离 scrollT = document.documentElement.scrollTop || document.body.scrollTop;
location 地址
console.log(location);
/* location 地址:地址栏相关信息 host: "127.0.0.1:5500"; 主机信息:域名+端口 一般情况下不显示档口号 我觉得可以做域名限制访问了~ hostname: "127.0.0.1"; 主机地址:域名 href: "http://127.0.0.1:5500/BOM/5-location.html"; 完整的地址 origin: "http://127.0.0.1:5500" pathname: "/BOM/5-location.html"; 路径 port: "5500"; 端口 protocol: "http:"; 协议:"http"||"https" search: "?wd=JackAfan"; 获取提交的数据 也可以获取多个数据 name='Afan' name='jack' "?wd=1&Afan=2&jack=3" 代表了?号后面的内容,get方式提交过来的数据 href 可以获取地址栏的信息 location.search "?wd=1&Afan=2&jack=3" location.href "https://www.baidu.com/s?wd=1&Afan=2&jack=3#sssss" */
Jack 地址栏相关信息
href、replace、reload
btn.onclick = function(){ // href可以获取也可以设置 console.log(location.href); location.href = "https://www.baidu.com/s?wd=JackAfan"; }
// replace(); 替换地址栏信息 location.replace("https://www.zhihu.com/search?type=content&q=JackAfan");
他们两个都是一样的,都是跳转页面
// reload() 刷新 location.reload();
location.href = location.href;
刷新页面
Jack 运用设置可以跳转一些搜索网址
成功一定有方法,失败一定有原因