js之Window对象方法示例

本示例来自js权威指南，它创建一个新窗口，再使用setInterval()反复调用一个函数，在屏幕上不断地移动这个窗口，它使用Screen对象确定屏幕的大小，然后根据这一信息在窗口到达屏幕边界时将它反弹回来

<script>

var bounce={

x:0,y:0,w:200,h:200, //window position and size

dx:5,dy:5, //window velocity

interval:100, //Milliseconds between updates

win:null, //The window we will create

timer:null, //Return value of setInterval()

//Start the animation

start:function(){

//Start with the window in the center of the screen

bounce.x = (screen.width - bounce.w)/2;

bounce.y = (screen.height-bounce.h)/2;

//Create the window that we're going to move around

//The javascript: URL is simply a way to display a short document

//The final argument specifies the window size

bounce.win = window.open("javascript:'<h1>BOUNCE!</h1>'","","left="+bounce.x+",top="+bounce.y+",width="+bounce.w+",height="+bounce.h+",status=yes");

//use setInterval() to call the nextFrame() method every interval milliseconds.

//Store the return value so that we can stop the animation by passing it to clearInterval()

bounce.timer = setInterval(bounce.nextFrame,bounce.interval);

},

//stop the animation

stop:function(){

clearInterval(bounce.timer); //Cancel timer

if(!bounce.win.closed) bounce.win.close(); //Close window

},

//Display the next frame of the animation.Invoked by setInterval()

nextFrame:function(){

//If the user closed the window,stop the animation

if(bounce.win.closed){

clearInterval(bounce.timer);

return;

}

//Bounce if we have reached the right or left edge

if((bounce.x+bounce.dx > (screen.availWidth - bounce.w))||(bounce.x+bounce.dx<0))

bounce.dx = -bounce.dx;

//Bounce if we have reached the bottom or top edge

  if((bounce.y+bounce.dy > (screen.availHeight - bounce.h))||(bounce.y+bounce.dy <0))

bounce.dy  = -bounce.dy;

//Update the current position of the window

bounce.x +=bounce.dx;

bounce.y +=bounce.dy;

//Finally,move the window to the new position

bounce.win.moveTo(bounce.x,bounce.y);

//Display current position in window status line

bounce.win.defaultStatus = "("+bounce.x+","+bounce.y+")";

}

}

</script>

<button onclick = "bounce.start()">Start</button>

<button onclick = "bounce.stop()">Stop</button>