一個簡單的JS類比屏保效果

最後更新：2018-12-06 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

　　最近兩天較為系統複習了下js和dom，感覺各種屬性好多，還是要靠手冊來活著，要不還是記不住，腦袋不行了......

　　一個小東東聊以自娛，還是蠻不錯的。

　　這裡是html頁面

<html>
<head>
<script type="text/javascript" src="js.js">
</script>
</head>
<body>
<input type="button" value="createWindow!" onclick="createSmallWindow()"/>
<p/>
<input type="button" value="moveTheWindow!" onclick="moveTheWindow()"/>
<input type="button" value="speedUp" onclick="speedUp()"/>
<input type="button" value="speedDown" onclick="speedDown()"/>
<p/>
<input type="button" value="destroyWindow" onclick="destroyWindow()" />
<div id="divShow"></div>
</body>
</html>

　　這個是js

/*
 *    global variable
*/
var myWindow;
var timer;
var speed=10;
var screenX;
var screenY;
var windowX=200;
var windowY=200;
//the window can move 0~X,0~Y
var spanX;
var spanY;
//the window location now!
var X;
var Y;
//direction 1 or -1
var directionX;
var directionY;

//create small window for test
function createSmallWindow(){
if(myWindow==undefined)
    {
        myWindow=window.open('','','height='+windowY+',width='+windowX);
        myWindow.document.write("The window is created for test only!");
        getTheScreenWidthAndHeight();
        getTheInitDirection();
    }
}
function getTheScreenWidthAndHeight(){
    screenX=screen.width;
    screenY=screen.height;
    spanX=screenX-windowX-70;
    spanY=screenY-windowY-40;
    X=parseInt(Math.random()*screenX);
    Y=parseInt(Math.random()*screenY);
    myWindow.moveTo(X,Y);
}
function getTheInitDirection(){
var num=parseInt(Math.random()*10);
if(num%2==0)
    {
        directionX=1;
    }
else
    {
        directionX=-1;
    }
    num=parseInt(Math.random()*10);
if(num%2==0)
    {
        directionY=1;
    }
else
    {
        directionY=-1;
    }
}
function moveTheWindow(){
if(timer!=undefined)
return;
//timer=setInterval("myWindow.moveBy(1,1);",speed);
    timer=setInterval("moveIt()",speed);
}
function stopTimer(){
    clearTimeout(timer);
    timer=undefined;
}
function destroyWindow(){
    stopTimer();
    myWindow.close();
    myWindow=undefined;
}
function speedUp(){
//speed=parseInt(speed/2);
    //timer=setInterval("myWindow.moveBy(1,1);",speed);
    directionX*=2;
    directionY*=2;
}
function speedDown(){
    directionX/=2;
    directionY/=2;
}
//move the window function between the max X and Y
function moveIt(){
if(0<X && X<spanX){
        X+=directionX;
    }
else{
        directionX=directionX*(-1);
        X+=directionX;
    }
if(0<Y&&Y<spanY){
        Y+=directionY;
    }
else{
        directionY=directionY*(-1);
        Y+=directionY;
    }
    myWindow.moveTo(X,Y);
}

　　高手不要見笑啊！

PS：我在ubuntu中和windows中都用chrome來做過測試，基本上如果在windows建立10幾20個小的window，並且讓其隨機出現，那麼windows基本就是感覺相當的卡了，移動視窗都很卡，但是在ubuntu中，卻基本不會有影響，看來windows的記憶體果然是拿來看的!

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

一個簡單的JS類比屏保效果

聯繫我們

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support