BOM 浏览器对象模型

文章目录

    • 1. BOM 概述
    • 2.window 对象的常见事件
      • 窗口加载事件
      • 调整窗口大小事件
    • 3.定时器
      • setTimeout() 定时器
      • 案例:5秒后自动关闭的广告
      • 停止 setTimeout() 定时器
      • setInterval() 定时器
      • 案例:倒计时
      • 停止 setInterval() 定时器
      • 案例:发送短信
      • this
    • 4. JS 执行机制
    • 5. location 对象
      • URL
      • location对象属性
      • location对象的方法
      • 案例: 5秒钟之后自动跳转页面
      • 案例: 获取 URL 参数数据
    • 6. navigator 对象
    • 7. history 对象

1. BOM 概述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

2.window 对象的常见事件

窗口加载事件

window.onload = function(){}
或者 
window.addEventListener("load",function(){});

在这里插入图片描述

document.addEventListener('DOMContentLoaded',function(){})

在这里插入图片描述

调整窗口大小事件

window.onresize = function(){}

 window.addEventListener("resize",function(){});

在这里插入图片描述

3.定时器

setTimeout() 定时器

 setTimeout() 定时器

在这里插入图片描述
在这里插入图片描述

window.setTimeout(调用函数, [延迟的毫秒数]);

在这里插入图片描述

案例:5秒后自动关闭的广告

核心思路:5秒之后,就把这个广告隐藏起来
用定时器setTimeout

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

停止 setTimeout() 定时器

 window.clearTimeout(timeoutID)

clearTimeout()方法取消了先前通过调用 setTimeout() 建立的定时器。
1.window 可以省略。
2.里面的参数就是定时器的标识符 。

setInterval() 定时器

 window.setInterval(回调函数, [间隔的毫秒数]);

在这里插入图片描述

在这里插入图片描述

案例:倒计时

在这里插入图片描述
在这里插入图片描述

//1.获取元素
var hour=document.querySelector('.hour');//小时的黑色盒子
var minute =document.querySelector('.minute');//分钟的黑色盒子
var second =document.queryselector(.second');//秒数的黑色盒子
var inputTime =+new Date('2019-5-118: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;}

停止 setInterval() 定时器

 window.clearInterval(intervalID);

clearInterval()方法取消了先前通过调用 setInterval()建立的定时器。
注意:
1.window 可以省略。
2.里面的参数就是定时器的标识符 。
在这里插入图片描述

案例:发送短信

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

this

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,一般情况下this的最终指向的是那个调用它的对象
现阶段,我们先了解一下几个this指向

  1. 全局作用域或者普通函数中this指向全局对象window(注意定时器里面的this指向window)
  2. 方法调用中谁调用this指向谁
  3. 构造函数中this指向构造函数的实例

4. JS 执行机制

在这里插入图片描述
在这里插入图片描述
123
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5. location 对象

window 对象给我们提供了一个 location 属性用于获取或设置窗体的 URL,并且可以用于解析 URL 。 因为这个属性返回的是一个对象,所以我们将这个属性也称为 location 对象

URL

在这里插入图片描述

location对象属性

在这里插入图片描述

location对象的方法

在这里插入图片描述

案例: 5秒钟之后自动跳转页面

利用定时器做倒计时效果
时间到了,就跳转页面。 使用 location.href

在这里插入图片描述

案例: 获取 URL 参数数据

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

6. navigator 对象

navigator 对象包含有关浏览器的信息,它有很多属性,常用的是 userAgent,该属性可以返回由客户机发送服务器的 user-agent 头部的值。
下面前端代码可以判断用户那个终端打开页面,实现跳转

if((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
    window.location.href = "";     //手机
 } else {
    window.location.href = "";     //电脑
 }

7. history 对象

window 对象给我们提供了一个 history 对象,与浏览器历史记录进行交互。该对象包含用户(在浏览器窗口中)访问过的 URL。

在这里插入图片描述
在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mfbz.cn/a/481845.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

亚马逊云科技:企业如何开启生成式AI之旅?

如果要评选最近两年全球科技行业最热门的细分领域&#xff0c;那么生成式AI绝对会以遥遥领先的票数成为当仁不让的冠军。 然而眼见生成式AI发展得如火如荼&#xff0c;越来越多的企业却陷入了深深的焦虑&#xff1a;应该如何开启生成式AI之旅&#xff1f;又该怎样搭建大模型&am…

MySQL进阶-----Linux系统安装MySQL

目录 前言 一、准备工作 1. 准备一台Linux服务器 2. 下载Linux版MySQL安装包 3. 上传MySQL安装包 二、安装操作指令 1. 创建目录,并解压 2.安装mysql的安装包 三、开启mysql与密码修改 1.启动MySQL服务 2. 查询自动生成的root用户密码 3.修改root用户密码 四、创…

机器学习:智能时代的核心引擎

目录 一、什么是机器学习 二、监督学习 三、无监督学习 四、半监督学习 五、强化学习 一、什么是机器学习 机器学习是人工智能的一个分支&#xff0c;它主要基于计算机科学&#xff0c;旨在使计算机系统能够自动地从经验和数据中进行学习并改进&#xff0c;而无需进行明确…

MySQL下载及安装过程

MySQl 5.7 安装图解 目录 MySQl 5.7 安装图解 第一步 安装包 第二步 Mysql协议 第三步 安装前检查 第四步 安装 第五步 产品配置 第六步 安装完成 第一步 安装包 双击安装包文件 进行安装 第二步 Mysql协议 同意Mysql协议 , 选择 Server Only安装Mysql服务器即可 …

C语言 预处理器 注释 基本案例讲解

上文 程序设计语言与C语言发展 我们简述了 计算机语言的发展 以及编程语言与指令的概念 那么 今天 我们就来 初始C语言 并完成 第一个C语言案例 这里 我们需要完成 C语言 Hello World案例 以及 C语言程序举例 任何编程语言 开始的案例 都是 Hello World 所以说 Hello World 是…

Flutter 事件传递简单概述、事件冒泡、事件穿透

前言 当前案例 Flutter SDK版本&#xff1a;3.13.2 本文对 事件传递只做 简单概述&#xff0c;主要讲解&#xff0c;事件传递过程中可能遇到的问题解决&#xff0c;比如 事件冒泡、事件穿透&#xff1b; 不是我偷懒&#xff0c;是自认为没有这几位写的详细、仔细&#xff0c…

【Langchain-Chatchat】部署ChatGLM3-6B-32K教程

介绍 Langchain-Chatchat这个框架可以帮助我们更容易的部署大语言模型&#xff0c;之前也写过ChatGLM传统的部署教程&#xff0c;有兴趣的可以参考 【ChatGLM3】第三代大语言模型多GPU部署指南【ChatGLM2-6B】从0到1部署GPU版本 借助Langchain-Chatchat框架&#xff0c;可以…

入门linux之Ubuntu学习

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言1、介绍Ubuntu2、虚拟机目录解析3、常用指令ls&#xff1a;罗列当前目录文件信息对ls -l 的结果解析1.第一个字符2.每三个字符&#xff08;第一个字符后&#x…

新店开通后要做什么?一定要先做这几个设置,不然会影响店铺流量

大家好&#xff0c;我是电商花花。 新手做店如果没有一个完整的做店思路&#xff0c;很容易迷茫&#xff0c;没有方向&#xff0c;没有步骤&#xff0c;做完上一步不知道下一步该去干嘛。 今天给大家讲一下在开店后一定要做的几项基础搭建。 1、绑定官方账户 开店后在店铺后…

【ORB-SLAM3】在 Ubuntu20.04 上编译 ORM-SLAM3 并使用 D435i 运行测试

【ORB-SLAM3】在 Ubuntu20.04 上编译 ORM-SLAM3 并使用 D435i 运行测试 1 Prerequisites1.1 C11 or C0x Compiler1.2 Pangolin1.3 OpenCV1.4 Eigen3 2 安装 Intel RealSense™ SDK 2.02.1 测试设备2.2 编译源码安装 3 编译 ORB-SLAM34 使用 D435i 运行 ORB-SLAM34.1 运行4.2 运…

【Linux】环境变量常见指令操作&基本实验(入门必看!)

前言 大家好吖&#xff0c;欢迎来到 YY 滴Linux系列 &#xff0c;热烈欢迎&#xff01; 本章主要内容面向接触过Linux的老铁 主要内容含&#xff1a; 欢迎订阅 YY滴C专栏&#xff01;更多干货持续更新&#xff01;以下是传送门&#xff01; YY的《C》专栏YY的《C11》专栏YY的《…

如何用联合(共用体)union验证系统大小端

一&#xff1a;思路 由联合体的特点&#xff0c;可知上图&#xff0c;char c 和 int i 共用四个字节&#xff0c;假设是小端&#xff0c;则由左到右是低地址到高地址&#xff0c;四个字节的内容如图所示01 00 00 00 代码展示&#xff1a; 如果第一个字节是1&#xff0c;则证明…

【前端】Web API

1.Web API 简介 JS分为三大部分&#xff1a; ESCMScript&#xff1a;基础语法部分DOM API&#xff1a;操作页面结构BOM API&#xff1a;操作浏览器 Web API包含 DOM BOM 2.DOM基本概念 DOM全称 Document Object Mod…

Jenkins中支持maven构建遇到仓库报错问题

目的 Jenkins中支持maven构建(Jenkins使用docker安装&#xff09; 问题 1.构建一个maven项目 2.执行报错 /var/lib/jenkins/local_maven_repo/com/sx/root/1.0.4/root-1.0.4.pom.part.lock (No such file or directory) Failed to transfer Could not transfer artifact co…

后端系统开发之——功能完善

原文地址&#xff1a;https://blog.yiming1234.cn/?p830 下面是正文内容&#xff1a; 前言 通过SpringBoot开发用户模块的部分也就差不多要结束了&#xff0c;这一片文章就主要提一些在系统开发中需要注意到的细节部分和功能&#xff0c;也就是剩余的部分。 但是这个专栏只介…

监控系统Prometheus--入门

文章目录 Prometheus特点易于管理监控服务的内部运行状态强大的数据模型强大的查询语言PromQL高效可扩展易于集成可视化开放性 Prometheus架构Prometheus 生态圈组件架构理解 Prometheus的安装安装Prometheus Server上传安装包解压安装包修改配置文件 prometheus.yml 安装Pushg…

linux下docker容器的使用

1、根据已有镜像images创建容器 1.1、查看镜像 如果是接手的别人的项目&#xff0c;需要从以往的images镜像中创建新容器&#xff0c;使用命令查看当前机器上的docker镜像&#xff1a; docker images1.2、创建容器 使用docker run 根据images镜像名创建容器&#xff0c;命令…

查看Scala类的方法

文章目录 一、概述如何查看Scala类的方法二、使用Scala文档查看类的方法三、使用反射机制查看类的方法 一、概述如何查看Scala类的方法 本文介绍了在Scala中查看Int类方法的两种方法&#xff1a;使用Scala标准库文档和使用反射机制。通过Scala标准库文档&#xff0c;您可以方便…

[Netty实践] 请求响应同步实现

目录 一、介绍 二、依赖引入 三、公共部分实现 四、server端实现 五、client端实现 六、测试 一、介绍 本片文章将实现请求响应同步&#xff0c;什么是请求响应同步呢&#xff1f;就是当我们发起一个请求时&#xff0c;希望能够在一定时间内同步&#xff08;线程阻塞&am…

操作系统面经-用户态和内核态

字节实习生带你面试&#xff0c;后台私信可以获得面试必过大法&#xff01;&#xff01; 根据进程访问资源的特点&#xff0c;我们可以把进程在系统上的运行分为两个级别&#xff1a; 用户态(User Mode) : 用户态运行的进程可以直接读取用户程序的数据&#xff0c;拥有较低的…
最新文章