js浏览器对象模型【BOM】(十三)
一、时间定时器
1、超时调用
setTimeout(fun,time) 【返回一个唯一标识该超时调用的ID数值】
参数:
fun:要执行的函数
time:设置第多少毫秒后执行fun函数
clearTimeout(ID) 取消超时调用定时器【通过定时器返回的唯一标识ID值取消定时器】
eg:
- var id = setTimeout(function(){
- console.log('hello');
- },10000); //设置第10秒后输出hello
- console.log('--------------');
- setTimeout(function(){
- //5秒后终止setTimeout
- console.log('5000毫秒');
- //清除超时调用
- clearTimeout(id); //第5秒后输出5000毫秒并清除id定时器
- },5000);
2、间歇调用
setInterval(fun,time) 【返回一个唯一标识该超时调用的ID数值】
按照指定的时间间隔重复执行fun函数代码,直到间歇调用被取消或页面被卸载
参数:
fun:要执行的函数
time:设置每个多少毫秒时间执行fun函数
clearInterval(ID) 取消间歇调用【通过定时器返回的唯一标识ID值取消定时器】
eg:
- //每隔一秒后输出1
- var sid = setInterval(function(){
- console.log(1);
- },1000);
- //在第10秒后清除间歇调用
- setTimeout(function(){
- clearInterval(sid); //第10秒后取消sid定时器,sid只执行了9次,在第10秒后就被取消了
- },10000);
二、系统对话框 【调用对话框显示时会停止执行代码,关闭后在继续执行,如需在弹出框中显示换行,使用转义字符\n】
1、alert(要显示的警告信息) 【警告对话框】
显示包含指定的文本和一个"OK"按钮
2、confirm(要显示的确认信息) 【确认对话框】 【返回布尔类型】
显示包含指定的文本和一个"OK"按钮以及"Cancel"按钮
该方法返回布尔值:
a、单击了OK返回true
b、单击cancel或者关闭按钮返回false
3、prompt(要显示提示信息,[文本输入域显示的默认值]) 【提示会话框】【返回输入域的值或null】
显示包含文本,ok按钮,cancel按钮以及一个文本输入域,以供用户在其中输入内容;第二个参数可以不写
该方法返回值:
a、单击OK按钮,该方法返回输入域的值
b、单击了Cancel或者关闭对话框该方法返回null
三、window对象
1、window对象的一些相关属性:
innerWidth 浏览器窗口的内宽度(以像素计)
innerHeight 浏览器窗口的内高度(以像素计)
2、window对象的一些相关方法:
open(url) 打开新窗口【在新选项卡中打开url页面】
close() 关闭当前窗口【大多数浏览器只允许脚本自动关闭由脚本创建的窗口】
moveTo(x,y) 移动当前窗口 【可把窗口的左上角移动到一个指定的坐标】
resizeTo(width,height) 重新调整当前窗口【可把窗口的左上角移动到一个指定的坐标】
stop() 停止页面载入
四、location对象 【既是window对象也是document对象】
提供与当前窗口中加载的文档有关的信息,还提供一些导航功能。
eg:
- console.log(window.location == document.location); //true
1、location对象的一些相关属性:
host 返回带端口号的服务器名称
hostname 返回不带端口号的服务器名称
href 返回当前加载页面的完整URL
pathname 返回URL的目录和文件名
port 返回URL中指定的端口号
protocol 返回页面使用协议
search 返回URL的查询字符串【url地址后面携带的一些参数部分】,这个字符串以问号开头
2、location对象的一些相关方法:
assign(url) 【可返回上一个浏览页面】
打开新url,并会历史记录中添加一条记录
eg:
- //三者作用效果一样
- window.location="https://www.cnblogs.com/nzcblogs/";
- location.href="https://www.cnblogs.com/nzcblogs/"
- location.assign("https://www.cnblogs.com/nzcblogs/");
replace(url) 【不可返回上一个浏览页面】
重新定位到url路径的页面上,不会在历史记录中添加新记录【类似重定向】
reload(boolean) 【重新加载当前显示的页面】
参数为布尔值:
false,表示以最有效方式重新加载,可能从缓存中直接加载 【默认值为false】
true,表示强制从服务器中重新加载【相当于使用了location、location.href、location.assign(url)重新打开url路径页面】
window.open(url) 在新选项卡中打开url页面
五、history对象
1、history对象的一些相关属性:
length 返回历史列表中的网址数
注意:IE和Opera从0开始,而Firefox、Chrome和Safari从1开始。
2、history对象的一些相关方法:
back()
加载历史列表中上一个 URL,这等同于在浏览器中点击后退按钮(向左的箭头)。
forward()
加载 history 列表中的下一个 URL,这等同于在浏览器中点击前进按钮(向右的箭头)
go(number)
加载 history 列表中的某个具体页面
参数为number类型:
正数表示向前跳转【number为1时,类似于forward()方法,加载下一个URL】
负数表示向后跳转【number为-1时,类似于back()方法,加载上一个URL】
js浏览器对象模型【BOM】(十三)的更多相关文章
- js浏览器对象模型-BOM
bom browse object model 浏览器对象模型. 也就是window对象下面的东西. location 对象 window.location.href 表示打开窗口的路径. windo ...
- 浏览器对象模型BOM
第二章 浏览器对象模型BOM 1.作用:操作窗口:提供导航对象:提供定位对象:浏览器上方的地址栏:提供跟屏幕相关对象:提供对Cookie的支持 2.根元素:window:代表整个窗口:window,o ...
- JavaScript高级程序设计(第3版)学习笔记·第8章——浏览器对象模型BOM
转自:http://www.shaoqun.com/a/43768.aspx 访问和操作浏览器窗口的模型称为浏览器对象模型BOM(Browser Object Model),但习惯上是把所有针对浏览器 ...
- 浏览器对象模型BOM小结
概念 BOM (Browser Object Model) 浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是window B ...
- 浏览器对象模型BOM(Browser Object Model)
1.结构 BOM是Browser Object Model的缩写,简称浏览器对象模型 BOM提供了独立于内容而与浏览器窗口进行交互的对象 由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是w ...
- JavaScript编程:浏览器对象模型BOM
4.浏览器对象模型BOM: document.body.offsetwidth可以获取浏览器宽度. Window对象: 窗口操作: 1.moveBy(dx,dy ...
- JavaScript 浏览器对象模型 (BOM)
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器“对话”. 浏览器对象模型 (BOM) 浏览器对象模型(Browser Object Model)尚无正式标准. 由于现代浏览器已经 ...
- 浏览器对象模型bom的作用是什么?
浏览器对象模型bom的作用是什么? 零.总结 1.BOM提供了独立于内容而与浏览器窗口进行交互的对象 2.BOM提供了一些访问窗口对象的一些方法,我们可以用它来移动窗口位置,改变窗口大小,打开新窗口和 ...
- 浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构)
浏览器对象模型(BOM)是什么?(体系结构+知识详解)(图片:结构) 一.总结 1.BOM操作所有和浏览器相关的东西:网页文档dom,历史记录,浏览器屏幕,浏览器信息,文档的地址url,页面的框架集. ...
- js浏览器对象模型(BOM)
浏览器对象模型(Browser Object Model,BOM):浏览器为js提供的对象集合. 1 windows对象 windows对象:表示浏览器的框架以及与其相关的内容,比如滚动条和导航栏图标 ...
随机推荐
- logstash 监控日志文件时应对日志文件名改变的原理
开门见山先说结论:基于inode实现. 分析很简单,logstash是用一个filewatch去监视文件的.在logstash目录里搜索filewatch即可找到该目录 logstash/vendor ...
- opencart 3伪静态seo url设置教程
opencart 3已经为我们做好了url伪静态功能,我们只要做一些简单的设置就能实现seo url,首先开启伪静态功能,看看文件.htaccess事发后有存在如下规则,如果没有需要先添加下面的代码 ...
- 使用 Docker-Compose 编排容器
我们知道使用一个 Dockerfile 模板文件可以定义一个单独的应用容器,如果需要定义多个容器就需要服务编排.服务编排有很多种技术方案,今天给大家介绍 Docker 官方产品 Docker Comp ...
- update Select 从查询的结果中更新表
UPDATE tbl_a a INNER JOIN tbl_b b ON a.arg=b.argSET a.arg2=b.arg2 这个语法即可实现
- django @login_required登录限制(2)-返回登陆成功后的页面
本次要实现的功能是,访问未登录的视图函数,需要先跳转到登录页面,登陆成功在跳转回来. 之前在网上找了很多资料,都没有找到解决方案. 跳转到登录页面很好弄,就是登陆成功跳转回来出了问题,原因是登录后的p ...
- dijkstra算法的堆优化
普通的dijkstra算法模板: //数据结构 int g[LEN][LEN]; //邻接矩阵 int vis[LEN]; //标记是否访问 int dist[LEN] //源点到各点的距离 fill ...
- 1473. [Ioi2000]Post加强版 n log^2 n做法
1473. [Ioi2000]Post加强版 n log^2 n做法 题面 有n个城市从负方向向正方向按照1至n标号,\(d[i]\)表示城市i离原点的距离并且\(d[1] = 0\),对于\(i \ ...
- Android Studio 之 ROM【2】, LiveData+ViewModel+AsyncTask+Repository
改造上一节 ROM[1], 1.利用 LiveData<List<Word>> 与 observe 中的 onChanged 配合,删除掉之前的textView更新函数(upd ...
- Centos 6.X查看和设置时间时区
Centos 6.X系列操作系统的修改时区和时间的方法. 一.查看Centos的时区和时间 1.使用date命令查看Centos时区 [root@VM_centos ~]# date -R Mon, ...
- JavaScript 一些实用技巧
快速创建从0到n的数字 let arr1 = [...(new Array(n)).keys()]; let arr2 = Array.from({length:n},(v, k) => k); ...