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 运用设置可以跳转一些搜索网址

posted @ 2020-08-31 10:01 JackAfan 阅读(120) 评论(0) 编辑收藏举报

刷新页面返回顶部

JackAfan

BOM