BOM:专门操作浏览器窗口的对象
1、window对象充当2个角色:
1. 全局对象
2. 包含BOM常用对象
3、打开新链接方式:
在HTML的<a>标签的学习中,我们知道了target属性和_self和_blank两个值的区别
target-->目标窗口的名称
_self: 自动获得当前窗口名称(可返回)
_blank: 创建一个新窗口,随机生成一个不重复的名字
窗口名:内存中同一个窗口名只能打开一个,后打开的,会替换先打开的
(官方解释:name,声明了新窗口的名称。这个名称可以用作标记 <a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口,那么 open() 方法就不再创建一个新窗口,而只是返回对指定窗口的引用。)
打开新链接方式四种方式:
① 在当前窗口打开新链接,可后退
html: target="_self"
js:[window.]open("url","_self")
② 在当前窗口打开新链接,禁止后退
js:location.replace("url");//使用新链接,替换旧链接,同时打开新连接
③ 在新窗口打开新链接,可同时开多个
html: target="_blank"
js:[window.]open("url","_blank");
④ 在新窗口打开新链接,只能打开一个
html: target="自定义窗口名"
js:[window.]open("url","自定义窗口名");
例、HTML: <a href="javascript:fun1()" >在当前窗口打开,可后退</a><br>
SCRIPT: function fun1(){open("http://tmooc.cn","_self"); }
4、window对象的属性:窗口大小与定位:
大小:
①innerHeight/Width: 返回窗口的文档显示区的高度/宽度(只读属性)
outerHeight/Width: 返回窗口的外部高度/宽度(只读属性)
②screen.height/width: 桌面完整分辨率宽高
screen.availHeight/availWidth: 去掉任务栏后剩余分辨率的宽高
调整大小:window.resizeTo(width,height)接受浏览器窗口新宽度和新高度
window.resizeBy(width,height)接受新窗口与原窗口的宽度和高度之差
位置:
①pageYOffset/pageXOffset:设置或返回当前页面相对于窗口显示区左上角的 X/Y 位置。
② 窗口左上角x坐标:window.screenLeft||window.screenX;
y坐标:window.screenTop||window.screenY;
③将窗口移动到指定坐标:window.moveTo(x,y)
④事件发生时,鼠标相对于整个屏幕的坐标:event.screenX|screenY
5、定时器:
setInterval() :周期性定时器,按照指定的周期(以毫秒计)来调用函数或计算表达式。方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。
setTimeout() :一次性定时器,在指定的毫秒数后调用函数或计算表达式。可以用setTimeout()实现setInterval()功能, 在一次性定时器的结尾,每次都重新启动一个一次性定时器就达到一直执行的效果了
实现一次性/周期性定时器的三个步骤
①动画的每一步要执行的任务(函数对象)
function step(){
每一步要做的事情
/*一次性定时器需要根据条件判断是否有必要继续启动下一个定时器*/
}
②将一步的任务放入定时器,反复调用,并获得存储定时器的编号
一次性:timer=setTimeout(step,间隔毫秒数|等待毫秒数)
周期性:timer=setInterval (step,间隔毫秒数|等待毫秒数)
③清理定时器(必须用全局变量,临时存储定时器的编号)
clearTimeout(timer)
停止正在等待的定时器
例:
<!DOCTYPE html>
<html>
<head>
<title>定时器</title>
</head>
<body>
<html>
<body>
<div id="clock" style="height:30px"></div>
<button onclick="window.clearInterval(int)">停止</button><!--清理定时器-->
<script type="text/javascript">
var int=window.setInterval("clock()",1000);
/*第一个参数是要定时执行的函数,第二个是间隔时间(ms),执行完获得一个返回值,用来停止定时器的*/
function clock(){
var d=new Date(); //获得当前时间
var t=d.toLocaleTimeString();//将时间格式化
document.getElementById("clock").innerHTML=t;//将格式化后的时间写入div
/*如果使用setTimeout()方法,需要把上边setInterval改为setTimeout,并在此处多一步var int=setTimeout("clock()",1000); */
}
</script>
</body>
</html>