BOM

heyuhan0000

于 2018-11-06 21:30:56 发布

阅读量340

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/sage201551/article/details/83794731

版权

JavaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

一、BOM（Browser Object Model）

BOM是指浏览器对象模型，用于描述对象与对象之间层次关系的模型
BOM提供了独立于内容、可以与浏览器窗口进行互动的对象结构
BOM的组成：
windows对象：（全局对象）
window对象表示浏览器中打开窗体，提供关于窗口状态的信息。
方法：

<script type="text/javascript">
    (function () {
        console.log(window);
        console.log(window.__proto__);
        console.log(typeof (window) );

    })();
</script>

运行结果：
在这里插入图片描述
1、setTimeout方法：
程序一：

<script type="text/javascript">
    (function () {
        var fn = function () {
            var current = new Date();
            var s ="";
            s+=current.getFullYear()+"年";
            s+=current.getMonth()+"月";
            s+=current.getDate()+"日";
            s+=current.getHours()+"时";
            s+=current.getMinutes()+"分";
            s+=current.getSeconds()+"秒"
            s+=current.getMilliseconds()+"毫秒";
            console.log(s);
            window.setTimeout(fn,1000);
        }
        fn();
    })();
</script>

运行结果：
在这里插入图片描述
程序二：

   
        <script type="text/javascript" >
            (
                function () {
                    // 任意一个被执行的函数内部都有一个名称的 arguments 的"类数组"对象，用来接受调用函数时实际传入的参数
                    // console.log( arguments );
                    // 任何函数内部的 arguments 内都有一个 callee 属性用来获取当前函数的引用
                    // console.log( arguments.callee );

                    console.log( Date.now() );
                    // 让当前函数在指定的时间延迟后再度执行，可以使用 setTimeout ，同时在 setTimeout 第一个参数中传入 当前函数的引用
                    setTimeout( arguments.callee , 1000 );
                }
            )();
        </script>

运行结果：
2、scroll方法：
程序一：

    <script type="text/javascript" >
        (function () {

            var fn = function () {
                window.scrollBy( 0 , 10 ) ; // x : 表示左右方向 , y : 表示上下方向
            };

            // 通过循环创建并设置20个div，并将他们添加到页面上
            for( var i = 1 ; i <= 20 ; i++ ){
                // 创建一个 div 元素
                var d = document.createElement( "div" );

                // 通过判断 i  是奇数还是偶数来来为 新创建的 div 添加 class 属性值
                if( i % 2 == 1 ){
                    d.classList.add( "odd" );
                } else {
                    d.classList.add( "even" );
                }

                d.innerHTML = i ; // 将 数字 i  放入到 新创建的 div 中

                d.addEventListener( "click" , fn , false );

                // 取页面上的 body 元素
                var b = document.querySelector( "body" ); // 标记选择器
                // 将已经创建并设置好样式的div追加到页面上(追加到 body 的内部的最后面)
                b.appendChild( d ) ;
            }

        })();
    </script>

程序二：

 <body>

        <h2>BOM : window </h2>

        <h5>通过 scrollBy 函数让页面内容实现自动滚动</h5>

        <h5>由 window 对象提供的 scrollBy( x : number , y : number ) 函数可以让页面实现滚动效果</h5>
        <h5>scrollBy 的第一个参数表示 左右方向 的移动，正数表示向右滚动，负数表示向左滚动</h5>
        <h5>scrollBy 的第二个参数表示 上下方向 的移动，正数表示向下滚动，负数表示向上滚动</h5>
        <h5>scrollBy( 0 , 10 ) 表示一次向下移动10像素</h5>

    </body>
    <script type="text/javascript" >
        (function () {



            // 通过循环创建并设置20个div，并将他们添加到页面上
            for( var i = 1 ; i <= 20 ; i++ ){
                // 创建一个 div 元素
                var d = document.createElement( "div" );

                // 通过判断 i  是奇数还是偶数来来为 新创建的 div 添加 class 属性值
                if( i % 2 == 1 ){
                    d.classList.add( "odd" );
                } else {
                    d.classList.add( "even" );
                }

                d.innerHTML = i ; // 将 数字 i  放入到 新创建的 div 中

                // 取页面上的 body 元素
                var b = document.querySelector( "body" ); // 标记选择器
                // 将已经创建并设置好样式的div追加到页面上(追加到 body 的内部的最后面)
                b.appendChild( d ) ;
            }

            var fn = function () {
                scrollBy( 0 , 1 ) ; // 0 : 表示左右方向不动 , 1 : 表示向下滚动一个像素
                setTimeout( fn , 1 );
            };

            fn();

        })();
    </script>

程序三：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <meta charset="UTF-8">
        <title>BOM: window</title>
        <link rel="shortcut icon" href="/yangying.jpg" type="image/jpeg">

        <style type="text/css">
            body { margin: 0px ; padding: 0px ; }
            /* 并联选择器 ( 分组选择器 / 组合选择器 ) */
            .odd , .even { height: 200px ; text-align: center ; line-height: 200px ; font-size: 80px ; }
            .odd { border: 1px solid blue ; background: #ececec ; }
            .even { border: 1px solid green ; background: #FFFF00 ; }
        </style>
    </head>
    <body>

        <h2>BOM : window </h2>

        <h5>通过 scrollTo 函数让页面内容滚动到指定位置</h5>

        <h5>由 window 对象提供的 scrollTo( leftOffset : number , topOffset : number ) 函数可以让页面滚动到指定位置</h5>
        <h5>scrollTo 的第一个参数表示离网页左侧边缘的偏移量(offset)</h5>
        <h5>scrollTo 的第二个参数表示离网页顶部边缘的偏移量(offset)</h5>
        <h5>scrollTo( 0 , 1000 ) 表示页面滚动到 距离顶部边缘 1000 像素的位置( 左右不动 )</h5>

    </body>

    <script type="text/javascript" >
        (function () {

            var fn = function () {
                console.log( "hello" );
                scrollTo( 0 , 1000 ); // window.scrollTo( 0 , 1000 );
            };

            // 通过循环创建并设置20个div，并将他们添加到页面上
            for( var i = 1 ; i <= 20 ; i++ ){
                // 创建一个 div 元素
                var d = document.createElement( "div" );

                // 通过判断 i  是奇数还是偶数来来为 新创建的 div 添加 class 属性值
                if( i % 2 == 1 ){
                    d.classList.add( "odd" );
                } else {
                    d.classList.add( "even" );
                }

                d.innerHTML = i ; // 将 数字 i  放入到 新创建的 div 中

                d.addEventListener( "click" , fn , false );

                // 取页面上的 body 元素
                var b = document.querySelector( "body" ); // 标记选择器
                // 将已经创建并设置好样式的div追加到页面上(追加到 body 的内部的最后面)
                b.appendChild( d ) ;
            }

        })();
    </script>

</html>

程序四：

 <body>

        <h2>BOM : window </h2>

        <h5>通过 scrollTo 函数让页面内容实现自动滚动</h5>

    </body>

    <script type="text/javascript" >
        (function () {

            // 取页面上的 body 元素
            const b = document.querySelector( "body" ); // 标记选择器

            // 通过循环创建并设置20个div，并将他们添加到页面上
            for( var i = 1 ; i <= 20 ; i++ ){
                // 创建一个 div 元素
                var d = document.createElement( "div" );
                // 通过判断 i  是奇数还是偶数来来为 新创建的 div 添加 class 属性值
                if( i % 2 == 1 ){
                    d.classList.add( "odd" );
                } else {
                    d.classList.add( "even" );
                }
                d.innerHTML = i ; // 将 数字 i  放入到 新创建的 div 中
                // 将已经创建并设置好样式的div追加到页面上(追加到 body 的内部的最后面)
                b.appendChild( d ) ;
            }

            var total = b.offsetHeight ; // 当页面上的元素都添加成功后可以通过 body 的 offsetHeight 来获取其实际高度

            var topOffset = 1 ; // 声明一个用来表示需要滚动到那个位置的变量

            var down = function () {
                console.log( topOffset );
                scrollTo( 0 , topOffset ); // 将页面滚动到指定位置
                topOffset++ ; // 累加一个像素表示每次向下移动一个像素
                if( topOffset < total ) {
                    setTimeout(down, 1 ); // 在 1毫秒延迟之后再次执行 fn 这个函数
                }
            };
            down();

            /*
            var up = function () {
                scrollTo( 0 , topOffset );
                topOffset-- ;
                if( topOffset > 0 ) {
                    setTimeout(up, 1 );
                }
            };
            */

        })();
    </script>

screen对象：获取某些关于用户屏幕的信息

<script type="text/javascript">
    (function () {
        console.log(screen );
        console.log(typeof screen );
        console.log(screen.__proto__);
        console.log("\n");
        console.log(screen.height );//屏幕的宽高
        console.log(screen.width );
        console.log("\n");
        console.log(screen.availHeight );//屏幕的实际高宽（任务栏也要占高度）
        console.log(screen.availWidth );

    })();

</script>

运行结果：
在这里插入图片描述

navigator对象：

 <script type="text/javascript" >
            ( function () {

                console.log( navigator );

                console.log( typeof( navigator ) );

                console.log( navigator.__proto__ );

                console.log( "\n~~~~~~~~~~~~~~~~~~~~\n" );

                for( var k in navigator ){
                    console.log( "\t" + k + " : " + navigator[ k ] );
                }

                console.log( "\n~~~~~~~~~~~~~~~~~~~~\n" );

                console.log( navigator.userAgent );

            })();
        </script>

运行结果：
在这里插入图片描述

location对象：表示当前页面的URL地址

 <script type="text/javascript" >
            ( function () {

                console.log( location );

                console.log( typeof( location ) );

                console.log( location.__proto__ );

                console.log( "\n" );

                console.log( "协议: " + location.protocol );
                console.log( "主机名称: " + location.hostname );
                console.log( "端口: " + location.port );
                console.log( "资源路径: " + location.pathname );
                console.log( "查询字符型: " + location.search );

                console.log( "\n" );
                // href : Hypertext Reference
                console.log( "URL : " + location.href );

            })();
        </script>
            <body>

        <h2>BOM : location </h2>

        <h5>查看 location 实例的类型</h5>

        <script type="text/javascript">
            function jump () {
                // 通过修改 location 的 href 属性的值来更改 地址栏中的地址，从而实现页面跳转
                location.href = "http://www.baidu.com";
            }
        </script>
        <div style="background: #FFFF00; height: 200px ; " onclick="jump()">

        </div>

    </body>

运行结果：
在这里插入图片描述

未完待续。。。。。。。。。。。。。。。。。

heyuhan0000

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
BOM

一、BOM（Browser Object Model）BOM是指浏览器对象模型，用于描述对象与对象之间层次关系的模型BOM提供了独立于内容、可以与浏览器窗口进行互动的对象结构BOM的组成：windows对象：（全局对象）window对象表示浏览器中打开窗体，提供关于窗口状态的信息。方法：&lt;script type="text/javascript"&gt; (fu...
复制链接

扫一扫

专栏目录