js第6章BOM案例:打开和关闭窗口、窗口位置和大小、计数器、更改URL、获取URL参数、历史记录跳转、navigator对象和screen对象、红绿灯倒计时

本文主要是介绍js第6章BOM案例:打开和关闭窗口、窗口位置和大小、计数器、更改URL、获取URL参数、历史记录跳转、navigator对象和screen对象、红绿灯倒计时,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

1.打开和关闭窗口

弹出对话框和窗口相关的属性和方法

 弹出对话框和窗口——open()方法

name可选值

specs可选值

 2.窗口位置和大小

 3.计数器

 4.更改URL

5.获取URL参数

 6.历史记录跳转

history对象的属性和方法

无刷新更改URL地址

7. navigator对象和screen对象

8.红绿灯倒计时。


1.打开和关闭窗口

弹出对话框和窗口相关的属性和方法

分类

名称

说明

属性

closed

返回一个布尔值,该值声明了窗口是否已经关闭

name

设置或返回存放窗口名称的一个字符串

opener

返回对创建该窗口的window对象的引用

parent

返回当前窗口的父窗口

self

对当前窗口的引用,等价于window属性

top

返回最顶层的父窗口

方法

alert()

显示带有一段消息和一个确认按钮的警告框

confirm()

显示带有一段消息以及确认按钮和取消按钮的对话框

方法

prompt()

显示可提示用户输入的对话框

open()

打开一个新的浏览器窗口或查找一个已命名的窗口

close()

关闭浏览器窗口

focus()

把键盘焦点给予一个窗口

print()

打印当前窗口的内容

scrollBy()

按照指定的像素值来滚动内容

scrollTo()

把内容滚动到指定的坐标

 弹出对话框和窗口——open()方法

name可选值

name可选值

含义

_blank

URL加载到一个新的窗口,也是默认值

_parent

URL加载到父框架

_self

URL替换当前页面

_top

URL替换任何可加载的框架集

name

窗口名称

specs可选值

specs可选参数

说明

height

Number

窗口的高度,最小值为100

left

Number

该窗口的左侧位置

location

yes|no|1|0

是否显示地址字段,默认值是yes

menubar

yes|no|1|0

是否显示菜单栏,默认值是yes

resizable

yes|no|1|0

是否可调整窗口大小,默认值是yes

scrollbars

yes|no|1|0

是否显示滚动条,默认值是yes

status

yes|no|1|0

是否要添加一个状态栏,默认值是yes

titlebar

yes|no|1|0

是否显示标题栏.被忽略,除非调用HTML应用程序或一个值得信赖的对话框,默认值是yes

toolbar

yes|no|1|0

是否显示浏览器工具栏,默认值是yes

width

Number

窗口的宽度,最小值为100

<body><p><input type="button" value="打开窗口" onclick="openWin()"></p><p><input type="button" value="关闭窗口" onclick="closeWin()"></p><p><input type="button" value="检测窗口是否关闭" onclick="checkWin()"></p><p id="msg"></p><script>var myWindow;function openWin() {myWindow = window.open('', 'newWin', 'width=400,height=200,left=200');myWindow.document.write('<p>窗口名称为:' + myWindow.name + '</p>');myWindow.document.write('<p>当前窗口的父窗口地址:' + window.parent.location + '</p>');}function closeWin() {myWindow.close();}function checkWin() {if (myWindow) {var str = myWindow.closed ? '窗口已关闭!' : '窗口未关闭!';} else {var str = '窗口没有被打开!';}document.getElementById('msg').innerHTML = str;}</script>
</body>

运行效果:

 

 

 2.窗口位置和大小

分类

名称

说明

属性

screenLeft

返回相对于屏幕窗口的x坐标(Firefox不支持)

screenTop

返回相对于屏幕窗口的y坐标(Firefox不支持)

screenX

返回相对于屏幕窗口的x坐标(IE8不支持)

screenY

返回相对于屏幕窗口的y坐标(IE8不支持)

innerHeight

返回窗口的文档显示区的高度(IE8不支持)

innerWidth

返回窗口的文档显示区的宽度(IE8不支持)

outerHeight

返回窗口的外部高度,包含工具条与滚动条(IE8不支持)

outerWidth

返回窗口的外部宽度,包含工具条与滚动条(IE8不支持)

方法

moveBy()

将窗口移动到相对的位置

moveTo()

将窗口移动到指定的位置

resizeBy()

将窗口大小调整到相对的宽度和高度

resizeTo()

将窗口大小调整到指定的宽度和高度

<body><input type="button" value="打开窗口" onclick="openWin()"><input type="button" value="调整窗口位置和大小" onclick="changeWin()"><script>var myWindow;function openWin() {myWindow = window.open('', 'newWin', 'width=250,height=300');getPosSize();                   // 获取窗口信息}function changeWin() {myWindow.moveBy(250, 250);      // 将newWin窗口下移250像素,右移250像素myWindow.focus();               // 获取移动后newWin窗口的焦点myWindow.resizeTo(500, 350);    // 修改newWin窗口的宽度为500,高度为350getPosSize();                   // 获取窗口信息}function getPosSize() {// 获取相对于屏幕窗口的坐标var x = myWindow.screenLeft, y = myWindow.screenTop;// 获取窗口和文档的高度和宽度var inH = myWindow.innerHeight, inW = myWindow.innerWidth;var outH = myWindow.outerHeight, outW = myWindow.outerWidth;myWindow.document.write('<p>相对屏幕窗口的坐标:(' + x + ',' + y + ')</p>');myWindow.document.write('<p>文档的高度和宽度:' + inH + ',' + inW + '</p>');myWindow.document.write('<p>窗口的高度和宽度:' + outH + ',' + outW + '</p><hr>');}</script>
</body>

运行效果:

 

 3.计数器

方法

说明

setTimeout()

在指定的毫秒数后调用函数或执行一段代码

setInterval()

按照指定的周期(以毫秒计)来调用函数或执行一段代码

clearTimeout()

取消由setTimeout()方法设置的定时器

clearInterval()

取消由setInterval()设置的定时器

setTimeout()和setInterval()方法区别: 相同点:都可以在一个固定时间段内执行JavaScript程序代码。 不同点:setTimeout()只执行一次代码,setInterval()会在指定的时间后,自动重复执行代码。 

<body><input type="button" value="开始计数" onclick="startCount()"><input id="num" type="text"><input type="button" value="停止计数" onclick="stopCount()"><script>var timer = null, c = 0;function timedCount() {       // 在文本框中显示数据document.getElementById('num').value = c;++c;                        // 显示数据加1}function startCount() {       // 开始间歇调用timer = setInterval(timedCount, 1000);}function stopCount() {        // 清除间歇调用clearInterval(timer);}</script>
</body>

运行效果:

 4.更改URL

名称

说明

assign()

载入一个的文档

reload()

重新载入当前文档

replace()

的文档替换当前文档 

reload()方法的唯一参数,是一个布尔类型值,将其设置为true时,它会绕过缓存,从服务器上重新下载该文档,类似于浏览器中的刷新页面按钮。 

5.获取URL参数

获取URL的指定部分:location.属性名。 设置URL的指定部分:location.属性名 = 值。

location对象的属性

属性

说明

属性

说明

hash

返回一个URL的锚部分

pathname

返回URL的路径名

host

返回一个URL的主机名和端口

port

返回一个URL服务器使用的端口号

hostname

返回URL的主机名

protocol

返回一个URL协议

href

返回完整的URL

<body><input type="button" value="载入新文档" onclick="newPage()"><input type="button" value="刷新页面" onclick="freshPage()"><p id="time"></p><script>// 获取并显示当前页面载入的时间var ds = new Date(), d = ds.getDate();var t = ds.toLocaleTimeString();document.getElementById('time').innerHTML = t;// 载入新文档function newPage() {window.location.assign('http://www.example.com')}// 刷新文档function freshPage() {location.reload(true);}</script>
</body>

运行效果:

 6.历史记录跳转

history对象的属性和方法

分类

名称

说明

属性

length

返回历史列表中的网址数

方法

back()

加载history列表中的前一个URL

forward()

加载history列表中的下一个URL

go()

加载history列表中的某个具体页面

<body><input type="button" value="前进" onclick="goForward()"><input type="button" value="新网页" onclick="newPage()"><script>function newPage() {      // 打开一个新的文档window.location.assign('show.html');}function goForward() {    // 前进history.go(1);}</script>
</body>

show.html

<body><input type="button" value="后退" onclick="goBack()"><script>function goBack() {history.go(-1);}</script>
</body>

运行效果:

 

无刷新更改URL地址

pushState()方法会改变浏览器的历史列表中记录的数量。

replaceState()方法仅用于修改历史记录,历史记录列表的数量不变,与location.replace()方法的功能类似。 

7. navigator对象和screen对象

navigator对象提供了有关浏览器的信息。

navigator对象的属性和方法

分类

名称

说明

属性

appCodeName

返回浏览器的内部名称

appName

返回浏览器的名称

appVersion

返回浏览器的平台和版本信息

cookieEnabled

返回指明浏览器中是否启用cookie的布尔值

platform

返回运行浏览器的操作系统平台

userAgent

返回由客户端发送服务器的User-Agent头部的值

方法

javaEnabled()

指定是否在浏览器中启用Java

screen对象用于返回当前渲染窗口中与屏幕相关的属性信息,如屏幕的宽度和高度等。 

 screen对象的属性和方法

名称

说明

height

返回整个屏幕的高

width

返回整个屏幕的宽

availHeight

返回浏览器窗口在屏幕上可占用的垂直空间

availWidth

返回浏览器窗口在屏幕上可占用的水平空间

colorDepth

返回屏幕的颜色深度

pixelDepth

返回屏幕的位深度/色彩深度

8.红绿灯倒计时。

现实生活中,为保证行人和车辆安全有序地通行,交叉路口都会设置交通信号灯。横向三色交通信号灯的亮灯顺序一般为“绿→黄→红→绿”依次循环。其中,亮灯时长需根据路口的实际情况等因素来考虑设置。例如,将某一个十字路口的交通信号灯每分钟红灯亮设置为30秒,绿灯亮设置为35秒,黄灯亮设置为5秒。

<style>.box{width:250px;height:52px;padding:15px 30px;border:2px solid #ccc;border-radius:16px;margin:0 auto;}.box .count{width:60px;color:#666;font-size:280%;line-height:50px;padding-left:6px;margin-left:5px;border:1px solid #fff}.box div{margin-left:5px;float:left;width:50px;height:50px;border-radius:50px;border:1px solid #666;}.gray{background-color:#eee;}.red{background-color:red;}.yellow{background-color:yellow;}.green{background-color:#26ff00;}
</style>
<body><div class="box"><div id="red"></div><div id="yellow"></div><div id="green"></div><div class="count" id="count"></div></div><script>// 获取红、黄、绿灯以及倒计时的元素对象var lamp = {red: {obj: document.getElementById('red'),timeout: 30,style: ['red', 'gray', 'gray'],next: 'green'},yellow: {obj: document.getElementById('yellow'),timeout: 5,style: ['gray', 'yellow', 'gray'],next: 'red'},green: {obj: document.getElementById('green'),timeout: 35,style: ['gray', 'gray', 'green'],next: 'yellow'},changeStyle(style) {this.red.obj.className = style[0];this.yellow.obj.className = style[1];this.green.obj.className = style[2];}};var count = {obj: document.getElementById('count'),change: function(num) {this.obj.innerHTML = (num < 10) ? ('0' + num) : num;}};var now = lamp.green;var timeout = now.timeout;lamp.changeStyle(now.style);count.change(timeout);setInterval(function() {if (--timeout <= 0) {now = lamp[now.next];timeout = now.timeout;lamp.changeStyle(now.style);}count.change(timeout);}, 1000);</script>
</body>

运行效果:

 

 

这篇关于js第6章BOM案例:打开和关闭窗口、窗口位置和大小、计数器、更改URL、获取URL参数、历史记录跳转、navigator对象和screen对象、红绿灯倒计时的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/WHT869706733/article/details/121737497
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/735888

相关文章

Python通用唯一标识符模块uuid使用案例详解

《Python通用唯一标识符模块uuid使用案例详解》Pythonuuid模块用于生成128位全局唯一标识符,支持UUID1-5版本,适用于分布式系统、数据库主键等场景,需注意隐私、碰撞概率及存储优... 目录简介核心功能1. UUID版本2. UUID属性3. 命名空间使用场景1. 生成唯一标识符2. 数

Python使用OpenCV实现获取视频时长的小工具

《Python使用OpenCV实现获取视频时长的小工具》在处理视频数据时,获取视频的时长是一项常见且基础的需求,本文将详细介绍如何使用Python和OpenCV获取视频时长,并对每一行代码进行深入解析... 目录一、代码实现二、代码解析1. 导入 OpenCV 库2. 定义获取视频时长的函数3. 打开视频文

PostgreSQL的扩展dict_int应用案例解析

《PostgreSQL的扩展dict_int应用案例解析》dict_int扩展为PostgreSQL提供了专业的整数文本处理能力,特别适合需要精确处理数字内容的搜索场景,本文给大家介绍PostgreS... 目录PostgreSQL的扩展dict_int一、扩展概述二、核心功能三、安装与启用四、字典配置方法

SQL Server配置管理器无法打开的四种解决方法

《SQLServer配置管理器无法打开的四种解决方法》本文总结了SQLServer配置管理器无法打开的四种解决方法,文中通过图文示例介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的... 目录方法一:桌面图标进入方法二:运行窗口进入检查版本号对照表php方法三:查找文件路径方法四:检查 S

Python实现对阿里云OSS对象存储的操作详解

《Python实现对阿里云OSS对象存储的操作详解》这篇文章主要为大家详细介绍了Python实现对阿里云OSS对象存储的操作相关知识,包括连接,上传,下载,列举等功能,感兴趣的小伙伴可以了解下... 目录一、直接使用代码二、详细使用1. 环境准备2. 初始化配置3. bucket配置创建4. 文件上传到os

Java内存分配与JVM参数详解(推荐)

《Java内存分配与JVM参数详解(推荐)》本文详解JVM内存结构与参数调整,涵盖堆分代、元空间、GC选择及优化策略,帮助开发者提升性能、避免内存泄漏,本文给大家介绍Java内存分配与JVM参数详解,... 目录引言JVM内存结构JVM参数概述堆内存分配年轻代与老年代调整堆内存大小调整年轻代与老年代比例元空

Python中re模块结合正则表达式的实际应用案例

《Python中re模块结合正则表达式的实际应用案例》Python中的re模块是用于处理正则表达式的强大工具,正则表达式是一种用来匹配字符串的模式,它可以在文本中搜索和匹配特定的字符串模式,这篇文章主... 目录前言re模块常用函数一、查看文本中是否包含 A 或 B 字符串二、替换多个关键词为统一格式三、提

MySQL 获取字符串长度及注意事项

《MySQL获取字符串长度及注意事项》本文通过实例代码给大家介绍MySQL获取字符串长度及注意事项,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录mysql 获取字符串长度详解 核心长度函数对比⚠️ 六大关键注意事项1. 字符编码决定字节长度2

springboot项目打jar制作成镜像并指定配置文件位置方式

《springboot项目打jar制作成镜像并指定配置文件位置方式》:本文主要介绍springboot项目打jar制作成镜像并指定配置文件位置方式,具有很好的参考价值,希望对大家有所帮助,如有错误... 目录一、上传jar到服务器二、编写dockerfile三、新建对应配置文件所存放的数据卷目录四、将配置文

Python get()函数用法案例详解

《Pythonget()函数用法案例详解》在Python中,get()是字典(dict)类型的内置方法,用于安全地获取字典中指定键对应的值,它的核心作用是避免因访问不存在的键而引发KeyError错... 目录简介基本语法一、用法二、案例:安全访问未知键三、案例:配置参数默认值简介python是一种高级编