一:Window对象常用属性和方法
(1)简单对话框:alert()、confirm()和prompt();
<html> <head> <title>简单对话框</title> </head> <body> <script> var yourname = prompt("您的名字是:"); //console.log(yourname); if(confirm("您确定吗?")==true) { alert(yourname+"先生,你好"); } </script> </body> </html>
运行结果:
(2)状态栏:status属性和defaultStatus属性;(一般不支持用,这里就不说了)
(3)定时设定和时间间隔:setTimeout()、clearTimeout()、setlterval()、clertlnterval();
<html> <head> <title>定时设定和时间间隔</title> </head> <body> <script type="text/javascript"> function display() { var content = document.getElementById("text"); content.value= new Date().toLocaleString(); } window.onload=function() { var timer; document.getElementById("start").onclick=function() { timer = setInterval('display()',1000); } document.getElementById("stop").onclick=function() { clearInterval(timer); } } </script> <input type="text" value="" id="text" size=30/> <input type="button" value="开始" id="start" /> <input type="button" value="结束" id="stop" /> </body> </html>
运行结果如下:
(4)navigator:用于获取浏览器和操作系统的信息;
(5)Screen对象:有关用户显示器的大小和可用的颜色数量信息;
<html> <head> <title>navigator对象和Screen对象</title> </head> <body> <input type="button" id="demo1" value="显示浏览器信息"/> <input type="button" id="demo2" value="显示屏幕信息"/> <script type="text/javascript"> document.getElementById("demo1").onclick= function() { alert ( "浏览器信息: "+ "名称:"+navigator.appName+" "+ "平台和版本:"+navigator.appVersion+" "+ "操作系统:"+navigator.platform+" "+ "userAgent"+navigator.userAgent ); } document.getElementById("demo2").onclick= function() { alert ( "屏幕信息: "+ "分辨率:"+screen.width+"*"+screen.height+" "+ "可用区域"+screen.availWidth+"*"+screen.availHeight ); } </script> </body> </html>
运行结果如下:
(6)location对象:窗口中当前显示的文档的URL;
document.write ("href:"+location.href+"<br>");//这里获得这个文件的地址
document.write ("href:"+location.href+"<br>");//这里获得这个文件的地址 location.href="http://www.baidu.com";//并且可以实现跳转
(7)History对象:保存着用户上网的历史记录(向前向后转网页);
histroy.back();
histroy.forward();
二:窗口相关操作
(1)窗口位置获取:
<html> <head> <title>窗口位置获取</title> </head> <body> <div id="mydiv"></div> <script type="text/javascript"> var timer = setInterval(function(){ mydiv.innerHTML='left:'+window.screenLeft+';top'+window.screenTop; })//同样的也可以设成X,Y。 mydiv.onclick=function() { clearInterval(timer); } </script> </body> </html>
(2)窗口位置移动:moveTo()和moveBy();
<html> <head> <title>窗口位置获取</title> </head> <body> <div id="mydiv">单击此处</div> <script type="text/javascript"> mydiv.onclick=function()//用ie浏览器可以看出来 { window.moveTo(0,100);//两者差不多,moveTo是移动到某个点 //window.moveBy(0,100);这个总体向下移动 } </script> </body> </html>
(3)窗口大小获取:outerWidth和outerHeight、innerWidth和innerHeight;
(4)窗口大小调整:resizeTo();和resizeBy()每次放缩增加多少;
mydiv.onclick=function()//用ie浏览器可以看出来 { window.resizeTo(300,600);//窗口大小 window.resizeBy(200,0);//每次X增加200,Y不变 }