仿GMAIL聊天窗口JS算法

今天做了一个模仿GMAIL里聊天的JS算法,即一共可以弹出六个聊天窗口,关闭任意一个后面的位置都往前移动,再点的时候都是在后面出现。我在IE和FIREFOX都测试过了。最近做了很多JS方面的东西,感觉JS的效率和瓶颈还是很明显的。等待JS2.0的出现希望能有所改观。

效果演示地址:查看效果演示

代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Untitled Document</title>
        <style type="text/css">
            * { font-size:12px;}
            .talk { width:60px; height:100px; background:#ccc;border:1px solid #000; position:absolute; display:none;}
            .close { float:right;}
        </style>
    </head>
    <body>
        <button onclick="addUserOneObject(74);">Add TalkWindow74</button>
        <button onclick="addUserOneObject(12);">Add TalkWindow12</button>
        <button onclick="addUserOneObject(23);">Add TalkWindow23</button>
        <button onclick="addUserOneObject(34);">Add TalkWindow34</button>
        <button onclick="addUserOneObject(42);">Add TalkWindow42</button>
        <button onclick="addUserOneObject(54);">Add TalkWindow54</button>
        <div id="TalkDiv_0" class="talk"><div class="close"><a onclick="closeOneObject(‘TalkDiv_0’);">关闭</a></div>0</div>
        <div id="TalkDiv_1" class="talk"><div class="close"><a onclick="closeOneObject(‘TalkDiv_1’);">关闭</a></div>1</div>
        <div id="TalkDiv_2" class="talk"><div class="close"><a onclick="closeOneObject(‘TalkDiv_2’);">关闭</a></div>2</div>
        <div id="TalkDiv_3" class="talk"><div class="close"><a onclick="closeOneObject(‘TalkDiv_3’);">关闭</a></div>3</div>
        <div id="TalkDiv_4" class="talk"><div class="close"><a onclick="closeOneObject(‘TalkDiv_4’);">关闭</a></div>4</div>
        <div id="TalkDiv_5" class="talk"><div class="close"><a onclick="closeOneObject(‘TalkDiv_5’);">关闭</a></div>5</div>
    <script type="text/javascript">
        var PositionArray = [];
        var closedDivArray = [0,1,2,3,4,5];
        var DivUserArray = [-1,-1,-1,-1,-1,-1];
        var DivStatusArray = [-1,-1,-1,-1,-1,-1];
        window.onload = show;
        var bodyfrm = ( document.compatMode.toLowerCase()=="css1compat" ) ? document.documentElement : document.body;
        function show(){
            createPositionArray(64,100);
            clearInterval(_setInterval);    
        }   
        function createPositionArray(width,height){
            for(i=1;i<7;i++){
                var LeftPosition = Number(bodyfrm.clientWidth – width*i);
                var TopPosition = Number(bodyfrm.clientHeight – height);
                PositionArray[i-1]= LeftPosition;
                document.getElementById("TalkDiv_"+(i-1)).style.left = LeftPosition +"px";
                document.getElementById("TalkDiv_"+(i-1)).style.top = TopPosition +"px";
            }
        }   
        function addUserOneObject(userid){
            var num = -1;
            var exist = false;
            for(i=0;i<6;i++){
                if(DivUserArray[i] == userid){
                    exist = true;
                    break;
                }else{
                    exist = false;
                }
            }
            if(!exist){
                for(j=0;j<6;j++){
                    if(DivUserArray[j] != userid && DivUserArray[j]== -1){
                        num = j;
                        DivUserArray[j] = userid;
                        break;
                    }else{
                    }
                }
                addOneObject(closedDivArray.shift());
            }
        }
        function closeOneObject(DivId){
            var divNum = Number(DivId.substr(DivId.indexOf("_")+1,DivId.length));
            document.getElementById(DivId).style.display = "none";
            for(i=0;i<6;i++){
                if(DivStatusArray[i] == divNum){
                    DivStatusArray[i] = -1;
                    DivUserArray[i] = -1;
                    closedDivArray.push(divNum);
                    break;
                }
            }
            changeIndexPosition();
        }
        function changeIndexPosition(){
            var i=0;
            for(i;i<7;i++){
                var sArray = DivStatusArray[i];
                if(sArray == -1 && i<7){
                    for(j=i;j< DivStatusArray.length;j++){
                        try{
                            DivStatusArray[j] = DivStatusArray[j+1];
                            DivUserArray[j] = DivUserArray[j+1];
                        }catch(e){
                            DivStatusArray[j] = -1;
                            DivUserArray[j] = -1;
                        }
                    }
                    i=i+1;
                }
            }
            changePosition();
        }
        function changePosition(){

            if(DivStatusArray.length <7){
                for(i=DivStatusArray.length;i<6;i++){
                    DivStatusArray.push(-1);
                    DivUserArray.push(-1);
                }
            }
            for(i=0;i<6;i++){
                if(DivStatusArray[i] == undefined){
                    DivStatusArray[i] = -1;
                    DivUserArray[i] = -1;
                }
            }
            for(i=0;i<6;i++){
                document.getElementById("TalkDiv_"+DivStatusArray[i]).style.left = PositionArray[i] + "px";
            }
        }
        function addOneObject(DivId){
            var existDiv = false;
            var divNum = DivId;
            for(j=0;j<7;j++){
                if(divNum == DivStatusArray[j]){
                    existDiv = true;
                    break;
                }else{
                    existDiv = false;
                }
            }
            for(i=0;i<7;i++){
                if(DivStatusArray[i] == -1 && !existDiv){
                    DivStatusArray[i] = divNum;
                    document.getElementById("TalkDiv_"+DivId).style.left = PositionArray[i] + "px";
                    document.getElementById("TalkDiv_"+DivId).style.display = "block";
                    break;
                }
            }
        }

    </script>

    </body>
</html>

Advertisements

发表评论

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / 更改 )

Twitter picture

You are commenting using your Twitter account. Log Out / 更改 )

Facebook photo

You are commenting using your Facebook account. Log Out / 更改 )

Google+ photo

You are commenting using your Google+ account. Log Out / 更改 )

Connecting to %s

%d 博主赞过: