BOM

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

L薛之谦

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

阅读量158

点赞数

分类专栏： BOM 文章标签： javascript

本文链接：https://blog.csdn.net/ldh1219/article/details/115185605

版权

BOM 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

学习目标：

-了解BOM的概念
-了解window对象
-了解location对象
-了解navigation对象
-了解history对象

学习内容：

-BOM的概念
-window对象
-location对象
-navigation对象
-history对象

学习时间：

1、周一至周五早上 8 点—晚上9点

2、周六上午 8 点-晚上 9 点

一、BOM

1.BOM概念

-BOM（Browser Object Model）浏览器对象模型

-BOM 使 JavaScript 有能力与浏览器“对话”

-BOM 缺乏标准，JavaScript 语法的标准化组织是 ECMA，DOM 的标准化组织是 W3C，BOM 最初是Netscape 浏览器标准的一部分

-BOM构成：
在这里插入图片描述

2.window对象

window对象表示浏览器窗口，是BOM模型中的顶层对象,，因此所有BOM模型中的对象都是该对象的子对象
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员
- 全局变量是 window 对象的属性
- 全局函数是 window 对象的方法
window对象在调用属性、方法时可以省去window，直接调用即可
window对象自带了一些方法，主要分为以下几类：

2.1弹窗

More Actions方法名	说明
alert(“信息内容”)	弹出一个警告框
confirm(“信息内容”)	弹出一个确认对话框，返回true/false
prompt(“信息内容”,[“默认输入内容”])	弹出一个提示对话框，返回输入内容

2.2 定时器

方法名	说明
setTimeout(callback,millisec)	设置一次性定时器,返回定时器id
clearTimeout(timerId);	根据定时器id停止定时器

例1：页面打开5秒之后自动关闭广告
代码如下：

  setTimeout(function() {
  	document.querySelector("img").style.display = "none"
  },5000)

周期性执行计时器（执行多次)

方法名	说明
setInterval(callback,millisec)	设置周期性定时器,返回定时器id
cleartInterval(timerId);	根据定时器id停止定时器

例2：实现10秒倒计时

<body>
    <div class="div1">5</div>
    <div class="div2">
        <button>开始</button>
        <button>停止</button>
    </div>
    <script>
    	// 数字显示区
        var number = document.querySelector(".div1");
        // 倒计时起始数
        var n = parseInt(number.innerText);
        // 开始按钮
        var start = document.querySelectorAll("button")[0];
        // 开始按钮
        var stop = document.querySelectorAll("button")[1];
		// 开始
        start.onclick = function() {
            if (n == 0) {
                number.innerText = 5;
                n = 5;
            }
            // 定时器
            timerId = setInterval(function() {
                if (n > 0) {
                    number.innerText = --n;
                    //禁用开始按钮
                    start.disabled = true;
                     //启用停止按钮
                    stop.disabled = false;
                } else {
                    clearInterval(timerId);
                    start.disabled = false;
                    stop.disabled = false;

                }
            }, 1000)
        }
        // 停止
        stop.onclick = function() {
            clearInterval(timerId);
            stop.disabled = true;
            start.disabled = false;
        }
    </script>

</body>

附加题：发送短信倒计时（点击发送按钮后，该按钮30秒之内不能再次点击，防止重复发送短信）

在这里插入图片描述

代码如下：

<body>
    <div>
        <table>
            <tr>
                <td>手机号码：</td>
                <td><input type="text" placeholder="请输入手机号码"></td>
            </tr>
            <tr>
                <td>短信验证码：</td>
                <td><input type="text" placeholder="请输入短信验证码" class="code">
                    <button class="btn">点击获取短信验证码</button>
                </td>
            </tr>
        </table>
    </div>
</body>
<script>
    let num = 10;
    let btn = document.querySelector(".btn");
    timerId = null;

    btn.onclick = function() {
        btn.disabled = true;
        timerId = setInterval(function() {
            if (num > 0) {
                btn.innerHTML = num-- + "秒后重新获取"
            } else {
                clearInterval(timerId);
                btn.innerHTML = "点击重新获取验证码"
                btn.disabled = false;
                num = 10;
            }
        }, 1000)
    }
</script>

例3：打字机动画效果
在这里插入图片描述
代码如下：

<body>
    <div></div>
    <script>
        var str = `轻轻的我走了，\n正如我轻轻的来；\n我轻轻的招手，\n作别西天的云彩。\n\n
                    那河畔的金柳，\n是夕阳中的新娘；\n波光里的艳影，\n在我的心头荡漾。\n\n
                    软泥上的青荇， \n油油的在水底招摇；\n在康河的柔波里，\n我甘心做一条水草！\n\n
                    那榆荫下的一潭，\n不是清泉，是天上虹\n揉碎在浮藻间\n沉淀着彩虹似的梦。\n\n
                    寻梦？撑一支长篙，\n向青草更青处漫溯；\n满载一船星辉，\n在星辉斑斓里放歌。\n\n
                    但我不能放歌，\n悄悄是别离的笙箫；\n夏虫也为我沉默，\n沉默是今晚的康桥！\n\n
                    悄悄的我走了，\n正如我悄悄的来；\n我挥一挥衣袖，\n不带走一片云彩。`;
        var index = 0;
        var content = "";
        var div = document.querySelector("div");

        var timerId = setInterval(function() {
            content += str[index];
            index++;
            div.innerText = content + '_';
            if (index == str.length - 1) {
                clearInterval(timerId);
                div.innerText = content;
            }
        }, 100)
    </script>
</body>

2.3 onload事件
-window.onload事件是窗口加载事件，当文档内容全部加载完成后(包括图片、CSS文件、Flash文件等)才会触发该事件

onload事件采用传统方式注册只能执行一次，如果有多个则只有最后一个生效

window.onload = function() { 
	alert('第一次加载') 
}

window.onload = function() { 
	alert('第二次加载') 
}

通过addEventListener监听方式来注册事件则没有个数的限制（IE9以上支持）

window.addEventListener('load',function(){
	alert('第一次注册')
})

window.addEventListener('load',function(){
	alert('第二次注册')
})

总结

以上就是今天的内容

L薛之谦

关注

0
点赞
踩
0

收藏

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

学习目标：-了解BOM的概念-了解window对象-了解location对象-了解navigation对象-了解history对象学习内容：-BOM的概念-window对象-location对象-navigation对象-history对象学习时间：1、周一至周五早上 8 点—晚上9点2、周六上午 8 点-晚上 9 点文章目录学习目标：学习内容：学习时间：一、BOM1.BOM概念2.window对象总结一、BOM1.BOM概念-BOM（Browser Obje
复制链接

扫一扫