JavaScript学习——BOM

最新推荐文章于 2024-05-14 09:33:59 发布

今日份学习

最新推荐文章于 2024-05-14 09:33:59 发布

阅读量24

点赞数

文章标签： microsoft

本文链接：https://blog.csdn.net/m0_73648753/article/details/133819016

版权

1、BOM概述

BOM（浏览器对象模型）使 JavaScript 有能力与浏览器进行交互

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性

2、常见的BOM对象

Window：代表的是整个浏览器的窗口，也是网页中的全局对象

Navigator：代表的当前浏览器的信息，用来区分不同的浏览器

Location：代表当前浏览器的地址栏信息，用来获取地址栏信息或操作浏览器跳转页面

History：代表浏览器的历史记录，用来操作浏览器的历史记录

Screen：代表用户的屏幕的信息，用来获取到用户的显示器的相关信息

3、弹出框

JavaScript 有三种类型的弹出框：警告框、确认框和提示框

（1）警告框：确保信息传递给用户

当警告框弹出时，用户将需要单击“确定”来继续

语法：window.alert("sometext");

注：window.alert() 方法可以不带 window 前缀

例：

alert("我是一个警告框！");

（2）确认框：希望用户验证或接受某个东西

当确认框弹出时，用户将单击“确定”或“取消”来继续进行，“确定”返回 true，“取消”返回 false

语法：window.confirm("sometext");

注：window.confirm() 方法可以不带 window 前缀

例：

var r = confirm("请按按钮");
if (r == true) {
    x = "您按了确认！";
} else {
    x = "您按了取消！";
}

（3）提示框：希望用户在进入页面前输入值

“确定”返回输入值，“取消”返回 NULL

语法：window.prompt("sometext","defaultText");

注：window.prompt() 方法可以不带 window 前缀

例：

var person = prompt("请输入您的姓名", "比尔盖茨");
if (person != null) {
    console.log(person);
}

4、定时事件

概念：

JavaScript 可以在时间间隔内执行

window 对象允许以指定的时间间隔执行代码，这些时间间隔称为定时事件

定时事件两个关键的方法

在等待指定的毫秒数后执行函数：setTimeout(function, milliseconds)

等同于 setTimeout()，但持续重复执行该函数：setInterval(function, milliseconds)

注：setTimeout() 和 setInterval() 都属于 window 对象的方法

5、延时器：setTimeout() 方法

语法：window.setTimeout(function, milliseconds);

参数一：执行的函数

参数二：指示执行之前的毫秒数

注：window.setTimeout() 方法可以不带 window 前缀

例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- JavaScript代码 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建延时器
        var timer = setTimeout(function () {
            console.log("HelloWorld");
        }, 3000);//等待三秒，后输出"HelloWorld"
        
        // 清除延时器
        // clearTimeout(timer);        
    };
</script>
</body>
</html>

6、定时器：setInterval() 方法

语法：window.setInterval(function, milliseconds);

参数一：要执行的函数。

参数二：每个执行之间的时间间隔的长度。

注：window.setInterval() 方法可以不带window前缀

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<button id="btn">按钮</button>

<!-- JavaScript代码 -->
<script>
    var btn = document.getElementById("btn");

    btn.onclick = function () {
        // 创建定时器
        var timer = setInterval(function () {
            console.log("HelloWorld");
        }, 1000);//每隔一秒向控制台输出"HelloWorld"

        // 清除定时器
        // clearInterval(timer);
    };
</script>
</body>
</html>

今日份学习

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习——BOM

BOM（浏览器对象模型）使 JavaScript 有能力与浏览器进行交互由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是BOM的方法和属性。
复制链接

扫一扫