JavaScript BOM

最新推荐文章于 2024-03-13 19:35:06 发布

禾子不枯萎

最新推荐文章于 2024-03-13 19:35:06 发布

阅读量228

点赞数

文章标签： javascript firefox 开发语言

本文链接：https://blog.csdn.net/haojieji/article/details/126512660

版权

BOM

概况：

浏览器对象模型
BOM可以让我们通过JS来操作浏览器
在BOM中提供了一组对象用来完成对浏览器操作
BOM对象
widow：代表整个浏览器的窗口，同时window使网页中的全局对象

Navigator：代表当前浏览器信息，通过该对象可以识别不同浏览器

Location：代表当前浏览器的地址栏信息，通过它获取地址栏信息或操作浏览器页面跳转

History：浏览器的历史记录，可以通过它来操作浏览器历史记录，由于隐私问题该对象不能获取具体的历史纪录，只能通过浏览器向前或向后翻页，而且该操作只在当次访问有效

Screen:代表用户屏幕信息，通过它可以获取到用户显示器的相关信息
（这些BOM对象都是作为window对象的属性保存，可以通过window对象使用，也可以直接使用console.log(location);)

Navigator
代表当前浏览器信息，通过该对象可以识别不同浏览器
由于历史原因，Navigator对象大部分属性都已经不能帮助我们识别浏览器。一般只会使用userAgent （返回由客户机发送服务器的 user-agent 头部的值。userAgent是一个字符串，其中包含有用来描述浏览器内容，不同浏览器有不同的userAgent ,举例Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.2; SV1; .NET CLR 1.1.4322)。）console.log(navigator.userAgent);
在这里插入图片描述
判断浏览器

 var ua=navigator.userAgent;
        if(/firefox/i.test(ua)){
            alert("你是火狐浏览器");
        }else if(/chrom/i.test(ua)){
            alert("chrom");
        }else if(/mise/i.test(ua)){
            alert("IE浏览器");
        }else if("ActiveXObject" in window){
            //如果通过userAgent不能判断，还可以通过浏览器中特有的对象来判断
            alert("是IE11浏览器")
        }

History
通过浏览器向前或向后翻页，仅限当次

  window.onload=function(){
        //length返回浏览器历史列表中的 URL 数量，但是一关闭就没
        console.log(history.length);

        //back退回上一个页面，作用和浏览器回退按钮相同
        history.back;
        //forward() 加载 history 列表中的下一个 URL。 
        history.forward;
        //go() 加载 history 列表中的某个具体页面。 
        //需要一个整数来跳转，1，表示向前跳转一个页面；-2是向后跳两个页面
        history.go(-1);
        }

Location
代表当前浏览器的地址栏信息

 //直接打印location直接获取完整路径
            console.log(location);
            //如果直接将location属性修改为一个完整路径，或相对路径则我们页面会直接自动跳转到该路径，并生成相应历史记录
            location="http://www.baidu.com";
            location="start.html";
            //assign() 跳转到新的文档，作用和直接修改location相同
            location.assign("http://www.baidu.com");
            //reload() 重新加载当前文档,作用和刷新按钮相同，若在方法中传递true，会强制清空缓存刷新页面
            location.reload(true);
            //replace() 用新的文档替换当前文档,调用完毕会跳转页面，不会生成历史记录，不能使用回退按钮回退
            location.replace("start.html");
        }

widow
代表整个浏览器的窗口，同时window使网页中的全局对象

定时调用 setInterval和clearInterval
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式
clearInterval() 取消由 setInterval() 设置的 timeout。

    <h1 id="count"></h1>

    <script>
        //setIntervalsetInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 
        //参数：1，回调函数，该函数每隔一段时间就会被调用；2，调用间隔的时间，单位是毫秒
        //返回值：是一个number类型的数据，这是定时器的唯一标识
        var num=1;
        var count=document.getElementById("count");
        var timer=setInterval(function(){ 
            count.innerHTML=num++;
            if(num==11){
                clearInterval(timer)//关闭定时器，需要一个定时器作为参数，关闭对应的定时器
            }
        },500)
    </script>

相关练习：图片自动切换

<style>
        img{
            width: 200px;
            height: 200px;
        }
    </style>
    <script>
        window.onload=function(){
            var img1=document.getElementById("img1");
            var imgArr=["tupian/1.jpg","tupian/2.jpg","tupian/3.jpg","tupian/4.jpg"]
            var index=0;
            var btn01=document.getElementById("btn01");
            var btn02=document.getElementById("btn02");
            var time1;
            //点击btn01图片开始切换
            btn01.onclick=function(){
                //防止多点，开启多个定时器，使图片切换过快
                clearInterval(time1);
                time1=setInterval(function(){
                index++;
                if(index<imgArr.length){
                    
                }else{
                    index=0;
                    
                }//也可以index = index % imgArr.length;
                img1.src=imgArr[index];
            },1000)
            }
            //点击btn02图片停止切换
            btn02.onclick=function(){
                //clearInterval可以接收任何参数不会报错
                clearInterval(time1);
            }
            
        }
    </script>
</head>
<body>
    <img id="img1" src="tupian/1.jpg" alt=""><br/>
    <button id="btn01">点击一下开始</button>
    <button id="btn02">STOP</button>
</body>

tips：之前通过按键来控制盒子的方向和速度，这样会导致盒子速度比较卡顿，通过计时器可以使速度顺滑，下面是代码

 var speed=10;
            var dir=0
            //开启定时器控制移动
            setInterval(function(){
                switch(dir){
                    case 37:
                        box1.style.left=box1.offsetLeft-speed+"px";
                        break;
                    case 38:
                        box1.style.top=box1.offsetTop-speed+"px";
                        break;
          
                    case 39:
                        box1.style.left=box1.offsetLeft+speed+"px";
                        break;
                    case 40:
                        box1.style.top=box1.offsetTop+speed+"px";
                        break;
                }

            },30)
            //按键控制方向
            document.onkeydown=function(event){
                event=event||window.event;
                var box1=document.getElementById("box1");

                

                //按下CTRL速度加快
                if(event.ctrlKey){
                    speed=50;
                }else{
                    speed=10;
                }

                //left 37;up 38; right 39;down 40
               
                dir=event.keyCode;
            }

            document.onkeyup=function(){
                dir=0;
            }

延时调用 setTimeout clearTimeout

 //setTimeout()延时调用，隔一段时间以后再执行，且只会执行一次
        //延时调用和定时调用可以相互代替
        var time2=setTimeout(function(){
            console.log(num++);
        },3000);

        //clearTimeout关闭一个延时调用
        clearTimeout(time2);

禾子不枯萎

关注

0
点赞
踩
0

收藏

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

由于历史原因，Navigator对象大部分属性都已经不能帮助我们识别浏览器。userAgent是一个字符串，其中包含有用来描述浏览器内容，不同浏览器有不同的userAgent ,举例Mozilla/4.0 (compatible;tips：之前通过按键来控制盒子的方向和速度，这样会导致盒子速度比较卡顿，通过计时器可以使速度顺滑，下面是代码。代表整个浏览器的窗口，同时window使网页中的全局对象。代表当前浏览器信息，通过该对象可以识别不同浏览器。通过浏览器向前或向后翻页，仅限当次。相关练习：图片自动切换。.
复制链接

扫一扫