javascript基礎：window物件的screen屬性、移動視窗、縮放視窗
阿新 • • 發佈：2019-01-31
window物件的screen屬性，也是一個物件，包含了關於螢幕的解析度，以及可視的長寬。
通過window物件的moveTo，resizeTo 函式，可以指定瀏覽器程式在螢幕上顯示的x、y座標，以及視窗的長寬，moveBy和resizeBy函式是相對於當前瀏覽器位置做移動和變化。
另外，程式碼對chrome瀏覽器和IE瀏覽器，進行分別處理。
最後通過window定時器實現了每隔0.5秒，自動變化視窗大小。
程式碼：
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>Document</title> <script language="javascript"> var interval; var i = 1; //在chrome瀏覽器中，只有先open一個視窗，moveTo,resizeTo,moveBy,resizeBy函式才有效果 function openWinChrome() { //引數1，引數2都為空，並且第3個引數指定具體的屬性，才會有彈出視窗 myWin= window.open("","","height=300,width=300"); } //moveTo,resizeTo：絕對值 //moveBy,resizeBy：相對值 function maxWinChrome() { if(window.screen) { myWin.moveTo(0,0); myWin.resizeTo(window.screen.availWidth,window.screen.availHeight); } } function moveWinChrome() { myWin.moveBy(50,50); //移動視窗 myWin.resizeBy(50,50); //增大視窗 } //IE能支援這些函式 function maxWinIE() { if(window.screen) { window.moveTo(0,0); window.resizeTo(window.screen.availWidth,window.screen.availHeight); } } function moveWinIE() { window.moveBy(150,150); //移動視窗 window.resizeBy(10,10); //增大視窗 } //每隔0.5秒，視窗會變大或者變小 //以座標位置650,300，長寬500為基礎，計算出這個正方形的中心點座標是900,550 //如果變大之後的長寬是600，那麼座標點就是600,250 function varyWinIE() { if(i == 1) { i = 2; window.moveTo(650,300); window.resizeTo(500,500); } else if(i == 2) { i = 1; window.moveTo(600,250); window.resizeTo(600,600); } } function ss() { interval = setInterval("varyWinIE()",500) } </script> </head> <body> <form> <input type="button" value="開啟視窗(chrome)" onclick="openWinChrome()"> <input type="button" value="最大化視窗(chrome)" onclick="maxWinChrome()"> <input type="button" value="移動視窗(chrome)" onclick="moveWinChrome()"><hr> <input type="button" value="最大化視窗(IE)" onclick="maxWinIE()"> <input type="button" value="移動視窗" onclick="moveWinIE()"> <input type="button" value="變化視窗" onclick="ss()"> <input type="button" value="停止變化視窗" onclick="clearInterval(interval);"> </form> <script language="javascript"> document.write("<hr>螢幕解析度：" + window.screen.width+ "*" + window.screen.height); document.write("<hr>螢幕視野：" + window.screen.availWidth+ "*" + window.screen.availHeight); document.write("<hr>色彩數：" + window.screen.colorDepth); document.write("<hr>瀏覽器程式左邊頁邊距的座標：" + window.screenLeft); document.write("<hr>瀏覽器程式上邊頁邊距的座標：" + window.screenTop); </script> </body> </html>