BOM的基本概念

最新推荐文章于 2023-10-04 20:34:17 发布

好好睡觉好好学习好好吃饭

最新推荐文章于 2023-10-04 20:34:17 发布

阅读量892

点赞数 1

分类专栏： Javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_46273011/article/details/123677946

版权

Javascript 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

BOM是浏览器和JS的接口,浏览器窗口window。具有属性（值）和方法（变量）。

window的属性

全局变量

各个js文件中的全局变量是共享的，也就是说不同js文件的中的变量并不隔离

    <script>
        var a= 10;
        // 10
        console.log(window.a);
        // true
        console.log(window.a==a);
    </script>

    <script src="js/js1.js"></script>
    <script src="js/js2.js"></script>

window的尺寸属性

   <script>
        console.log("包括滚动条的内宽"+window.innerWidth);
        // 外宽是含有边框
        console.log("包含滚动条的外宽"+window.outerWidth);
        console.log(" 不包括滚动条的内宽"+document.documentElement.clientWidth);
    </script>

window的卷动属性

window.scrollY只能读不能写，代表滚动条已经滚动过的距离。

document.documentElement.scrollTop能读能写。

    <script>

        window.onscroll= function()
{
    console.log("window.scrollY"+window.scrollY);
        console.log("scrollTop"+document.documentElement.scrollTop);
}       
    </script>

navigator

   <script>
        // 浏览器的名称
        console.log(navigator.appName)
        // 浏览器的版本
        console.log(navigator.appVersion)
        // 用户代理商
        console.log(navigator.userAgent)
        // 造作平台，系统
        console.log(navigator.platform)
    </script>

history

//第一个html
<body>
    <a href="历史.html">去历史页面</a>
    
</body>

//第二个连接的网页
    <h1>我是历史</h1>
    <button id="btn">回退</button>
    <script>
        // 回退到刚刚跳过来的页面
        var oBtn =document.getElementById("btn");
        oBtn.onclick =function(){
            // history.back();
            history.go(-1);
        }

    </script>

location

   <button id="btn1">去CSDN</button>
    <button id="btn2">重新加载</button>

    <script>
        var oBtn1 = document.getElementById("btn1");
        var oBtn2 = document.getElementById("btn2");
        oBtn1.onclick =function(){
            window.location="https://blog.csdn.net/weixin_46273011/article/details/123615043";
        }
        oBtn2.onclick =function(){
            window.location.reload(true);
        }
    </script>

window的方法

内置函数

 <script>
        // true
        console.log(window.setInterval==setInterval);
    </script>

window窗口的事件

窗口大小改变事件

window.onresize = function（）{}

  <script>
        window.onresize= function(){
            alert("窗口大小改变了");
        }
    </script>

窗口卷动事件

window.onscroll = function（）{}

    <style>
        body{
            height: 2000px;
        }
    </style>
</head>
<body>
    <script>

        window.onscroll= function()
{
    console.log("window.scrollY"+window.scrollY);
        console.log("scrollTop"+document.documentElement.scrollTop);
}       
    </script>

BOM动画特效

案例一：返回页面顶部

    <style>
        body {
            height: 2000px;
            background-image: linear-gradient(to bottom, red ,orange, yellow, green, blue, pink);
        }
        #btn{
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
    <button id="btn">按钮</button>
    <script>
        // var  document.documentElement.scrollTop=0;
        var timer;
        var oBtn =document.getElementById("btn");
        oBtn.onclick=function(){
            clearInterval(timer);
            // 对滚动条记时的计时器timer，把滚动条的数值存在再timer中
            timer =  setInterval(function(){
               document.documentElement.scrollTop+=10;
            //    定时器停止的条件，放在定时器的function内
               if( document.documentElement.scrollTop>2000){
                clearInterval(timer);
            }
            },20)
        }
    </script>

案例二：导航楼

点击导航楼，自动跳转到页面的位置

思路：寻找到导航内容的值(设置li的data-n，通过节点元素.getAttribute("data-n"))，再找到与该值相对于其内容(document.querySelector(".content-part[data-n="+ n +"]"))，获取其内容到页面顶部的值(使用节点元素.offsetTop),最后设置滚动条需要滚动的位置（document.documentElement.scrollTop）

移动到页面的位置，对于的导航楼的内容改变

移动到页面的内容，滚动条的位置与各个模块元素到页面顶端的距离关系比较，获得楼层位置

 <style>
        *{
            padding:0;
            margin: 0;
        }
        .content-part {
            margin: 10px auto ;
            background-color: aquamarine;
            width: 500px;
        }
        .content-part:first-child{
            margin-top: 0;
        }
        ul{
            width: 100px;
            height: 200px;
            position: fixed;
             right: 0;
            top: 50%;
            margin-top: -100px;
        }
        li{
            /* text-decoration: none; */
            list-style: none;
        }
        li.cur{
          color: red;
        }
    </style>
</head>
<body>
    <section class="content-part" style="height:525px"  data-n ="道德"  >道德栏目</section>
    <section class="content-part" style="height:456px" data-n ="智力">智力栏目</section>
    <section class="content-part" style="height:545px" data-n ="体育" >体育栏目</section>
    <section class="content-part" style="height:425px" data-n ="美术">美术栏目</section>
    <section class="content-part" style="height:324px" data-n ="劳动">劳动栏目</section>
    <section class="content-part" style="height:885px"data-n ="素质" >素质栏目</section>
    <ul id="daohang"> 
        <li data-n ="道德" >道德栏目</li>
        <li data-n ="智力" >智力栏目</li>
        <li data-n ="体育" >体育栏目</li>
        <li data-n ="美术" >美术栏目</li>
        <li data-n ="劳动" >劳动栏目</li>
        <li data-n ="素质" >素质栏目</li>
    </ul> data-n = 
     <script>
        //  导航塔选择哪一个，就去页面内容哪里
         var oDaohang = document.getElementById("daohang");
         
        //  存储各个内容到页面的距离
        var content_scrollToparr=[];
        // 获得所有的类标签要用querySelectorAll，querySelector是一个标签
        var content =document.querySelectorAll(".content-part");
        var oLi =document.querySelectorAll("#daohang li");
     
        console.log(oLi)
         oDaohang.onclick= function(e){
            if( e.target.tagName.toLowerCase()=="li");
             var n=e.target.getAttribute("data-n");
             var contentpart =document.querySelector(".content-part[data-n="+ n +"]");
             document.documentElement.scrollTop =  contentpart.offsetTop;
         }

       for(var i=0;i<content.length;i++){
         content_scrollToparr.push(content[i].offsetTop);
            
        }
        var floor_now =-1;
        // 便于最后一项比较推入无穷大,对于代码的实际运行好像不存在影响
        content_scrollToparr.push(Infinity);
        // console.log(content_scrollToparr);

        // 滚动条事件
         window.onscroll= function(){
            //  获得滚动条当前的到页面顶端位置
             var scroll = document.documentElement.scrollTop
            //  滚动条滚动的距离和元素到顶点的距离是不一样的
             console.log("鼠标scroll",scroll)
             console.log("元素到页面顶点的距离",content_scrollToparr[2])
            //  一个值与数组的值比较
            for(var j=0;j<content.length;j++){
         
                if(scroll>=content_scrollToparr[j]&&scroll<content_scrollToparr[j+1]){
                    // console.log(j);
                    break;
                }
              
            }
            // 要去掉第一个部分头部的margin，非则滚动条在1到10之间，就会显示其他定位数字，j作为定位数字
       
            // 节流
            if (floor_now !=j){
                floor_now =j
        //    直接给当前的元素添加类，后面移动到另一个元素，当前元素的类名无法去除，所以要用循环语句
            console.log("最后",floor_now);


            oLi[floor_now].className ="cur";
            for (var k =0;k<oLi.length;k++){
                    console.log("k",k);
                    console.log("oLi.length",oLi.length);
                    // 判断和赋值的区别
                if(k==floor_now){ 
                    oLi[k].className="cur";

                }
                else{
                    oLi[k].className="";
                }
            }

            }
              

       
         };
     </script>