BOM对象

一、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>

View Code

二、窗口大小与定位

　　大小：

　　1.window.innerHeight/Width: 文档显示区宽高

　　　　　　 outerHeight/Width: 整个窗口的宽高

　　2.screen.height/width: 桌面完整分辨率宽高

　　 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

View Code

 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 }

View Code

三、定时器 让浏览器按指定时间间隔反复执行同一任务

　　周期性定时器：让浏览器按指定时间间隔反复执行同一任务如果不手动停止，则一直反复执行

　　一次性定时器：让浏览器等待一段时间间隔，执行一次任务自动停止。

　　建议：尽量使用一次性定时器，代替周期性定时器

　　如何使用：周期性和一次性用法完全相同的 (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>

View Code

　　　　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 }

View Code

　　　　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 }

View Code

posted @ 2015-10-26 22:52 Medeor 阅读(264) 评论(0) 编辑收藏举报

刷新页面返回顶部

Medeor

WEB,JavaScript,C#学习笔记

BOM对象

公告