js window对象

最新推荐文章于 2024-08-22 23:42:23 发布

郑书鑫

最新推荐文章于 2024-08-22 23:42:23 发布

阅读量493

点赞数

分类专栏： js 文章标签： javascript 开发语言前端

本文链接：https://blog.csdn.net/weixin_63825009/article/details/132699042

版权

js 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

1.1 window对象的应用

window 对象是 BOM 的顶层 ( 核心 ) 对象，所有对象都是通过它延伸出来的，也可以称为 window 的子对象。

window 对象表示一个浏览器窗口或一个框架。在客户端 JavaScript 中， Window 对象是全局对象，所有的表达式都在当前的环境中计算。也就是说，要引用当前窗口根本不需要特殊的语法，可以把那个窗口的属性作为全局变量来使用。可以只写document，而不必写window.document。

同样，可以把当前窗口对象的方法当作函数来使用，如只写 alert() ，而不必写 Window.alert() 。

例如：

document.write("直接使用document来调用<br>");
window.document.write("使用window来调用document<br>");
// alert("直接调用alert");
// window.alert("window调用alert");
var a = 10;
document.write(window.a);

也就是说调用 window 对象的属性或方法可以省略 window 。

1.2 三种弹出框

1 、 alert() ：显示带有一段消息和一个确认按钮的警告框。

// 1、alert()：显示带有一段消息和一个确认按钮的警告框
// 参数: 任意类型的参数,只需要传递一个参数即可 （基本上都是字符串类）
// 无返回值
var alertReturn = alert("Hello"); // 一个方法如果没有返回值,那么就是undefined
console.log(alertReturn);

2 、 confirm() ：显示带有一段消息以及确认按钮和取消按钮的对话框 . 返回值为布尔值；如果点击确定则 返回 true, 点击取消返回 false 。

// 2、confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框.返回值为布尔值；如果点击确定则
返回true,点击取消返回false。
// 参数: 任意类型的参数,只需要传递一个参数即可 （基本上都是字符串类）
// 布尔类型
var confirmReturn = confirm("是否删除?");
console.log(confirmReturn);

3、prompt()：显示可提示用户输入的对话框。第一个参数是提示,第二个参数是默认值(可选);返回值为输入的值，取消返回null；需要注意的是，返回的输入值是一个string类型的数据。

// 3、prompt()：显示带一段消息和用户输入的对话框并且有确定和取消按钮。
// 第一个参数是提示,第二个参数是默认值(可选,输入框的默认值);
// 点击确定,返回值为输入的值，取消返回null；需要注意的是，返回的输入值是一个string类型的数据。
var ageStr = prompt("请输入您的年龄", "只能输入1-99的数值");
//var ageStr = prompt("请输入您的年龄(1-99)");
console.log(ageStr);


// 只要输入的不是1-99,则继续输入
while (true) {
var ageStr = prompt("请输入您的年龄(1-99)");
// 把输入的转换为数值,判断是否可以转换为数值
var age = Number(ageStr); // 非数值字符串,NaN;数值字符串直接转换为数值
if (!isNaN(age) && age >= 1 && age <= 99) {
console.log("您的年龄是:" + age);
break;
}
}

1.3 窗体控制

1 、 open() ：打开一个窗体。

语法：window.open(URL, name, [specs])，该方法返回打开窗口的引用。

参数介绍：

URL：可选。打开指定的页面的URL。如果没有指定URL，打开与新的空白窗口
name：可选。指定窗口的名称。
specs：一个逗号分隔的项目列表。支持以下值：

height=pixels 窗口的高度，最小值为100。
left=pixels 该窗口距离屏幕左侧的位置。
top=pixels 该窗口距离屏幕顶部的位置。
width=pixels 窗口的宽度，最小值为100。

注：窗口相对位置是以屏幕为基准。

<script>
window.open("page.html","newWind","width=520,height=420,left=100,top=30")
</script>

2 、 close() ：关闭浏览器窗口。

1.4 窗体滚动

1 、 scrollBy(xnum,ynum) ：按照指定的像素值来滚动内容。

xnum 把文档向右滚动的像素数。
ynum 把文档向下滚动的像素数。

2、scrollTo(xpos,ypos)：把内容滚动到指定的坐标。

xpos 要在窗口文档显示区左上角显示的文档的 x 坐标。
ypos 要在窗口文档显示区左上角显示的文档的 y 坐标。

1.5 窗体打印

print() ：打印当前窗口的内容

调用 print() 方法所引发的行为就像用户单击浏览器的打印按钮。通常，这会产生一个对话框，让用户可以取消或定制打印请求。

1.6 定时器

window 对象中处理时间和间隔的函数有 4 个：

setTimeout()函数、clearTimeout()函数
setInterval()函数、clearInterval()函数

1.7 window对象常用属性

innerWidth 返回窗口的文档显示区的宽度。
innerHeight 返回窗口的文档显示区的高度。
name 设置或返回窗口的名称。
outerheight 返回窗口的外部高度。
outerwidth 返回窗口的外部宽度。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
document.write("窗口文档显示区域的宽度:" + innerWidth + "<br>");
document.write("窗口文档显示区域的高度:" + innerHeight + "<br>");
document.write("窗口的宽度:" + outerWidth + "<br>");
document.write("窗口的高度:" + outerHeight + "<br>");
</script>
</body>
</html>