Day 17 BOM

最新推荐文章于 2024-07-24 23:00:08 发布

banana tree

最新推荐文章于 2024-07-24 23:00:08 发布

阅读量66

点赞数

文章标签：前端 css javascript

本文链接：https://blog.csdn.net/lemon_shinning/article/details/124907852

版权

BOM是Browser Object Model，一系列与浏览器相关的信息。

window对象

窗口位置	screenLeft返回浏览器窗口左上角相对于当前屏幕左上角的水平距离，不兼容FF（火狐）浏览器
	screenTop返回浏览器窗口左上角相对于当前屏幕左上角的垂直距离，不兼容FF浏览器
	screenX功能同screenLeft，兼容FF
	screenY功能同screenTop，兼容FF
窗口大小	innerWidth返回网页当前窗口中可见部分的宽度，包含滚动条
	innerHeight返回网页当前窗口中可见部分的高度，包含滚动条
	outerWidth返回浏览器窗口宽度，包含浏览器菜单和边框
	outerHeight返回浏览器窗口高度，包含浏览器菜单和边框
打开窗口	window.open()打开一个新的浏览器窗口，接受四个参数（url/打开方式/窗口参数/是否取代当前页面历史记录的布尔值）
打开窗口	window.close()关闭新打开的窗口（仅限open()打开的窗口）

window子对象

screen对象

功能：包含显示设备的信息。

属性列举：screen.height、screen.width返回设备的分辨率。screen.availWidth、screen.availHeight返回屏幕可用宽度，值为屏幕的实际大小减去操作系统某些功能占据的空间，如系统任务栏。

location对象

功能：保存当前文档信息，将URL解析为独立片段。

属性：href返回当前页面完整的URL，修改这个属性，跳转新的页面。

hash返回URL中的hash（#号后跟零或多个字符）

host返回服务器名称和端口号

port返回服务器端口号

pathname返回URL中的目录和文件名

hostname返回不带端口号的服务器名称

protocol返回页面使用的协议（http://或http://）

search返回URL的查询字符串，字符串以问号开头

navigator对象

功能：提供一系列属性用于检测浏览器。

online:是否联网。

userAgent:浏览器嗅探，检测浏览器的类型

history对象

功能：保存用户上网的历史记录。

方法、属性：go()在用户历史记录中任意跳转，接受一个参数，表示前后跳转页数的整数值（后退一页-1，前进一页1），也可串字符串参数，跳转到第一个包含该字符串的位置。

back（）后退

forward()前进

length()属性保存历史记录的数量

BOM案例：页面滚动出现回到顶部的图标，点击回到顶部

首先创建文本内容，创建小火箭。

<body>
    <div class="wrap">liuinxnkald xahcfhuilnclwiuqe hcisXBfenkhdnakhdbkl bcxnhfwn zam ocernjcnsihc</div>
    <div class="hj">&#xe69a;</div>
</body>

然后用css调整他们的位置和样式

<style>
        * {
            margin: 0;
            padding: 0;
            margin: 0 auto;
        }

        @font-face {
            font-family: "huojian";
            src: url(../img/huojian.ttf);
        }

        .wrap {
            width: 500px;
           height: 1700px;
           background-color: pink;
           margin: 0 auto;
        }

        .hj {
           font-family: "huojian";
           position: fixed;
           right: 0;
           bottom: 10px;
           font-size: 50px;
           display: none;
        }
    </style>

最后script内容：因为需要点击小火箭，所以必须先获取小火箭；

然后让页面滚动一定距离后出现小火箭，回到顶部时小火箭消失；

最后就是回到顶部的运动。

<script>
    var hj = document.querySelector(".hj");

    window.onscroll = function(e){
        //当小火箭距离顶部100时，出现小火箭
        if(document.documentElement.scrollTop > 100){
           hj.style.display = 'block';
        }
        //回到顶部，小火箭消失
        else{
           hj.style.display = 'none';
        }
        
    }
    //点击小火箭回到顶部
    hj.onclick = function(){
        move();
    }

    var timer = null;
    function move(){
        //为了防止突变，所以将回到顶部这个步骤分为20次进行
        clearInterval(timer);
        var t = 20;
        var s = document.documentElement.scrollTop;
        var v = s/t;
        var count = 0;
        timer = setInterval(function(){
            count ++;
            s-=v;
            if(t === count){
                clearInterval(timer);
                s = 0;
            }
            document.documentElement.scrollTop = s;
        },30)
    }

    

</script>

banana tree

关注

0
点赞
踩
0

收藏

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

BOM是Browser Object Model，一系列与浏览器相关的信息。window对象窗口位置 screenLeft返回浏览器窗口左上角相对于当前屏幕左上角的水平距离，不兼容FF（火狐）浏览器 screenTop返回浏览器窗口左上角相对于当前屏幕左上角的垂直距离，不兼容FF浏览器 screenX功能同screenLeft，兼容FF screenY功能同screenTop，兼容FF 窗口大小 innerWidth返回网页当前窗口中可见部分的宽度，包含滚动条 inn
复制链接

扫一扫