JavaScript基础学习 BOM

最新推荐文章于 2024-01-22 21:17:21 发布

柠檬味小发糕

最新推荐文章于 2024-01-22 21:17:21 发布

阅读量376

点赞数

分类专栏： JavaScript 文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_43537319/article/details/122030052

版权

JavaScript 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

JavaScript基础学习 BOM

调整窗口大小事件
定时器之setTimeout
定时器之setInterval

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script>
        // window.onload = function() {
        //     var btn = document.querySelector('button');
        //     btn.addEventListener('click', function() {
        //         alert('点击我');
        //     })
        // }
        // window.onload = function() {
        //     alert(22);
        // }
        //  这样写 第二个弹窗事件会覆盖掉第一个 只会弹出22
        window.addEventListener('load', function() {
            var btn = document.querySelector('button');
            btn.addEventListener('click', function() {
                alert('点击我');
            })
        })
        window.addEventListener('load', function() {

            alert(22);
        })
        document.addEventListener('DOMContentLoaded', function() {
                alert(33);
            })
            // load 等页面内容全部加载完毕，包含页面dom元素 图片 flash  css 等等
            // DOMContentLoaded 是DOM 加载完毕，不包含图片 falsh css 等就可以执行 加载速度比 load更快一些
    </script>
</head>

<body>

    <!-- 之前的script文件是要在元素下方才能执行的，加了onload事件，页面首先会加载其中的
    文件才会去执行body当中的页面元素，我们script文件就能随意放位置 -->
    <button>点击</button>

</body>

</html>

调整窗口大小事件

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        div {
            height: 300px;
            width: 300px;
            background-color: pink;
        }
    </style>


</head>

<body>
    <div>

    </div>
    <script>
        var div = document.querySelector('div');
        window.addEventListener('resize', function() {
            console.log(window.innerWidth);
            if (window.innerWidth <= 1000) {
                div.style.display = 'none';
            } else {
                div.style.display = 'block';
            }
        })
    </script>

</body>

</html>

定时器之setTimeout

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=devcie-width,initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>


</head>

<body>
    <div>

    </div>
    <button>点击停止爆炸</button>
    <script>
        //  window.setTimeout(回调函数,延时的时间)  单位：毫秒  如果不加默认为0
        //   当延时时间过去时，才会执行我们这个回调函数
        // 1 第一种写法
        window.setTimeout(function() {
            console.log('one-爆炸了');
        }, 2000);

        // 2. 第二种写法
        function callback() {
            console.log('two-爆炸了');
        }
        setTimeout(callback, 2000);

        // 因为一个页面当中可能会有很多计时器，所以我们可以给计时器定义一个标识符
        var time1 = setTimeout(callback, 5000);
        var time2 = setTimeout(callback, 8000);

        // 停止定时器  clearTimeout(timeoutId)   参数为定时器的标识符
        var btn = document.querySelector('button');
        btn.addEventListener('click', function() {
            clearTimeout(time2);
        })
    </script>

</body>

</html>

定时器之setInterval

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

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

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

</html>