BOM

最新推荐文章于 2024-08-22 18:06:31 发布

鲸渔要加油

最新推荐文章于 2024-08-22 18:06:31 发布

阅读量68

点赞数

分类专栏：基础学习文章标签： js javascript web api

本文链接：https://blog.csdn.net/qq_53283188/article/details/115533276

版权

基础学习专栏收录该内容

63 篇文章 0 订阅

订阅专栏

一、BOM

BOM是浏览器对象模型，BOM包含DOM

1.1 window

window对象是浏览器的顶级对象
是一个全局对象，全局作用域的变量函数都是window对象的属性和方法

二、窗口加载事件

第一种
写在这个里面的代码会等整个页面加载完了再执行，就可以把js放在页面的任何地方，还可以放外部js文件

window.onload = function() {}
只能写一次，以最后一个为准
window.addEventListener('load', function() {});

第二种
这个会当DOM加载完了就执行，不包css，图片，flash
document.addEventListener('DOMContentLoaded', function() {})

三、1.2 调整窗口大小事件

window.onresize = function() {}
window.addEventListener('resize', function() {});
// 如果屏幕大于900就隐藏div盒子
var div = document.querySelector('div');
window.addEventListener('resize', function () {
    if (window.innerWidth > 900) {
        div.style.display = 'none';
    } else {
        div.style.display = 'block';
    }
});

window.innerWidth 当前屏幕的宽度

四、定时器（两种）

setTimeout(调用函数, 延迟的毫秒数)
只执行一次
这个调用函数也叫回调函数
以前我们讲的 element.onclick = function(){} 或者 element.addEventListener(“click”, fn); 里面的函数也是回调函数
setInterval(回调函数, 延迟的毫秒数)
一直执行

4.1 停止定时器
clearTimeout(定时器的名字自己取)
clearInterval(定时器的名字自己取)

五、 location对象

window对象给了我们提供一个location属性用于获取或设置窗体的URL，并且可以用于解析URL，因为返回的是一个对象，所以也称为location对象
在这里插入图片描述

URL
在这里插入图片描述

六、 navigator对象

navigator 对象包含有关浏览器的信息，它有很多属性，我们最常用的是 userAgent，该属性可以返回由客户机发送服务器的 user-agent 头部的值。

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

七、 history对象

window对象给我们提供了一个 history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL
history.forward() 前进
history.back() 后退
history.go() 写 10 或 -9 前进后退多少

🐋鲸渔Time🐱‍👤

倒计时

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 400px;
            margin: 200px auto;

        }

        span {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: skyblue;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }

        .aaa {
            display: inline-block;
            width: 40px;
            height: 40px;
            background-color: skyblue;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 40px;
        }
    </style>
    </style>
</head>

<body>
    <div>
        <span class="day"></span>
        <span class="aaa">天</span>
        <span class="hour"></span>
        <span class="aaa">时</span>
        <span class="minute"></span>
        <span class="aaa">分</span>
        <span class="second"></span>
        <span class="aaa">秒</span>
    </div>
    <script>
        var day = document.querySelector('.day');
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var futureTime = +new Date('2021-4-30 18:00:00');
        //
        countDown();
        setInterval(countDown, 1000);
        function countDown() {
            var nowTime = +new Date();
            var times = (futureTime - nowTime) / 1000;
            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>