JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript 弹窗 JavaScript 计时事件

57 阅读 0 评论 38 点赞

我是靠谱客的博主合适白开水，最近开发中收集的这篇文章主要介绍JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript 弹窗 JavaScript 计时事件，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"。

浏览器对象模型 (BOM)

浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

由于现代浏览器已经（几乎）实现了 JavaScript 交互性方面的相同方法和属性，因此常被认为是 BOM 的方法和属性。

Window 对象

所有浏览器都支持 window 对象。它表示浏览器窗口。

所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

全局变量是 window 对象的属性。

全局函数是 window 对象的方法。

甚至 HTML DOM 的 document 也是 window 对象的属性之一：

window.document.getElementById("header");

与此相同：

document.getElementById("header");

Window 尺寸

有三种方法能够确定浏览器窗口的尺寸。

对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari：

window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)

对于 Internet Explorer 8、7、6、5：

document.documentElement.clientHeight
document.documentElement.clientWidth

或者

document.body.clientHeight
document.body.clientWidth

实用的 JavaScript 方案（涵盖所有浏览器）：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p id="demo"></p>
<script>
var w=window.innerWidth

|| document.documentElement.clientWidth

|| document.body.clientWidth;
var h=window.innerHeight

|| document.documentElement.clientHeight

|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器window宽度: " + w + ", 高度: " + h + "。"
</script>
</body>
</html>

该例显示浏览器窗口的高度和宽度：（不包括工具栏/滚动条）

其他 Window 方法

一些其他方法：

window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸

JavaScript Window Screen

window.screen 对象包含有关用户屏幕的信息。

Window Screen

window.screen对象在编写时可以不使用 window 这个前缀。

一些属性：

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

Window Screen 可用宽度

screen.availWidth 属性返回访问者屏幕的宽度，以像素计，减去界面特性，比如窗口任务栏。

实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM对象</title>
</head>
<body>
<p id="demo"></p>
<script>
document.write("可用宽度:"+screen.width);
</script>
</body>
</html>

Window Screen 可用高度

screen.availHeight 属性返回访问者屏幕的高度，以像素计，减去界面特性，比如窗口任务栏。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>BOM对象</title>
</head>
<body>
<p id="demo"></p>
<script>
document.write("可用宽度:"+screen.height);
</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>BOM对象</title>
</head>
<body>
<h2>你的屏幕:</h2>
<script>
document.write("总宽度/高度:")
document.write(screen.width+"*"+screen.height);
document.write("<br/>");
document.write("可用宽度/高度:");
document.write(screen.availWidth+"*"+screen.availHeight);
document.write("<br/>");
document.write("色彩深度:");
document.write(screen.colorDepth);
document.write("<br/>");
document.write(screen.pixelDepth);
</script>
</body>
</html>

JavaScript Window Location

window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

Window Location

window.location 对象在编写时可不使用 window 这个前缀。一些例子：

一些实例:

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http:// 或 https://）：

Window Location Href

location.href 属性返回当前页面的 URL。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script>
document.write(location.href);
</script>
</head>
<body>
</body>
</html>

Window Location Pathname

location.pathname 属性返回 URL 的路径名。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>返回URL的路径名</title>
<script>
document.write(location.pathname);
</script>
</head>
<body>
</body>
</html>

Window Location Assign

location.assign() 方法加载新的文档。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Location Assign-加载新的文档</title>
<script>
function newDoc(){
window.location.assign("http://www.baidu.com");
}
</script>
</head>
<body>
<input type="button" value="加载新的文档" οnclick="newDoc()"/>
</body>
</html>

JavaScript Window History

window.history 对象包含浏览器的历史。

Window History

window.history对象在编写时可不使用 window 这个前缀。

为了保护用户隐私，对 JavaScript 访问该对象的方法做出了限制。

一些方法：

history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击向前按钮相同

Window History Back

history.back() 方法加载历史列表中的前一个 URL。

这与在浏览器中点击后退按钮是相同的：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>history.back() 方法加载历史列表中的前一个 URL</title>
<script>
function goBack(){
window.history.back();
}
</script>
</head>
<body>
<input type="button" value="Back" οnclick="goBack()"/>
</body>
</html>

Window History Forward

history forward() 方法加载历史列表中的下一个 URL。

这与在浏览器中点击前进按钮是相同的：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>history.back() 方法加载历史列表中的前一个 URL</title>
<script>
function goForwafd(){
window.history.forward();
}
</script>
</head>
<body>
<input type="button" value="forward" οnclick="goForwafd()"/>
</body>
</html>

JavaScript 弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

语法

window.alert(" sometext");

window.alert() 方法可以不带上window对象，直接使用alert()方法。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>警告框</title>
<script>
function check(){
alert("这是一个警告");
}
</script>
</head>
<body>
<input type="button" value="显示警告框" οnclick="check()"/>
</body>
</html>

确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true，如果点击 "取消", 确认框返回 false。

语法

window.confirm(" sometext");

window.confirm() 方法可以不带上window对象，直接使用confirm()方法。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>确认框</title>
<script>
function check(){
var x;
var r=confirm("按下按钮");
if(r==true){
x="您按下了"确认"按钮";
}else{
x="您按下了"取消"按钮";
}
document.getElementById("demo").innerHTML=x;
}
</script>
</head>
<body>
<p>点击按钮，显示确认框</p>
<p id="demo"></p>
<input type="button" value="点我" οnclick="check()"/>
</body>
</html>

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

语法

window.prompt(" sometext"," defaultvalue");

window.prompt() 方法可以不带上window对象，直接使用prompt()方法。

实例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>提示框</title>
<script>
function check(){
var x;
var person=prompt("请输入您的名字","vip宅男");
if(person!=null&&person!=""){
x="您好"+person+"!今天感觉如何?";
document.getElementById("demo").innerHTML=x;
}
}
</script>
</head>
<body>
<p>点击按钮查看输入的对话框。</p>
<p id="demo"></p>
<input type="button" value="点我" οnclick="check()"/>
</body>
</html>

换行

弹窗使用反斜杠 + "n"(n) 来设置换行。

实例

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>换行</title>
<script>
function check(){
alert("HollnHow are you?");
}
</script>
</head>
<body>
<p>点击按钮在弹窗总使用按钮</p>
<p id="demo"></p>
<input type="button" value="点我" οnclick="check()"/>
</body>
</html>

JavaScript 计时事件

JavaScript 一个设定的时间间隔之后来执行代码

我们称之为计时事件

JavaScript 计时事件

通过使用 JavaScript，我们有能力作到在一个设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。

在 JavaScritp 中使用计时事件是很容易的，两个关键方法是:

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 暂停指定的毫秒数后执行指定的代码

Note: setInterval() 和 setTimeout() 是 HTML DOM Window对象的两个方法。

setInterval() 方法

setInterval() 间隔指定的毫秒数不停地执行指定的代码

语法

window.setInterval(" javascript function", milliseconds);

window.setInterval() 方法可以不使用window前缀，直接使用函数setInterval()。

setInterval() 第一个参数是函数（function）。

第二个参数间隔的毫秒数

注意: 1000 毫秒是一秒。

实例

每三秒弹出 "hello" ：

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计时事件</title>
<script>
function check(){
setInterval(function(){alert("hello")},3000);
}
</script>
</head>
<body>
<p>点击按钮每3秒出现一个"hello"警告框</p>
<p>再次点击警告框,经过3秒出现新的警告框，这将一直执行......</p>
<input type="button" οnclick="check()" value="点击我"/>
</body>
</html>

实例展示了如何使用 setInterval() 方法，但是每三秒弹出一次对用户体验并不好。

以下实例将显示当前时间。 setInterval() 方法设置每秒钟执行一次代码，就是手表一样。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>当前时间</title>
<script>
var myVar=setInterval(function(){myTime()},1000);
function myTime(){
var d=new Date();
var r= d.toLocaleTimeString();
document.getElementById("demo").innerHTML=r;
}
</script>
</head>
<body>
<p>在页面上显示一个时钟</p>
<p id="demo"></p>
</body>
</html>

如何停止执行?

clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。

语法

window.clearInterval( intervalVariable)

window.clearInterval() 方法可以不使用window前缀，直接使用函数clearInterval()。

要使用 clearInterval() 方法, 在创建计时方法时你必须使用全局变量：

myVar=setInterval(" javascript function", milliseconds);

然后你可以使用clearInterval() 方法来停止执行。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>停止时钟</title>
<script>
var myVar=setInterval(function(){mypTime()},1000);
function mypTime(){
var d=new Date();
var r= d.toLocaleTimeString();
document.getElementById("demo").innerHTML=r;
}
function stopTime(){
clearInterval(myVar)
}
</script>
</head>
<body>
<p>页面上显示时钟</p>
<p id="demo"></p>
<input type="button" value="停止时钟" οnclick="stopTime()"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>简单的计时器</title>
<script>
function timedText(){
var x=document.getElementById("txt");
var t1=setTimeout(function(){x.value="2 seconds"},2000);
var t1=setTimeout(function(){x.value="4 seconds"},4000);
var t1=setTimeout(function(){x.value="6 seconds"},6000);
}
</script>
</head>
<body>
<form >
<input type="button" value="显示文本时间:" οnclick="timedText()"/>
<input type="text" id="txt"/>
<p>点击上面的按钮，输出的文本将告诉你2秒，4秒，6秒已经过去了。</p>
</form>
</body>
</html>

最后

以上就是合适白开水为你收集整理的JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript 弹窗 JavaScript 计时事件的全部内容，希望文章能够帮你解决JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript 弹窗 JavaScript 计时事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。

本文分类：Java Web开发实战
浏览次数：57 次浏览
发布日期：2023-09-15 18:25:47
本文链接：https://www.kaopuke.com/article/k-p-k_14_uzo_6_f5_12__23_ky.html

js之浏览器对象模型bom

JavaScript BOM - 浏览器对象模型

JavaScript-浏览器对象模型(BOM)

dom笔记

JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript 弹窗 JavaScript 计时事件

初学者第一周入门学习HTML、Css和JavaScript过程中遇到的问题和相关笔记1.frag是HTML中的属性吗？2.jsp代码中如何加入HTML标签，从而更改一下jsp代码中文字显示的格式，比如要‘out.println("输出100个欢迎");’输出的字体为宋体，大小为初四、颜色为绿色怎么写？3.对一个大div中包含两个并列的div，如何设置实现这两个div同一水平线，居中显示，并且里面的文字和图片也是居中显示？4.清除浮动的四种方式：

JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript 弹窗 JavaScript 计时事件

概述

浏览器对象模型 (BOM)

Window 对象

Window 尺寸

其他 Window 方法

JavaScript Window Screen

Window Screen

Window Screen 可用宽度

实例

Window Screen 可用高度

JavaScript Window Location

Window Location

Window Location Href

Window Location Pathname

Window Location Assign

JavaScript Window History

Window History

Window History Back

Window History Forward

JavaScript 弹窗

警告框

语法

确认框

语法

提示框

语法

实例

换行

实例

JavaScript 计时事件

JavaScript 计时事件

setInterval() 方法

语法

实例

如何停止执行?

语法

最后

评论列表共有 0 条评论

发表评论取消回复

JavaScript Window - 浏览器对象模型 JavaScript Window Screen JavaScript Window Location JavaScript Window History JavaScript 弹窗 JavaScript 计时事件

概述

浏览器对象模型 (BOM)

Window 对象

Window 尺寸

其他 Window 方法

JavaScript Window Screen

Window Screen

Window Screen 可用宽度

实例

Window Screen 可用高度

JavaScript Window Location

Window Location

Window Location Href

Window Location Pathname

Window Location Assign

JavaScript Window History

Window History

Window History Back

Window History Forward

JavaScript 弹窗

警告框

语法

确认框

语法

提示框

语法

实例

换行

实例

JavaScript 计时事件

JavaScript 计时事件

setInterval() 方法

语法

实例

如何停止执行?

语法

最后

相关文章

评论列表共有 0 条评论

发表评论 取消回复

发表评论取消回复