五、BOM

最新推荐文章于 2024-07-26 11:41:15 发布

飞翔荷兰号

最新推荐文章于 2024-07-26 11:41:15 发布

阅读量209

点赞数

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

本文链接：https://blog.csdn.net/weixin_43374578/article/details/122181392

版权

JS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、导读

在这里插入图片描述

1. bom角色

js访问浏览器窗口的一个接口
全局对象，定义在全局作用域中的变量，函数都会变成windows对象的属性和方法
在调用的时候可以省略windows，alert(), prompt等都是windows的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<script>

    var name = 'erick';

    window.alert(name);

    console.log(window.name);

</script>
</body>
</html>

2. script位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

   <!-- 这种方式不会生效
     1. js 从上往下加载，因此对应的script必须写在对应的元素下面-->
    <script>
        let btn = document.querySelector('button');
        btn.addEventListener('click', function (){
            alert('确认提交？');
        })
    </script>
</head>
<body>

<button>提交</button>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>


    <script>
        /*页面所有内容加载完毕后，才会触发这个函数，可以触发多个*/
        window.addEventListener('load', function () {
            let btn = document.querySelector('button');
            btn.addEventListener('click', function () {
                alert("确认提交？");
            })
        })

        /*页面DOM加载后，不用等css，flash等加载完毕，直接就能加载*/
       document.addEventListener('DOMContentLoaded',function (){
           alert('DOM Completed');
       })

    </script>
</head>
<body>

<button>提交</button>
</body>
</html>

3. 定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<script>
    /*定时器
    * 1. 定时器到时后触发的函数
    * 2. 多少ms后触发函数
    * 3. 一个页面可以存在多个定时器*/
    let firstTimer = window.setTimeout(function () {
        console.log('first timer');
    }, 3000);

    let secondTimer = window.setTimeout(function () {
        console.log('second timer')
    }, 5000);
</script>
</body>
</html>

5s后关闭广告

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="1.gif" width="200px">
<script>

    window.setTimeout(function () {
        let img = document.querySelector('img');
        img.src = '';
    }, 5000);


</script>
</body>
</html>

停止定时器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<img src="1.gif" width="200px">

<button>停止定时器</button>
<script>

    let adTimer = window.setTimeout(function () {
        let img = document.querySelector('img');
        img.src = '';
    }, 5000);


    /*停止定时器*/
    let stopButton = document.querySelector('button');
    stopButton.addEventListener('click', function () {
        /*停止对应的定时器*/
        window.clearTimeout(adTimer);
    })

</script>
</body>
</html>

每隔几秒执行一次

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>


<button>停止定时器</button>
<script>

    /*每隔几秒执行一次
    * 清除定时器一样的*/
    let adTimer = window.setInterval(function () {
        let img = document.querySelector('img');
        console.log('hahahaha');
    }, 2000);

</script>
</body>
</html>

发送短信案例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<input type="text">
<button>提交</button>


<script>

    let btn = document.querySelector('button');

    btn.addEventListener('click', function () {
        let timer = 10;
        btn.disabled = true;
        let msgTimer = window.setInterval(function () {
            if (timer === 0) {
                window.clearInterval(msgTimer);
                btn.innerHTML = '提交';
                btn.disabled = false;
            } else {
                btn.innerHTML = '还剩下' + timer + '秒';
                timer--;
            }

        }, 1000);
    });

</script>
</body>
</html>

飞翔荷兰号

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
五、BOM

一、导读1. bom角色js访问浏览器窗口的一个接口全局对象，定义在全局作用域中的变量，函数都会变成windows对象的属性和方法在调用的时候可以省略windows，alert(), prompt等都是windows的<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head&g
复制链接

扫一扫

专栏目录