BOM基础操作

最新推荐文章于 2023-03-18 12:35:52 发布

LyaJpunov

最新推荐文章于 2023-03-18 12:35:52 发布

阅读量244

点赞数

分类专栏： # JavaScript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_43903639/article/details/121620388

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BOM概述

BOM即浏览器对象模型，它是浏览器厂商自己定义的，独立于内容而与浏览器窗口交互

BOM存在很多兼容性问题，我们主要学一些没有兼容性问题的操作

窗口加载事件

当文档内容完全加载完成会触发该事件，这样的话script就没必要写在整个文档的结尾部分，三种方式，推荐使用最后一种方式

<body>
    <script>
        // 传统的注册方式 这个函数只能写一次，如果写了多个只执行最后一个
        window.onload = function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('点击我');
            })
        }
    </script>
    <button>电机</button>
</body>

<body>
    <button>电机</button>
    <script>
    	// 新的注册方式
        window.addEventListener('load',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('点击我');
            })
        })
    </script>
</body>

<body>
    <button>电机</button>
    <script>
    	// 好的方式，IE9以上支持 当DOM加载完成时，不包括样式表，图片，flash等，就可以触发该事件
        window.addEventListener('DOMContentLoaded',function(){
            var btn = document.querySelector('button');
            btn.addEventListener('click',function(){
                alert('点击我');
            })
        })
    </script>
</body>

调整窗口大小事件

<script>
    window.addEventListener('resize',function(){
    // 只要窗口的像素发生了变化，就会触发这个事件
    console.log('OK')
    // 获得当前窗口的宽度
    console.log(window.innerWidth)
    // 获得当前窗口的高度
    console.log(window.innerHeight)
    })
</script>

定时器

window.setTimeout(function()，[延迟的毫秒数])

window.setInterval(function()，[延迟的毫秒数])

<script>
    // 延迟事件单位是毫秒，但是可以省略
    // 这个调用函数可以直接写函数
    var time1 = setTimeout(function(){
    	console.log('ok');
    },2000);

    // 也可以写函数名
    // 页面中有很多计时器，我们经常给计时器加标志服
    function callback(){
    	console.log('ok');
    }
    var time2 = setTimeout(callback,4000);
</script>

<script>
    // 每隔多长时间就去调用回调函数
    setInterval(function(){
        console.log('OK')
    },2000)
</script>

五秒后自动关闭的广告案例

<body>
    <div></div>
    <script>
        div = document.querySelector('div');
        setTimeout(function(){
            div.style.display = 'none';
        },5000)
    </script>
</body>

停止定时器

window.clearTimeout(timeoutID)

window.clearInterval(timeoutID)

这个timeoutID最好全部定义为全局变量，进行全局访问

<body>
    <button>停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var time = setTimeout(function(){
            console.log('ok');
        },5000)
        btn.addEventListener('click',function(){
            clearTimeout(time);
            this.disabled = true;
        })
    </script>
</body>

倒计时案例

<body>
    <div>
        <span class="day">0</span>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = new Date('2021-11-28 16:40:10')
        // 先调用一次这个函数，不刷新123
        countDown()
        setInterval(countDown,1000);	
        function countDown() {
            var newTime = new Date();
            var times = (inputTime - newTime)/1000;
            console.log(times)
            var d = parseInt(times / 60 / 60 / 24);
            d = d < 10 ? '0' + d : d;
            day.innerHTML = d;
            var h = parseInt(times / 60 / 60 % 24);
            h = h < 10 ? '0' + h : h;
            hour.innerHTML = h;
            var m = parseInt(times / 60 % 60);
            m = m < 10 ? '0' + m : m;
            minute.innerHTML = m;
            var s = parseInt(times % 60);
            s = s < 10 ? '0' + s : s;
            second.innerHTML = s;
        }
    </script>
</body>

URL

location对象属性	返回值
`location.href`	获取或者设置整个url
`location.host`	返回主机域名
`location.port`	返回端口号，若没写返回空字符
`location.pathname`	返回路径
`location.search`	返回参数
`location.hash`	返回片段 #后面参数常见于链接锚点

<body>
    <div></div>
    <script>
        console.log(location.search)// ?username=andy
        var params = location.search.substr(1); // username=andy
        var arr = params.split('=');
        var div = document.querySelector('div');
        div.innerHTML = arr[1] + '欢迎你'
    </script>
</body>

location对象方法	返回值
`location.assign()`	和href一样可以跳转页面，也可以重定向
`location.replace()`	替换当前页面，因为不记录历史，所以不能后退页面
`location.reload()`	重新加载页面，相当于刷新f5，如果参数为true则为强制刷新

<body>
    <button>点击</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            // location.assign('https://www.baidu.com')
            // location.replace('https://www.baidu.com')
            location.reload(true)
        })      
    </script>
</body>

Navigator对象

userAgent

获得浏览器的版本号信息，可以得知在哪个浏览器工作（PC端or手机端）

history对象

back()方法 forword()方法 go() 方法

go(1)前进一步 go(-1)后退一步

LyaJpunov

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
BOM基础操作

BOM概述BOM即浏览器对象模型，它是浏览器厂商自己定义的，独立于内容而与浏览器窗口交互BOM存在很多兼容性问题，我们主要学一些没有兼容性问题的操作窗口加载事件当文档内容完全加载完成会触发该事件，这样的话script就没必要写在整个文档的结尾部分，三种方式，推荐使用最后一种方式<body> <script> // 传统的注册方式这个函数只能写一次，如果写了多个只执行最后一个 window.onload = function(){
复制链接

扫一扫