BOM编程

2023-11-08

1.BOM概述.

  1. BOM:浏览器对象模型(Browser Object Model),它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。BOM是把「浏览器」当做一个「对象」来看待。

  2. BOM对象分为window对象和window子对象(screen、location、history、navigator)。

  3. BOM 的顶级对象是 window;

  4. BOM 学习的是浏览器窗口交互的一些对象;

  5. BOM 是浏览器厂商在各自浏览器上定义的,兼容性较差。

  6. BOM 比 DOM 更大,它包含 DOM。BOM的组成部分如下:


2.windows对象.

2.1window对象介绍.

  • window对象是BOM顶层对象;

  • window对象是JS访问浏览器窗口的一个接口;

  • window对象是一个全局对象,声明的所有的全局变量和全局方法函数最终都是window对象的属性或者方法,在调用的时候可以省略 window。前学习的alert()、prompt()、confirm()方法都属于window对象的。


2.2常用事件.

2.2.1窗口加载事件-onload.


2.2.2窗口大小改变事件-onresize.


2.3常用方法.

2.3.1open('URL').

  • open('URL') :打开一个新的浏览器窗口。参数1:URL地址,参数2:_blank(URL加载到一个新的窗口,默认);_self(URL替换当前页面)。


2.3.2close().

  • close() :关闭新打开的窗口(仅能关闭通过open方法打开的窗口,且open方法的参数2为_blank)。


2.3.3定时器和延时器.

  1. setInterval(参数1,参数2):定时器也叫计时器:按照设定的时间间隔循环往复执行程序。

    • 参数1:执行的函数程序,可以是匿名函数或者函数名。

      • 匿名函数:window.setInterval(()=>console.log('哈哈'),100);

      • 函数名,不带括号:window.setInterval(fe,100);

      • 函数名,带括号:window.setInterval('fe()',100);

    • 参数2:时间间隔,单位:毫秒。

  2. clearInterval():清除定时器-setInterval();

    • let ia = window.setInterval(()=>console.log('哈哈'),100);

    • cleanInterval(ia);

  3. setTimeout(参数1,参数2):延时器,按照设定的时间间隔延迟执行程序,只会执行一次。

    • 参数1:执行的函数程序,可以是匿名函数或者函数名。

    • 参数2:时间间隔,单位:毫秒。

  4. cleanTimeout():清除延时器-setTimeout();

    • let ta =window.cleanTimeout(()=>console.log('哈哈'),100);

    • cleanInterval(ta);


3.window子对象.

3.1screen对象.

  • screen对象 :包含显示设备的信息;

  • 常用属性:screen.height、screen.width:返回设备的分辨率。如:

    • let fb = ()=> alert(`高度:${screen.height},宽度:${screen.width}`);


3.2location对象.

  • 常用属性:

    1. href:设置或者获取 URL。

      • 获取当前页面的URL地址:let fb = ()=> alert(`获取当前页面的URL:${location.href}`);

      • 跳转到百度页面:let fc = ()=> location.href='http://www.baidu.com'。

      • 也可以通过行内js代码跳转页面:<a href="javascript:location.href='test01.html'">跳转到test01.html</a>;

    2. host:获取当前服务器名称/IP地址和端口号:

      • let fb = ()=> alert(`服务器名称/IP地址和端口号:${location.host}`);

    3. hostname:返回不带端口号的服务器名称/IP地址:

      • let fb = ()=> alert(`服务器名称/IP地址:${location.host}`);

    4. port:返回服务器端口号:

      • let fb = ()=> alert(`服务器端口号:${location.port}`);

    5. pathname:返回URL中的目录名和页面名:

      • let fb = ()=> alert(`当前URL的目录名和页面名:${location.pathname}`);

    6. protocol:返回页面使用的协议(http:或https:):

      • let fb = ()=> alert(`当前URL的协议:${location.protocol}`);


  • 常用方法:

    1. reload():重新加载页面/刷新页面。

      • 不带参数相当于刷新按钮或者f5,location.reload();

      • 如果参数为 true则是强制刷新,想等于按钮ctrl+f5。location.reload(true);

      • 也可以通过行内js代码实现:<a href="javascript:location.reload()">刷新本页</a>。

    2. assign():和href一样,可以跳转页面。location.assign('http://www.baidu.com');

    3. replace():替换当前页面,因为不记录历史,所以不能后退页面。location.replace('http://www.baidu.com');


3.3history对象.

  1. history.back():无参,后退,和浏览器左上角的后退按钮相同;

  2. history.forward():无惨,前进,和浏览器左上角的前进按钮相同;

  3. history.go(参数):当参数是1的时候,表示前进一个页面,等同于 forward;如果参数是-1,表示后退一个页面,等同于back函数。如果是N或者-N则前进或后退N个页面;

  • 以上方法在执行的时候页面必须有历史跳转记录,也就是跳转过至少一次获N次。


4.案例演示.

4.1时钟案例.

  • 日期格式转换成本地时间格式:


4.2随机数案例.

  • 在 js里面 Math.random() 是在 0-1范围之内随机产生一个浮点型数字(不包含0和1),产生的最大值是0.999999999999999999;

  • Math.random()*9 是在 0-9范围之内随机产生一个浮点型数字(不包含0和9),产生的最大值是8.999999999999999。如果再对 Math.random()*9 进行四舍五入取整,如:Math.round(Math.random() * 9);,那么就是在 0-9 范围之内随机产生一个数字。

  • 补充:toFixed(),作用是保留指定小数位,有四舍五入。如:alert(1.5326.toFixed(3));  保留小数位后3位数,结果是:1.533。如果是整数,则要先赋给变量,再调用 toFixed方法,不能直接用整数调用 toFixed方法。


4.3文字展示案例.


4.4图片轮换案例.

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

BOM编程 的相关文章

  • 滚动时的 CSS 背景模糊

    我有固定的背景图像 滚动时我希望图像变得模糊 我知道如何在 css 中进行模糊 但在特定的滚动位置进行 这是一个例子 https medium com good music f160ba9e6c52 https medium com goo
  • 通过 JavaScript 获取表单名称

    我有一个简单的问题 但我在网上找不到好的解决方案 我有这个 HTML 代码
  • 如何使用javascript确保元素仅在圆上朝一个方向移动?

    好吧 我承认我对三角学真的很糟糕 出于上下文的考虑 我将添加我在这里提到的问题中的内容 参考问题 https stackoverflow com a 39429290 168492 https stackoverflow com a 394
  • 如何在网站上使用 svg 元素制作块的屏幕截图?

    我在网站上创建了一个构造函数 其本质是将所选元素及其颜色 svg中的元素 添加到访问者选择的背景和背景颜色 png中的背景 中 然后必须单击 保存 结果 按钮并仅执行工作区的屏幕截图 我写了这个脚本 但它需要屏幕截图 但只有背景 并忽略选定
  • 本地推送通知到在应用程序内运行 JS 代码的 Win8 Live Tile

    我正在尝试将更新发送到我的应用程序的磁贴 当应用程序运行时 这可以正常工作 例如 当用户单击按钮时 我可以轻松地将磁贴更新通知发送到磁贴 我无法解决的是当应用程序无法运行时如何更新磁贴 我找到的唯一选择是使用以下命令从远程 Web 服务器拉
  • IntersectionObserver是否支持水平滚动观察?

    我制作了几个垂直滚动 IntersectionObserver 模块 但我对水平滚动感兴趣 根将是 div 观察目标将是 img 我想观察当 img 放大但 div 保持视口宽度时的变化 我什至不确定移动 Safari 是否会将缩放后的图片
  • ReactTransitionGroup 不适用于 React-redux 连接组件

    我正在开发一个更大的项目 但我创建了这个简短的示例来说明问题 如果我使用Box组件 它的工作原理 它在控制台中输出componentWillEnter and componentWillLeave当我们点击按钮时 如果我使用BoxConta
  • 如何使用 Greasemonkey 监视静态 HTML 页面的更改?使用哈希?

    我希望我的 Greasemonkey 脚本仅在其访问的静态页面具有与以前完全相同的内容时运行 现在我可以设置一个包含该页面哈希的变量 我正在寻找一种动态散列页面的方法 以便我可以将我的散列与生成的散列进行比较 关于如何即时实现散列的任何想法
  • JavaScript推送函数中的动态变量

    我在 JavaScript 中使用推送功能 var chartData for var i 0 i lt 3 i chartData push date new Date year s mon s date s hr s min s sec
  • 如何在另一个自定义 Hook 中使用返回值的自定义 Hook?

    我正在使用 React native 其中有一个名为的自定义 HookuseUser使用以下方法从 AWS Amplify 获取用户信息Auth getUserInfro方法 然后获取返回对象的一部分并用它设置一个状态变量 我还有另一个名为
  • 如何在模态打开时防止主体滚动

    我在用着W3schools 模态脚本 https www w3schools com howto tryit asp filename tryhow css modal我想添加一个功能 防止模型打开时整个主体滚动 我根据我的需要对原始脚本做
  • 为什么我的交互式图像仅在 Internet Explorer 上出现故障?

    我的问题 我为自己制作了一个图像地图 交互式图像 它在 Chrome safari 和 Firefox 上完美运行 然而 当我在可怕的互联网浏览器上尝试它时 它真的很糟糕 这些小点应该扩展到更大的盒子中 在互联网浏览器上它要么不起作用 要么
  • 如何计算特定字符在字符串中出现的次数

    我正在尝试创建一个函数来查看数组中的任何字符是否在字符串中 如果是 有多少个 我尝试计算每一种模式 但是太多了 我尝试使用 Python 中的 in 运算符的替代方案 但效果不佳 function calc fit element var
  • 聆听 Angular 2 中的元素可见性

    我正在为我的网络应用程序使用 Bootstrap 和 Angular 2 v4 我想监听指令中的元素以了解可见性变化 我的元素有一个可以隐藏其子元素的父元素hidden sm up我需要在每次隐藏或显示时触发一个函数 div hidden
  • 使用 Javascript 设置 cookie [重复]

    这个问题在这里已经有答案了 我正在尝试构建我的第一个移动应用程序 它需要连接到我的 mysql 数据库并使用 json 返回数据 这很好 目前我有一个登录系统 一旦确定用户名和密码存在 它就会返回一条成功消息 对于下一步 我想在我的页面上使
  • 如何从浏览器向服务器发送“页面将关闭”消息?

    我想向每个 html 文档添加一个脚本 JavaScript 该脚本向服务器发送两条消息 页面确实打开了 页面将关闭 此消息包含页面打开的时间 打开消息应在文档加载时 或加载完成时 发送 这是简单的部分 The close message
  • 使用javascript动态更新css内容

    需要将 css 更新为动态值 我不确定最好的方法是什么 div style zoom 1 div 缩放级别将根据窗口大小调整触发 应用程序将相应缩放 我将此应用程序加载到 cordova 中并让它在 iPAD 中运行 然后我意识到需要使用
  • Flot 库将 y 轴设置为最小值 0 和最大值 24

    如何将 y 轴设置在 0 到 24 的范围内 这是我的代码 j plot j placeholder d1 xaxis mode time min new Date 2010 11 01 getTime max new Date 2011
  • 仅当显式选择行时才关闭 ui-bootstrap typeahead

    我创建了这个jsBin http jsbin com livuqafe 2 edit来证明我遇到的问题 如果您转到此处 请尝试输入 五 并继续 你的自然反应是输入 五 然后按 Tab 如果你想要 五百 你可以向下箭头一次 但是 在这种情况下
  • 如何通过索引访问 JSON 对象中的字段

    我知道这不是最好的方法 但我别无选择 我必须通过索引访问 JSONObject 中的项目 访问对象的标准方法是只写this objectName or this objectName 我还找到了一种获取 json 对象内所有字段的方法 fo

随机推荐

  • 中国半导体硅片行业未来发展趋势与销售规模预测报告2022版

    中国半导体硅片行业未来发展趋势与销售规模预测报告2022版 HS HS HS HS HS HS HS HS HS HS HS HS 修订日期 2021年11月 搜索鸿晟信合研究院查看官网更多内容 第一章 半导体硅片相关概述 1 1 半导体硅
  • C语言向上取整数简单写法

    C语言整数除法向上取整 define GET M N M 1 N 1 实例 一共100字节的数据 一次发送11字节 需要发送多少次 GET 100 16 7 次
  • 记录一道leetcode算法题的坑

    题目链接 这个题并不难 只是想让自己牢记一句老话 题目里面的每个条件都有用 int twoSum int nums int numsSize int target int returnSize int a 2 0 注意 注意 注意 retu
  • Mathematica 随机打乱列表顺序/列表随机重排列

    更新 找到相关函数了 没仔细看说明以为RandomSample只能随机取样来着 汗 RandomSample list 原内容 没必要看了 没有找到直接的相关函数 想到的方法是随机交换列表元素 例如以下程序为1 10的数字乱序 Permut
  • IP数据包长度问题总结

    首先要看TCP IP协议 涉及到四层 链路层 网络层 传输层 应用层 其中以太网 Ethernet 的数据帧在链路层 IP包在网络层 TCP或UDP包在传输层 TCP或UDP中的数据 Data 在应用层 它们的关系是 数据帧 IP包 TCP
  • TypeError: write() argument must be str, not bytes报错原因及Python3写入二进制文件方法

    Python2随机写入二进制文件 with open python2 random bin w as f f write os urandom 10 但使用Python3会报错 TypeError must be str not bytes
  • Java设计模式:深入解析与应用示例

    文章目录 引言 一 单例模式 二 工厂模式 三 抽象工厂模式 四 建造者模式 五 原型模式 六 适配器模式 七 装饰器模式 八 观察者模式 九 策略模式 十 命令模式 结语 引言 设计模式是一种在特定上下文中反复出现的可重用解决方案 用于处
  • Linux / ldd 命令的介绍与使用

    0 介绍 ldd 用来打印或者查看程序运行所需的共享库 访问共享对象依赖关系 常用来解决程序因缺少某个库文件而不能运行的一些问题 1 首先 ldd 不是一个可执行程序 而只是一个 shell 脚本 2 ldd 能够显示可执行模块的 depe
  • 学习笔记Flink(八)—— 基于Flink 在线交易反欺诈检测

    一 背景介绍 信用卡欺诈 信用卡欺诈是指故意使用伪造 作废的信用卡 冒用他人的信用卡骗取财物 或用本人信用卡进行恶意透支的行为 在当今数字时代 信用卡欺诈行为越来越被重视 罪犯可以通过诈骗或者入侵安全级别较低系统来盗窃信用卡卡号 用盗得的信
  • mipi和isp处理_ISP-摄像头的最强大脑- 图像质量及色彩科技知识分享平台 图像质量与色彩管理 - Powered by HDWiki!...

    做为拍照手机的核心模块之一 camera sensor效果的调整 涉及到众多的参数 如果对基本的光学原理及sensor软 硬件对图像处理的原理能有深入的理解和把握的话 对我们的工作将会起 到事半功倍的效果 否则 缺乏了理论的指导 只能是凭感
  • 【系统篇 / 文件】01. 文件服务安装与配置 ❀ Windows Server 2008 R2

    简介 文件服务提供帮助管理存储 启用文件复制 管理共享文件夹 确保快速搜索文件 以及启用对UNXI客户端计算机访问的技术 使用文件服务 组织可以将文件存储到中心位置 然后通过公司网络与用户共享 可以为这些共享文件创建索引 以帮助用户快速查找
  • K8S deployment可视化故障排查指南

    这是一个示意图 可帮助您调试Kubernetes中的deployemnt 当您希望在Kubernetes中部署应用程序时 通常定义三个组件 一个deployment 这是创建名为Pods的应用程序副本的秘诀 一个service 内部负载平衡
  • cocos creator 中读取Excel表格中的数据

    一 使用相应工具将Excel文件转化成JSON文件导入到cocos creator资源文件 二 在VS中对Excel文本中的数据进行转换 Excel文本中各项数据的名称对应代码中的data export default class Task
  • Apache-tomcat-8.5.82下载安装以及环境变量配置

    一 下载apache tomcat 8 5 82 1 进入apache官网 Apache Tomcat Welcome 选择Download gt Tomcat8 进入Apache Tomcat Apache Tomcat 8 Softwa
  • 分布式计算,泛在计算,BOINC

    BOINC平台简介 知乎 Download BOINC client software 开源源代码 https github com BOINC boinc 介绍 https www equn com wiki BOINC 使用指南 htt
  • 【Antdv】a-date-picker showTime带时间默认00:00:00

    show time 默认当前系统时间 设置默认 00 00 00
  • 预编码

    原则上说MIMO技术并不一定需要预编码 使用预编码的前提是发射端可以及时获取信道信息 也就是CSIT 在通常情况下 只有接收端可以知道信道信息CSIR 在这个情况下 接收端通过复杂的信号处理算法 如MMSE SIC 可以解调出多路的MIMO
  • Zookeeper 通知更新可靠吗? 解读源码找答案!

    欢迎大家前往腾讯云 社区 获取更多腾讯海量技术实践干货哦 本文由特鲁门发表于云 社区专栏 导读 遇到Keepper通知更新无法收到的问题 思考节点变更通知的可靠性 通过阅读源码解析了解到zk Watch的注册以及触发的机制 本地调试运行模拟
  • 软件架构及几种典型框架

    什么是软件架构 什么是软件框架 很多时候 我们常常会混用架构和框架这两个词 实际上 广义上的架构和框架在概念上有很大的不同 架构给人的感觉 包容上更大 所以实际上架构是包含了框架的概念的 广义的架构应为一个系统的架构 不仅仅涉及软件中的技巧
  • BOM编程

    1 BOM概述 BOM 浏览器对象模型 Browser Object Model 它提供了独立于内容的 可以与浏览器窗口进行互动的对象结构 通过BOM可以操作浏览器窗口 比如弹出框 控制浏览器跳转 获取分辨率等 BOM是把 浏览器 当做一个