JavaScript知识点整理（十五）- BOM

    <img src="img/mao1.png" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function(){
            ad.style.display = 'none';
        }, 5000);
    </script>

3.3 停止setTimeout()定时器

window.clearTimeout(timeoutID)

3.4 setInterval()定时器

window.setInterval(回调函数,[间隔毫秒数]);

setInterval() 方法可以重复调用一个函数，每隔这个时间，就去调用一次回调函数

注意：

window可以省略
这个调用函数可以直接写函数、写函数名或者采取字符串‘函数名()’ 三种形式
延迟的毫秒数省略默认是0，如果写，必须是毫秒，表示每隔多少毫秒就调用这个函数

3.4.1 案例练习 - 倒计时效果

案例分析：

倒计时是不断变化的，需要用定时器来自动比那花（setInterval）

        div {
            margin: 200px;
        }
        
        span {
            display: inline-block;
            width: 60px;
            height: 60px;
            background-color: #333;
            font-size: 20px;
            color: #fff;
            text-align: center;
            line-height: 60px;
        }

    <div>
        <span class="day"></span>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></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('2022-4-1 18:00:00');
        countDown(); // 先调用一次倒计时函数，防止第一次刷新页面有空白 
        // 每隔1s调用定时器
        setInterval(countDown,1000);
        function countDown() {
            var nowTime = +new Date();
            var times = (inputTime - 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>

3.5 停止setInterval()定时器

window.clearInterval(intervalID)

3.5.1 案例练习

点击开始定时器按钮，日志开始打印内容，点击停止，则日志停止打印内容

    <button class="start">开始定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var start = document.querySelector('.start');
        var stop = document.querySelector('.stop');
        var timer = null;
        start.addEventListener('click',function(){
            timer = setInterval(function(){
                console.log('开始定时器');
            },1000);
        });
        stop.addEventListener('click',function(){
            clearInterval(timer);
        });
    </script>

3.5.2 案例练习 - 防止重复发送短信按钮

点击按钮后，该按钮60s之内不能再次点击，防止重复发送短信

案例分析：

按钮点击之后，会禁用disable为true
同时按钮里面的内容会变化，注意button里面的内容通过innerHTML实现修改
里面的秒数是有变化的，需要用到定时器
定义一个变量，在定时器里面，不断递减
如果变量为0，停止定时器，并复原按钮初始状态

    手机号码：<input type="number"> <button>发送</button>
    <script>
        var btn = document.querySelector('button');
        var time = 5;
        btn.addEventListener('click',function(){
            btn.disabled = true;
            var timeEnd = setInterval(function(){
                if(time == 0){
                    clearInterval(timeEnd);
                    btn.disabled = false
                    btn.innerHTML = '发送'
                    time = 5;
                } else {
                btn.innerHTML = '还剩下' + time + '秒';
                time--;
                }
            }, 1000);
        });
    </script>

3.6 this

this的指向在函数定义的时候确定不了的，只有函数执行时才能确定this到底指向谁，一般情况下this的最终指向的是调用它的对象

全局作用域或者普通函数中this指向全局对象window（注意定时器里面的this指向window）
方法调用中谁调用this指向谁
构造函数中this指向构造函数的实例

四、JS执行队列

4.1 JS是单线程

JavaScript语言的一大特点就是单线程，同一个时间就只能最一件事

单线程意味着，所有任务需要排队，前一个任务结束了，才会执行后一个任务

4.2 同步和异步

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

异步：在做这件事的同时，还可以去处理其他事情

本质区别：这条流水线上各个流程的执行顺序不同

同步任务：同步任务都在主线程上执行，形参一个执行栈

异步任务：JS的异步是通过回调函数实现的，异步任务有三种类型：

普通事件，如click、resize等
资源加载，如load、error等
定时器，包括setInterval、setTimeout等

异步任务相关回调函数添加到任务队列中（任务队列也称为消息队列）

4.3 JS执行机制

先执行执行栈中的同步任务
异步任务（回调函数）放入任务队列中
一旦执行栈中的所有同步任务执行完毕，系统就会按次序读取任务队列中的异步任务，于是被读取的异步任务结束等待状态，进入栈，开始执行
由于主线程不断重复获得任务、执行任务、再获取任务、再执行，这种机制被称为事件循环

五、Location对象

5.1 什么是location对象

window对象给我们提供了一个location属性用于获取或设置窗体的URL，并且可以用于解析URL。该属性返回的是一个对象。

5.2 URL

统一资源定位符是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，它包含的信息指出文件的位置以及浏览器怎么处理它

URL的一般语法格式

protocol://host[:port]/path/[?quert]#fragment

组成	说明
protocol	通信协议，常用http、ftp、maio等
host	主机（域名），如www.baidu.com
port	端口号可选，省略时使用方案的默认端口，如http默认端口为80
path	路径，由零或多个‘/’ 符号隔开的字符串，一般用来表示主机上的一个目录或者文件地址
query	参数，以键值对的形式，通过&符号分隔开
fragment	片段，#后面内容，常见于链接锚点

5.3 location对象的属性

location对象属性	返回值
location.href	获取或者设置整个URL
location.host	返回主机（域名）
location.port	返回端口号，如果未写返回空字符串
location.pathname	返回路径
location.search	返回参数
location.hash	返回片段，#后面内容，常见于链接锚点

重点：href 和 search

5.3.1 案例练习 - 5秒后自动跳转页面

案例分析：

利用定时器做倒计时效果
时间到了，就跳转特面，使用location.href

    <div></div>
    <script>
        var div = document.querySelector('div');
        var timer = 5;
        setInterval(function(){
            if(timer == 0){
                location.href = 'http://www.baidu.com';
            } else {
                div.innerHTML = '您将在' + timer + '秒之后跳转页面';
                timer--;
            }
        },1000);
    </script>

5.3.2 案例练习 - 获取URL数据

提取链接中的参数

案例分析：

login页面中提交表单，action提交到index.html页面
第二个页面可以使用第一个页面的参数，实现了一个数据不同页面之间的传递效果
第二个页面利用URL里面的location.search参数使得可以使用第一个页面的数据
在第二个页面中，需要把或者参数提取出来
第一步去掉？利用substr
第二部利用 = 号分割键和值 split('=')

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

index.html

    <div></div>
    <script>
        var params = location.search.substr(1);
        var arr = params.split('=');
        var div = document.querySelector('div');
        div.innerHTML = arr[1]+'，欢迎您！';
    </script>

5.4 location对象的方法

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

六、navigator对象

navigator对象包含有关浏览器信息，常用信息：userAgent，该属性可以返回客户机发送服务器的user-agent头部值

可用于判断用户使用移动端还是PC端，从而跳转到相对应端口的页面

七、history对象

window对象提供了history对象，与浏览器历史记录进行交互。该对象包含用户（在浏览器窗口中）访问过的URL

history对象方法	作用
back()	可以后退功能
forward()	前进功能
go(参数)	前进后退功能。参数如果是1前进1个页面，如果是-1后退1个页面

JHY97

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript知识点整理（十五）- BOM

一、BOM概述1.1 什么是BOMBOM 即浏览器对象模型，它提供了独立于内容而与浏览器窗口进行交互的对象，其核心对象是windowBOM由一系列相关的对象构成，并且每个对象都提供了很多方法和属性DOM：文档对象模型 DOM就是把文档当作一个对象来看代 DOM的顶级兑现格式document DOM主要学习的是操作页面元素 DOM是W3C标准规范BOM：浏览器对象模型把浏览器当作一个对象来看待 BOM的顶级对象是window BOM学习的是浏览器窗口交互的
复制链接

扫一扫