黑马JavaScript笔记（三）BOM

最新推荐文章于 2023-02-06 12:10:12 发布

VIP文章 jiujiujm

最新推荐文章于 2023-02-06 12:10:12 发布

阅读量717

点赞数

分类专栏：黑马JavaScript笔记文章标签： javascript

本文链接：https://blog.csdn.net/jiujiujm/article/details/115740817

版权

BOM浏览器对象模型

01 BOM概述

1.1 什么是BOM

在这里插入图片描述

1.2 BOM的构成

在这里插入图片描述

02 Window对象的常见事件

2.1 窗口加载事件

在这里插入图片描述

2.2 调整窗口大小事件

在这里插入图片描述

<body>
    <script>
        window.addEventListener('load', function() {
   
            var div = document.querySelector('div');
            window.addEventListener('resize', function() {
   
                console.log(window.innerWidth);

                console.log('变化了');
                if (window.innerWidth <= 800) {
   
                    div.style.display = 'none';
                } else {
   
                    div.style.display = 'block';
                }

            })
        })
    </script>
    <div></div>
</body>

03 定时器

3.1两种定时器

在这里插入图片描述

3.2 setTimeout()定时器

在这里插入图片描述

5秒后关闭广告案例

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

3.3 停止setTimeout()定时器

在这里插入图片描述

<body>
    <button>点击停止定时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
   
            console.log('爆炸了');

        }, 5000);
        btn.addEventListener('click', function() {
   
            clearTimeout(timer);
        })
    </script>
</body>

3.4 setInterval()定时器

在这里插入图片描述

<body>
    <script>
        // 1. setInterval 
        // 语法规范：  window.setInterval(调用函数, 延时时间);
        setInterval(function() {
   
            console.log('继续输出');

        }, 1000);
        // 2. setTimeout  延时时间到了，就去调用这个回调函数，只调用一次 就结束了这个定时器
        // 3. setInterval  每隔这个延时时间，就去调用这个回调函数，会调用很多次，重复调用这个函数
    </script>
</body>

倒计时效果案例

<body>
    <div>
        <span class="hour">1</span>
        <span class="minute">2</span>
        <span class="second">3</span>
    </div>
    <script>
        // 1. 获取元素 
        var hour = document.querySelector('.hour'); // 小时的黑色盒子
        var minute = document.querySelector('.minute'); // 分钟的黑色盒子
        var second = document.querySelector('.second'); // 秒数的黑色盒子
        var inputTime = +new Date('2019-5-1 18:00:00'); // 返回的是用户输入时间总的毫秒数
        countDown(); // 我们先调用一次这个函数，防止第一次刷新页面有空白 
        // 2. 开启定时器
        setInterval(countDown, 1000);

        function countDown() {
   
            var nowTime = +new Date(); // 返回的是当前时间总的毫秒数
            var times = (inputTime - nowTime) / 1000; // times是剩余时间总的秒数 
            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>

3.5 停止setLnterval()定时器

在这里插入图片描述

<body>
    <button class="begin">开启定时器</button>
    <button class="stop">停止定时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null; // 全局变量  null是一个空对象
        begin.addEventListener('click', function() {
   
            timer = setInterval(function() {
   
                console.log('ni hao ma');

            }, 1000);
        })
        stop.addEventListener('click', function() {
   
            clearInterval(timer);
        })
    </script>
</body>

发送短信案例

<body>
    手机号码： <input type="number"> <button>发送</button>
    <script>
        // 按钮点击之后，会禁用 disabled 为true 
        // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
        // 里面秒数是有变化的，因此需要用到定时器
        // 定义一个变量，在定时器里面，不断递减
        // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
        var btn = document.querySelector('button');
        var time = 3; // 定义剩下的秒数
        btn.addEventListener('click', function() {
   
            btn.disabled = true;
            var timer = setInterval(function() {
   
                if (time == 0) {
   
                    // 清除定时器和复原按钮
                    clearInterval(timer);
                    btn.disabled = false;
                    btn.innerHTML = '发送';
                } else {
   
                    btn.innerHTML = '还剩下' + time + '秒';
                    time--;
                }
            }, 1000);

        })
    </script>
</body>

3.6 this

在这里插入图片描述
时钟案例

<body>
    <div></div>
    <script>
        var div=document.querySelector('div');
        setInterval(timer, 1000);
        function timer(){
   
            var data=new Date();
            var y=data.getFullYear();
            var d=data.getDate();
            var mon=data.getMonth()+1;
            var day=data.getDay();
            var arr=['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
            var h=data.getHours();
            h=h<10 ? '0'+h:h;
            var m=data.getMinutes();
            m=m<10 ? '0'+m:m;
            var s=data.getSeconds();
            s=s<10 ? '0'+s:s;
            div.innerHTML=y +'年'+mon+'月'+d+'日'+arr[day]+''+h+':'+m+':'+s;

        }
    </script>
</body>

04 JS执行机制

4.1 JS是单线程

在这里插入图片描述

<body>
    <script>
        // 第一个问题
        // console.log(1);

        // setTimeout(function() {
   

        //     console.log(3);

        // }, 1000);

        // console.log(2);

        // 2. 第二个问题
        // console.log(1);

        // setTimeout(function() {
   

        //     console.log(3);

        // }, 0);

        // console.log(2);

        // 3. 第三个问题

        console.log(1);
        document.onclick = function() {
   
            console.log('click');
        }
        console.log(2);
        setTimeout(function() {
   
            console.log(3)
        }, 3000)
    </script>
</body>

4.2 同步和异步

在这里插入图片描述

4.3 同步和异步

在这里插入图片描述

4.4 JS执行机制

在这里插入图片描述

05 location对象

5.1 什么是location对象

在这里插入图片描述

5.2 URL

在这里插入图片描述

5.3 location对象的属性

在这里插入图片描述
5秒跳转页面案例

<body>
    <button>点击</button>
    <div></div>
    <script>
        var btn = document.querySelector('button');
        var div = document.querySelector('div');
        btn.addEventListener('click', function() {
   
            // console.log(location.href);
            location.href = 'http://www.itcast.cn';
        })
        var timer = 5;
        setInterval(function() {
   
            if (timer == 0) {
   
                location.href = 'http://www.itcast.cn';
            } else {
   
                div.innerHTML = '您将在' + timer + '秒钟之后跳转到首页';
                timer--;
            }

        }, 1000);
    </script>
</body>

获取URL参数案例
在这里插入图片描述

最低0.47元/天解锁文章

jiujiujm

关注

0
点赞
踩
18

收藏

觉得还不错? 一键收藏
1
评论
黑马JavaScript笔记（三）BOM

BOM浏览器对象模型01 BOM概述1.1 什么是BOM1.2 BOM的构成02 Window对象的常见事件2.1 窗口加载事件2.2 调整窗口大小事件<body> <script> window.addEventListener('load', function() { var div = document.querySelector('div'); window.addEventLi
复制链接

扫一扫