一、open() 打开新链接(4种):
1.在当前窗口打开新链接，可后退
html:
js:[window.]open("url","_self")
2.在当前窗口打开新链接，禁止后退
js:location.replace("新url");
3.在新窗口打开新链接，可同时开多个
html:
js:
4.在新窗口打开新链接，只能打开一个
target-->目标窗口的名称
_self: 自动获得当前窗口名称
_blank: 创建一个新窗口，随机生成一个不重复的名字
*窗口名：内存中同一个窗口名只能打开一个 后打开的，会替换先打开的
示例：4种打开方式
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title> new document </title> 5 <meta charset="utf-8" /> 6 <script> 7 function fun1(){//在当前窗口打开新链接，可后退 8 /*window.*/open("http://tmooc.cn","_self"); 9 // href target 10 } 11 function fun2(){//在当前窗口打开新链接，禁止后退 12 //使用新链接，替换旧链接，同时打开新连接 13 location.replace("http://tmooc.cn"); 14 } 15 function fun3(){//在新窗口打开，可打开多个 16 /*window.*/open("http://tmooc.cn"/*,"_blank"*/); 17 } 18 function fun4(){ 19 /*window.*/open("http://tmooc.cn","tmooc"); 20 //target 21 //name 22 } 23 </script> 24 </head> 25 26 <body> 27 <!--<a href="http://tmooc.cn" target="_self">在当前窗口打开，可后退</a>--> 28 <a href="javascript:fun1()" target="_self">在当前窗口打开，可后退</a><br> 29 <a href="javascript:fun2()" target="_self">在当前窗口打开，不后退</a><br> 30 <!--<a href="http://tmooc.cn" target="_blank">在新窗口打开，可打开多个</a><br>--> 31 <a href="javascript:fun3()">在新窗口打开，可打开多个</a><br> 32 <!--<a href="http://tmooc.cn" target="tmooc">在新窗口打开，只能打开一个</a>--> 33 <a href="javascript:fun4()" target="tmooc">在新窗口打开，只能打开一个</a> 34 35 </body> 36 </html>
二、窗口大小与定位
大小：
1.window.innerHeight/Width: 文档显示区宽高
outerHeight/Width: 整个窗口的宽高
2.screen.height/ 桌面完整分辨率宽高
screen.availHeight/availWidth: 去掉任务栏后剩余分辨率的宽高
3.调整大小：window.resizeTo(width,height) 调整到
resizeBy(变化的width,变化的height)
位置：
1.左上角x坐标：window.screenLeft||window.screenX;
y坐标：window.screenTop||window.screenY;
2.将窗口移动到指定坐标：window.moveTo(x,y)
3.事件发生时，鼠标相对于整个屏幕的坐标：
event.screenX|screenY
示例：移动小窗口
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>小游戏：点不到的小窗口</title> 5 <meta charset="utf-8"/> 6 <script src="js/2.js"></script> 7 </head> 8 <body> 9 <button onclick="game.start()">开始游戏</button> 10 </body> 11 </html
1 var game={ 2 smallW:null, 3 start:function(){ 4 //打开一个新窗口，设置窗口的大小，随机初始化窗口位置 5 //随机生成窗口左上角top值： 6 // 0~整个屏幕高-小窗口高 7 var maxTop=screen.availHeight-30-50; 8 var rTop=parseInt(Math.random()*(maxTop+1)); 9 //随机生成窗口左上角left值： 10 // 0~整个屏幕宽-小窗口宽 11 var maxLeft=screen.availWidth-50; 12 var rLeft=parseInt(Math.random()*(maxLeft+1)); 13 var config="top="+rTop+",left="+rLeft 14 +",height=50,width=50,resizable=yes"; 15 //打开新窗口，并返回新窗口对象，存在smallW中 16 this.smallW=open("about:blank","small",config); 17 this.smallW.document.write( 18 '<img style="height:80px" src="d:\xiaoxin.gif"/>'); 19 this.smallW.onmouseover=function(){ 20 //当鼠标进入小窗口时， 21 //获得鼠标的x，y坐标 22 var e=window.event||arguments[0]; 23 var x=e.screenX; //当前鼠标的x坐标 24 var y=e.screenY; //当前鼠标的y坐标 25 //反复随机计算新top和left值 26 while(true){ 27 var rTop= 28 parseInt(Math.random()*(maxTop+1)); 29 var rLeft= 30 parseInt(Math.random()*(maxLeft+1)); 31 if(!((y>=top&&y<=top+50) 32 && 33 (x>=left&&x<=left+50))){ 34 // 将窗口移动到rTop,rLeft的位置 35 this.moveTo(rTop,rLeft); 36 break; 37 } 38 } 39 } 40 41 } 42 }
三、定时器 让浏览器按指定时间间隔反复执行同一任务
周期性定时器：让浏览器按指定时间间隔反复执行同一任务 如果不手动停止，则一直反复执行
一次性定时器：让浏览器等待一段时间间隔，执行一次任务 自动停止。
建议：尽量使用一次性定时器，代替周期性定时器
如何使用：周期性和一次性用法完全相同的 (3步)
1. 动画的每一步要执行的任务(函数对象)
function step(){ 每一步要做的事情 }
2.将一步的任务放入定时器，反复调用
timer=setInterval(step,间隔毫秒数)
3.必须用全局变量，临时存储定时器的编号
clearInterval(timer)
一次性用法完全相同的 (3步)
1. 动画的每一步要执行的任务(函数对象)
function step(){ 每一步要做的事情 }
2.将一步的任务放入定时器，反复调用
timer=setTimeout(step,间隔毫秒数|等待毫秒数)
3.必须用全局变量，临时存储定时器的编号
clearTimeout(timer) //停止正在等待的定时器
示例：倒计时时间计算
HTML
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>倒计时</title> 5 <meta charset="utf-8"/> 6 <script src="js/4_1.js"></script> 7 </head> 8 9 <body> 10 <h1>距离放学还有<span></span></h1> 11 <button onclick="stop(this)">停止倒计时</button> 12 </body> 13 </html>
setInterval周期性调用示例
1 /* 2 定时器三件事： 3 1.每一步要重新执行的任务： 4 5 */ 6 var timer=null; 7 function calc(){ 8 //计算当前时间，距离目标时间的倒计时 hh:mm:ss 9 var target=new Date("2015/10/26 18:30:00"); 10 var now=new Date(); 11 //console.log(now.getHours()); 12 var ms=target-now; 13 //console.log(ms); 14 if(ms>1000){ 15 var h=parseInt(ms/1000/3600); 16 h<10&&(h="0"+h); 17 var m=parseInt((ms-h*3600*1000)/1000/60); 18 m<10&&(m="0"+m); 19 var s=parseInt((ms-h*3600*1000-m*60*1000)/1000); 20 s<10&&(s="0"+s); 21 var span=document.querySelector("span"); 22 span.innerHTML=span.innerHTML.indexOf(":")==-1?h+":"+m+":"+s:h+" "+m+" "+s; 23 }else{ 24 clearInterval(timer); 25 timer=null; 26 document.querySelector("span").innerHTML="00:00:00"; 27 } 28 } 29 window.onload=function(){ 30 calc(); 31 //启动倒计时动画 32 timer=setInterval(calc,800); 33 } 34 function stop(btn){ 35 if(timer!=null){ 36 //停止计时器 37 clearInterval(timer); 38 timer=null; 39 var span=document.querySelector("span"); 40 span.innerHTML=span.innerHTML.replace(/s/g,":"); 41 btn.innerHTML="启动定时器"; 42 }else { 43 //启动定时器 44 timer=setInterval(calc,800); 45 btn.innerHTML="停止定时器"; 46 } 47 }
setTimeout 一次性调用示例
1 /* 2 定时器三件事： 3 1.每一步要重新执行的任务： 4 5 */ 6 var timer=null; 7 function calc(){ 8 //计算当前时间，距离目标时间的倒计时 hh:mm:ss 9 var target=new Date("2015/10/26 18:30:00"); 10 var now=new Date(); 11 //console.log(now.getHours()); 12 var ms=new Date(target-now); 13 console.log(ms+" "+now); 14 var h=ms.getHours()-8;//默认是1970年 8点 15 h<10&&(h="0"+h); 16 var m=ms.getMinutes(); 17 m<10&&(m="0"+m); 18 var s=ms.getSeconds(); 19 s<10&&(s="0"+s); 20 var span=document.querySelector("span"); 21 span.innerHTML=span.innerHTML.indexOf(":")==-1?h+":"+m+":"+s:h+" "+m+" "+s; 22 //根据条件判断是否启动洗衣歌定时器 23 if(ms>1000){ 24 timer=setTimeout(calc,500); 25 }else { 26 timer=null; 27 span.innerHTML="00:00:00"; 28 } 29 } 30 window.onload=function(){ 31 calc(); 32 //启动倒计时动画 33 // timer=setTimeout(calc,500); 34 35 } 36 function stop(btn){ 37 if(timer!=null){ 38 //停止计时器 39 clearTimeout(timer); 40 timer=null; 41 var span=document.querySelector("span"); 42 span.innerHTML=span.innerHTML.replace(/s/g,":"); 43 btn.innerHTML="启动定时器"; 44 }else { 45 //启动定时器 46 timer=setTimeout(calc,500); 47 btn.innerHTML="停止定时器"; 48 } 49 }