BOM（浏览器对象、单线程）

2023-10-03 19:47:22

一、BOM：浏览器对象，可以和浏览器窗口进行交互的对象，核心对象是window。

BOM与DOM的区别：

DOM是文档对象模型，把文档当作一个对象来看待，它的*对象是document。

BOM是浏览器对象模型，是把浏览器当做一个对象来看待，它的*对象是window。

1、窗口载入事件（页面载入事件）：

window.onload：是窗口（页面）加载事件，当文档内容（包括图像、脚本文件、CSS文件等）完全加载完成会触发该事件，调用该事件对应的事件处理函数。

document.DOMContentLoaded ： document.DOMContentLoaded加载事件，会在DOM加载完成时触发，这里所说的加载不包括CSS样式表、图片和flash动画等额外内容的加载。

        window.onload = function(){}

        window.addEventListener('load',function(){})

<body onl oad="test()">
    <script>
        // window.addEventListener('load',function(){
        //     alert('页面加载中...')
        // })
        function test(){
            alert('页面加载中...')
        }
    </script>
</body>

2、调整窗口大小事件

window.onresize：当调整window窗口大小的时候，就触发window.onresize事件，调用事件处理函数。

        window.onresize = function(){}

        window.addEventListener('resize',function(){})

window.addEventListener('resize',function(){
            console.log('窗口大小改变了')
        })

3、定时器方法

（1）setTimeout(function(){}，间隔时间):在指定的毫秒数后调用函数或执行一段代码

        var st = setTimeout(func,1000);

示例：倒计时牌

<style>
    div{
        width: 500px;
        margin: 100px auto;
        font-size: 25px;
        color: red;
    }
</style>
<body>
    <!--倒计时牌：今天距离2022年元旦还有：-天-小时-分钟-秒-->
    <div></div>
    <script>
        function showTime(){
            var date1 = new Date('2022-01-01 00:00:00');
            console.log(date1)
            var date2 = new Date();

            var m = date1.getTime()-date2.getTime();
            var times = m/1000;
            var y = parseInt(times/60/60/24/31);
            var d = parseInt(times/60/60/24%30);
            var h = parseInt(times/60/60%24); h= h>=10?h:'0'+h;
            var m = parseInt(times/60%60);m= m>=10?m:'0'+m;
            var s = parseInt(times%60);s= s>=10?s:'0'+s;

            var str = y+'月'+d+'日'+h+':'+m+':'+s
            document.querySelector('div').innerHTML = str;

            setTimeout(showTime,1000)
        }
        window.onload = showTime();
    </script>
</body>

（2）setInterval（）；按照指定的周期（以毫秒计）来调用函数或执行一段代码；（比较常用）

【案例】3s后自动关闭广告                                                             

<script>
       //实现三秒后关闭广告
    //    var timer = setTimeout(func,3000);//只执行一次
       setInterval(func,3000)   //执行多次
       function func(){
           console.log('广告关闭了...')
       }
</script>

（3）clearTimeout（定时器对象）；取消有setTimeout创建的定时器

（4）clearInterval（定时器对象）：取消由setInterval创建的定时器

【案例】60s内只能发送一次短信     

① 在页面中放一个文本框和一个“发送”按钮。 ② 在文本框中输入手机号码，然后单击“发送”按钮，就可以发送短信。 ③ 在按钮单击之后，按钮上的文字会变为“还剩 x 秒再次单击”。                                          
<body>
    <div>
        <label>
            手机号码：
            <input type="text" name="" id="">
            <button id="btn">发送</button>
        </label>
    </div>
    <script>
        
        //1.获取按钮
        var btn = document.querySelector('#btn')
        var time = 60;//定义剩下的秒数
        btn.addEventListener('click',function(){
           
            btn.disabled = true;
            //此处添加倒计时按钮
            //2.创建定时器，：setInveral
        var timer = setInterval(function(){
            if(time == 0){
                //2.1清除定时器
                clearInterval(timer);
                //2.1让按钮可用
                btn.disabled = false;
                //2.3让按钮的文字变成发送
                btn.innerHTML = '重新发送';
                time = 60;
            }else{
                btn.innerHTML = '还剩'+time+'秒';
                time--;
            }
        },1000)
        })
        
    </script>
</body>

 BOM（浏览器对象、单线程） 

setTimeout和setInterval的区别：

setTimeout：执行一次

setInterval：重复执行

二、单线程：js程序是单线程的 ，同一个时间只能做一件事

同步：所谓同步，就是前一个任务结束后再执行后一个任务，程序的执行顺序与任务的排列顺序是一致的、同步的。

console.log(1);  //先输出了1、2
setTimeout(function () {
  console.log(3); //，等待5秒后输出3
}, 5000);
console.log(2);

异步：所谓异步，就是在做一件事件的同时，可以去处理其他的事情。

3、js执行机制：执行栈、任务队列

BOM（浏览器对象、单线程）

console.log(1);
setTimeout(function () {
  console.log(3);
}, 0);
for (var i = 0, str = ''; i < 900000; i++) {
  str += i;	 // 利用字符串拼接运算拖慢执行时间
}
console.log(2);

三、location对象：地址对象

1、URL：统一资源定位符（网址）

（1）protocol:网络协议。http、https、ftp、milto

（2）host：服务器主机名 (如www.baidu.com)

        本地机的名称：localhost        ---->127.0.0.1

（3）port：端口号。有65535个端口号，每个端口号对应一个服务

        0~1023：都被系统使用，有特定的服务；

        1024~65535：用户可以使用

（4）path：页面文件的路径

        http://www.souhu.com

  (5）query：查询参数。传递给服务器的参数。参数之间用‘&‘

分隔，参数和服务器地址之间用’？’分隔

http://localhost:8080/getData?id = "1001"&name = "张三

2、常用属性：

（1）location.search:返回当前URL的查询部分，即”？“之后的部分

（2）location.hash:返回URL中‘#’开始的内容

（3）location.host:返回URL的主机名和端口号

（4）location.histname:返回URL的主机名

（5）location.href:返回完整的URL

<body>
    <button>去百度</button>
    <script>
        var btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            location.href = "http://www.baidu.com"
            // document.location = "http://www.baidu.com"
        })
    </script>
</body>

（6）location.pathname:返回路径名 

（7）location.port:返回URL的端口号

（8）location.protocol:返回URL的网络协议

decodeURIComponent():是js中的解码函数

【案例】获取URL参数   

创建login.html登录页面：

<form action="index.html">
  用户名： <input type="text" name="uname">
  <input type="submit" value="登录">
</form>

创建index.html首页

console.log(location.search);  // 结果为：?uname=andy
    // 1. 去掉search中的问号“?”
    var params = location.search.substr(1);
    console.log(params); // 结果为：uname=andy
    // 2. 把字符串分割为数组
    var arr = params.split('=');
    console.log(arr); // 结果为：["uname", "andy"]
    var div = document.querySelector('div');
    // 3. 把数据写入div中
    div.innerHTML = arr[1] + '欢迎您';

3、常用方法BOM（浏览器对象、单线程）四、navigator对象：用于导航

1、常用属性：

BOM（浏览器对象、单线程）

2、常用方法：

常用方法javaEnabled()：指定是否在浏览器中启用Java。

五、history对象：记录访问的历史

1、常用属性：

history.length属性：返回历史列表中的网址数。

2、常用方法：

BOM（浏览器对象、单线程）

上一篇：【经验分享】win10 cmake 构建 Tengine 工程


下一篇：【架构之路之WCF全析（一）】--服务协定及消息模式