日期:2014-05-16  浏览次数:20414 次

js window 常用

Window对象是DOM对象模型的最顶层对象,代表了浏览器中用于显示文档内容的窗口,通过该对象可以访问DOM对象模型中的所有对象。Window对象和Javascript的内置对象一样,使用的时候无需手动创建,只要在HTML文档或者Web文档中使用了标签或者标签,系统就会自动创建一个Window对象。
16.1?? Window对象的方法
16.1.1?? alert方法:弹出一个警告对话框
【功能说明】使用Alert方法可以弹出一个含有制定内容的警告对话框,该对话框中还包含有一个叹号图标和一个“确定”按钮。
【基本语法】window.alert(message)
其中,message为任意有效的字符串表达式,该字符串指定了要在对话框上显示的内容。
【实例演示】下面的代码利用Alert方法弹出了一个含有提示信息的对话框。


?? var strmsg="Window对象的Alert方法测试!";
?? window.alert(strmsg);


运行这段代码可以看到图16.1所示的对话框。

图16.1?? Alert方法演示
16.1.2?? confirm:弹出一个选择对话框
【功能说明】该方法与Alert方法相似,弹出一个含有指定信息的对话框,但是该方法同Alert方法弹出的对话框也有不同之处,调用该方法弹出的对话框中含有一个问号图标和两个按钮,一个按钮的标题为“确定”,另一个按钮的标题为“取消”。
该方法的返回值为布尔类型,如果用户单击了“确定”按钮,则该方法返回True;否则返回False。
【基本语法】[blvar=]window.confirm(message)
参数说明如下。
□ message:可选项,字符串表达式,用于指定在弹出的对话框上显示的信息。
□ blvar:可选项,布尔类型,用于存储Confirm方法的返回值。
【实例演示】
Confirm方法演示


??


????? function testConfirm()
????? {
???????? var blvar;
???????? blvar=confirm("你真的要关闭该窗口吗?");
???????? if (blvar)
??????????? window.close();
???????? else
??????????? window.alert("你取消了关闭窗口操作!")?? ;
????? }


运行这段代码后会在窗口中显示一个标题为“关闭窗口”的按钮,如果单击了该按钮就会弹出一个对话框(如图16.2所示),提示是否要关闭窗口。如果选择了“确定”,则系统会关闭当前窗口;否则关闭窗口的操作将不被执行。

图16.2?? Confirm方法岩石
16.1.3?? prompt方法:弹出一个供用户输入信息的对话框
【功能说明】该方法弹出对话框,该对话框中含有一个文本框并允许在其中输入信息。在调用该方法时可以设置显示在文本框中的默认值。该方法的返回值为在文本框中输入的内容,如果用户没有在文本框中输入任何内容,则该函数的返回值为null。
【基本语法】window.prompt(message,defaultvalue)
参数说明如下。
□ message:可选项,字符串表达式,用于指定显示在对话框上的提示信息。
□ defaultvalue:可选项,字符串或某一数字,用于指定显示在文本框中的默认值。
【实例演示】

?????? var strmsg="请输入你的姓名:";
?????? var strname="李小虎";
?????? strname=window.prompt(strmsg,strname);
?????? if(strname!="" )
?????? {
????????? if (window.confirm("你就是大名鼎鼎的"+strname+"吗?"))
???????????? window.alert("见到你真是太荣幸了!!")
?????? }
??
运行这段代码弹出对话框,如图16.3所示,可以看到这个对话框中含有指定的提示信息和默认值。另外,这段代码中还用到了Confirm方法和Alert方法,这些代码的功能非常简单,不再赘述。

图16.3?? prompt方法演示
16.1.4?? blur方法:使Window失去焦点
【功能说明】调用该方法后当前Window窗口将失去焦点,此时,Window对象的onblur事件将被触发。如果同时打开了多个窗口,则调用该方法后可以使当前窗口成为底层窗口。
【基本语法】window.blur()
【实例演示】下面的代码演示了如何使用blur方法使Window失去焦点而触发onblur事件。
blur方法演示

?
??
?

运行这段代码后,会在窗口上出现一个标题为“失去焦点”的按钮,点击该按钮后,当前窗口将失去焦点,因此,窗口的onblur方法会被触发,弹出一个含有“窗口失去了焦点”字样的对话框,如图16.4所示。

图16.4?? blur方法演示
16.1.5?? setInterval方法:指定每隔多长时间执行指定代码一次
【功能说明】该方法以毫秒为单位设置一个时间间隔,此后,每个指定的时间间隔系统将执行指定的一次代码,直到窗口被关闭或者clearInterval方法被调用为止。该方法的返回值为一个整数,该整数为此次调用setInterval的标志,调用clearInterval方法时使用该整数作为参数可以取消定时执行代码的操作。
【基本语法】window.setInterval(expression,msec[arg1,arg2,…])
参数说明如下。
□ expression:必须项,可执行代码或函数名,用于指定要被反复执行的内容。
□ msec:必选项,常整型数据,以毫秒为单位指定时间间隔。
□ arg1、arg2:可选项,如果expression参数指定为某个函数名,可以使用这些选项指定函数参数。
注意:如果expression为函数名,则不需要把函数名用引号扩起来,如果为执行语句,则需要使用引号将这些代码扩起来。
【实例演示】下面的代码利用setInterval实现了倒计时的功能。
setInterval方法演示

?
?? 你已经停留秒,
?? 还可以停留秒
?
?
?? var inittime=20;
?? var havetime=0;
?? //设置计时执行代码
?? window.setInterval(settime,1000);
?? //定义函数,实现时间加减功能
?? function settime()
?? {
????? inittime--;
????? havetime++;
????? if (inittime==0)
????? {
???????? window.alert("该页面运行的停留时间已经结束,窗口即将关闭");
???????? window.close();
????? }
????? document.forms[0].time.value=inittime;
????? document.forms[0].htime.value=havetime;
?? }
?

这段代码通过setInterval函数设置每隔一秒执行函数settime一次。该函数每执行一次,就将用户在该页面的停留时间加1,而将还可停留的时间减1。当可以停留的时间为0后,就弹出提示对话框,之后将关闭当前窗口。运行这段代码,效果如图16.5所示。

图16.5?? setInterval函数演示
16.1.6?? clearInterval方法:清除setInterval方法产生的作用效果
【功能说明】该方法用于清除setInterval函数的作用效果,该方法的参数为setInterval函数的返回值,以指定的setInterval方法的返回值作为参数,可以清除与之相对应的setInterval方法的作用效果。
【基本语法】window.clearInterval(intervalID)
其中,intervalID为setInterval函数的返回值。
【实例演示】下面的代码演示了如何利用clearInterval方法清除setInterval方法的作用效果。
setInterval方法演示

?
?

???