day10-BOM

最新推荐文章于 2023-06-26 19:56:46 发布

土豆沙发

最新推荐文章于 2023-06-26 19:56:46 发布

阅读量114

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/kuangjianming/article/details/114707384

版权

JavaScript 专栏收录该内容

17 篇文章 1 订阅

订阅专栏

BOM介绍

JavaScript的组成：ECMAScript+BOM+DOM
ECMAScript：js中核心语法
BOM：浏览器对象模型，主要提供一些操作浏览器的方法和属性
DOM：文档对象模型，主要提供一些操作文档的属性和方法
window BOM：范畴中的顶级对象，es中的全局对象
es中的全局对象：当全局定义了一个变量的时候，那么会把这个变量存储在window对象中

作用

【1】获取浏览器的窗口消息
【2】可以操作浏览器的地址信息
【3】操作浏览器的滚动条的信息
【4】查看浏览器的版本信息
【5】可以操作浏览器中历史记录

获取浏览器的窗口尺寸

window.innerWidth 获取浏览器可视区域的宽度
window.innerHeight 获取浏览器可视区域的高度
window.outerWidth 获取浏览器的宽度
window.outerHeight 获取浏览器的高度

滚动条相关的属性和事件

window.onscroll 滚动事件，当浏览器的滚动条在滚动的时候会触发这个事件
获取滚动条滚动中，页面被卷去的高度：
【1】document.documentElements.scrollTop 如果HTML页面没有的时候获取不到数据，值一直为0
【2】document.body.scrollTop 如果页面有的时候获取不到值
【3】scrollY 不存在兼容，获取页面被卷去的高度，scrollX 页面被卷去的宽度

 btn.onclick = function () {
 // scrollTo() 设置滚动条中页面被卷去的宽高
 // 参数：一般情况下 给两个参数，参数1 为水平卷去高度，参数2 为垂直卷去的高度
 //  scrollTo(0, 0);
 // 参数还可以设置为对象
 //会一瞬间就回到顶部
 // scrollTo({ top: 0});
 // 给回到顶部添加一个动画的行为
 // 在没有behavior: "smooth" 之前，用定时一点一点改变 scrolly的值
       scrollTo({ top: 0, behavior: "smooth" });
 // scrollTo 和 scrollBy 参考位置不一样
 // scrollTo 的参考位置为 滚动条的最顶部
 // scrollBy 的参考位置为滚动条的当前位置，当值为正数的时候滚动往下走，
 //当值为负数的时候 滚动条的往上走
 // scrollBy({ top: -100 });
 };

系统弹窗

【1】alert（）简单的弹窗
【2】prompt（）有输入框的弹窗
【3】confirm（）确认弹窗
【4】open（）打开页面
【5】close（）关闭页面

location属性

location：操作浏览器地址栏的一个属性（对象）
属性：
【1】hash：获取或者设置地址的哈希值（#后面的值）
【2】host：域名
【3】href：获取或者设置url地址栏中的地址
【4】origin：拿到不包括参数和哈希值的地址
【5】protocol：获取地址的协议
【6】search：获取或者设置地址的参数（？后面的值）
方法：
【1】reload（）重新加载
【2】replace（）替换
更改地址栏的地址：
【1】open(“url地址”)
【2】location.replace(‘url地址’)
【3】location.href = ‘url地址’

 // var btn = document.getElementById("btn");
            // btn.onclick = function () {
            //     location.reload();
            // };

            // var btn1 = document.getElementById("btn1");
            // btn1.onclick = function () {
            //     location.replace("https://www.taobao.com");
            // };

实现楼层效果案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        body,
        html {
            width: 100%;
            height: 100%;
            position: relative;
        }

        div {
            width: 100%;
            height: 100%;
        }

        div:nth-of-type(1),
        #btn1 {
            background-color: aqua;
        }

        div:nth-of-type(2),
        #btn2 {
            background-color: red;
        }

        div:nth-of-type(3),
        #btn3 {
            background-color: rgb(53, 29, 185);
        }

        div:nth-of-type(4),
        #btn4 {
            background-color: rgb(143, 10, 77);
        }

        div:nth-of-type(5),
        #btn5 {
            background-color: rgb(203, 243, 24);
        }

        button {
            width: 50px;
            height: 30px;
            cursor: pointer;
            outline: none;
        }

        .btn {
            position: fixed;
            background-color: black;
            left: 100px;
            top: 40%;
            width: 50px;
            height: auto;
        }
    </style>
</head>

<body>

    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
    <div id="box4"></div>
    <div id="box5"></div>

    <div class="btn">
        <button id="btn1">按钮1</button>
        <button id="btn2">按钮2</button>
        <button id="btn3">按钮3</button>
        <button id="btn4">按钮4</button>
        <button id="btn5">按钮5</button>
    </div>
    <script>
        var h1 = window.innerHeight;
        window.onload = function () {
            var btns = document.getElementsByTagName("button");
            //console.log(btns);
            btns = Array.from(btns); //把btns变成真数组，然后可以使用forEach方法
            //console.log(btns);
            btns.forEach(function (item,index) {
                item.onclick = function () {
                    var h=h1*index;
                    scrollTo(
                        {
                            top:h,behavior:"smooth"
                        })                   
                }
            })
        }
   
    </script>
</body>
</html>

实现淘宝顶部通栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body,
        html {
            width: 100%;
            height: 3000px;
        }

        #box1 {
            width: 100%;
            height: 100px;
            background-color: yellow;
        }

        #box2 {
            width: 100%;
            height: 80px;
            background-color: aqua;
            padding-top: 40px;
        }

        input {
            width: 500px;
            height: 30px;
            display: block;
            /* left: 0; */
            margin: 0 auto;

        }
    </style>
</head>

<body>
    <div id="box1"> </div>
    <div id="box2">
        <input type="text" id="txt">
    </div>
    <script>
        var txt = document.getElementById('txt');
        window.onscroll = function () {
            if (scrollY >= 240) {
                txt.style.position = "fixed";
                txt.style.top = 0;
                txt.style.left=0;
                txt.style.right=0;
            } else {
                txt.style.position = "static";
            }

        }
    </script>
</body>

</html>

土豆沙发

关注

0
点赞
踩
0

收藏

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

BOM介绍JavaScript的组成：ECMAScript+BOM+DOMECMAScript：js中核心语法BOM：浏览器对象模型，主要提供一些操作浏览器的方法和属性DOM：文档对象模型，主要提供一些操作文档的属性和方法window BOM：范畴中的顶级对象，es中的全局对象es中的全局对象：当全局定义了一个变量的时候，那么会把这个变量存储在window对象中作用【1】获取浏览器的窗口消息【2】可以操作浏览器的地址信息【3】操作浏览器的滚动条的信息【4】查看浏览器的版本信息【5
复制链接

扫一扫

专栏目录