Window - 浏览器对象模型

为什么说浏览器对象呢?

因为window对象它表示浏览器窗口或一个框架, 与windows操作系统没啥关系

window对象是整个JavaScript脚本运行的顶层对象

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

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

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

如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。

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

window.document.getElementById("header");

上下的语句相同

document.getElementById("header");

也就是说js书写时 window关键字是可以省略的

Window 对象属性

属性	描述
closed	返回窗口是否已被关闭。
defaultStatus	设置或返回窗口状态栏中的默认文本。
document	对 Document 对象的只读引用。请参阅 Document 对象。
history	对 History 对象的只读引用。请参数 History 对象。
innerheight	返回窗口的文档显示区的高度。
innerwidth	返回窗口的文档显示区的宽度。
length	设置或返回窗口中的框架数量。
location	用于窗口或框架的 Location 对象。请参阅 Location 对象。
name	设置或返回窗口的名称。
Navigator	对 Navigator 对象的只读引用。请参数 Navigator 对象。
opener	返回对创建此窗口的窗口的引用。
outerheight	返回窗口的外部高度。
outerwidth	返回窗口的外部宽度。
pageXOffset	设置或返回当前页面相对于窗口显示区左上角的 X 位置。
pageYOffset	设置或返回当前页面相对于窗口显示区左上角的 Y 位置。
parent	返回父窗口。
Screen	对 Screen 对象的只读引用。请参数 Screen 对象。
self	返回对当前窗口的引用。等价于 Window 属性。
status	设置窗口状态栏的文本。
top	返回最顶层的先辈窗口。
window	window 属性等价于 self 属性，它包含了对窗口自身的引用。
screenLeft screenTop screenX screenY	只读整数。声明了窗口的左上角在屏幕上的的 x 坐标和 y 坐标。IE、Safari 和 Opera 支持 screenLeft 和 screenTop，而 Firefox 和 Safari 支持 screenX 和 screenY。

Window 对象方法

方法	描述
alert()	显示带有一段消息和一个确认按钮的警告框。
blur()	把键盘焦点从顶层窗口移开。
clearInterval()	取消由 setInterval() 设置的 timeout。
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
close()	关闭浏览器窗口。
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框。
createPopup()	创建一个 pop-up 窗口。
focus()	把键盘焦点给予一个窗口。
moveBy()	可相对窗口的当前坐标把它移动指定的像素。
moveTo()	把窗口的左上角移动到一个指定的坐标。
open()	打开一个新的浏览器窗口或查找一个已命名的窗口。
print()	打印当前窗口的内容。
prompt()	显示可提示用户输入的对话框。
resizeBy()	按照指定的像素调整窗口的大小。
resizeTo()	把窗口的大小调整到指定的宽度和高度。
scrollBy()	按照指定的像素值来滚动内容。
scrollTo()	把内容滚动到指定的坐标。
setInterval()	按照指定的周期（以毫秒计）来调用函数或计算表达式。
setTimeout()	在指定的毫秒数后调用函数或计算表达式。

status属性可以改变状态栏文字, 配合定时器我们可以做出一个状态栏的动态文字效果如下:

字依次从右边向左靠的动态效果,可惜现在的浏览器出于空间考虑都砍掉了状态栏, 就是下方的显示状态的细条

上代码:

<!DOCTYPE html>
<html>
<head>
	<meta name="author" content="Yeeku.H.Lee(CrazyIt.org)" />
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title> 状态栏的动画文字 </title>
</head>
<body onload="stack();">
	<script type="text/javascript">
		// 自定义的状态文字
		var statusText = "自定义的动画状态栏文字...";
		var out = "";
		// 动画间隔时间
		var pause = 25;
		// 动画宽度
		var animateWidth = 20;
		var position = animateWidth;
		var i = 0 ;
		var stack = function()
		{
			if (statusText.charAt(i) != " ")
			{
				out = "";
				// 将0到i-1个字符拼成输出字符串
				for (var j = 0; j < i; j++)
				{
					out += statusText.charAt(j);
				}
				// 增加一定宽度空格
				for (j = i; j < position; j++)
				{
					out += " ";
				}
				// 将第i个字符添加到输出字符串里去
				out += statusText.charAt(i);
				for (j = position; j < animateWidth; j++)
				{
					out += " ";
				}
				window.status = out;
				// 如果后出来的字紧靠了前面字符串
				if (position == i)
				{
					animateWidth++;
					position = animateWidth;
					// i加1，对应为多出现一个字符
					i++;
				}
				else
				{
					position--;
				}
			}
			else
			{
				i++
			}
			if (i < statusText.length)
			{
				setTimeout("stack()",pause);
			}
		}
	</script>
</body>
</html>

关于两个定时器我会在另一篇博客介绍, 有不明白区别的同学可以看一下哦

有参考W3school内容

JavaScript中的window对象 (状态栏动态文字实例)

Window - 浏览器对象模型

Window 对象属性

Window 对象方法

猜你喜欢