zoukankan      html  css  js  c++  java

  • 未完成的代码(JS)

    本来打算写个显示数据库关系的页面，可惜JS太慢了。代码又舍不得扔,就放在这里。

    <html>
    <head> 
    <title>javascript绘图</title> 
    <style>
    td    {font-size:12px}
    </style>
    </head> 
    <script src="line.js"></script>
    <script language="javascript">
    var Obj
    function MouseDown(obj){
    var o = window.event.srcElement;
    if (o.IsMove)
    {
        Obj    =obj;
        Obj.setCapture();
        Obj.l    =event.x-Obj.style.pixelLeft;
        Obj.t    =event.y-Obj.style.pixelTop;
    }
    }
    function MouseMove(){
    if(Obj!=null){
        Obj.style.left     = event.x-Obj.l;
        Obj.style.top     = event.y-Obj.t;
        }
    }
    function MouseUp(){
    if(Obj!=null){
        Obj.releaseCapture();
        Obj    =null;
        }
    }

    function link(e)
    {
            var obj1 = document.all.t1;
            var obj2 = document.all.t2;

    document.all.printLine.innerHTML     = "";
    Line(getPos(obj1)[    1]-96,getPos(obj1)[0]-13,getPos(obj2)[1]-96,getPos(obj2)[0]-13);

    }
    function getPos(cell)
    {
            var pos = new Array();
            var t=cell.offsetTop;
            var l=cell.offsetLeft;
            while(cell=cell.offsetParent)
            {
            t    +=cell.offsetTop;
            l    +=cell.offsetLeft;
        }
        pos[    0] = t;
        pos[    1] = l;
            return pos;
    }


    </script>
    <body bgcolor="#ffffff"> 
    <div style="position:absolute;" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>
    <TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t1">
    <TR>
            <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD>
    </TR>
    <TR>
            <TD>
                <table width="98%">
                    <tr><td width="20">&</td><td>C1</td></tr>
                    <tr><td></td><td>C2</td></tr>
                    <tr><td></td><td>C3</td></tr>
                </table>
            </TD>
    </TR>
    </TABLE>
    </div>


    <div style="position:absolute;left:100px" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>
    <TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t2">
    <TR>
            <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD>
    </TR>
    <TR>
            <TD>
                <table width="98%">
                    <tr><td width="20">&</td><td>C1</td></tr>
                    <tr><td></td><td>C2</td></tr>
                    <tr><td></td><td>C3</td></tr>
                </table>
            </TD>
    </TR>
    </TABLE>
    </div>
    <div style="position:absolute;left:100px" id="printLine"></div>
    <INPUT TYPE="button" onclick="link(this);" value="显示关系">
    </body>
    </html>


    line.js

    var rad = Math.PI/180 
    var maxY = 400 
    var color = "red" 
    var Ox = -1 
    var Oy = -1 

    function outPlot(x,y,w,h) { 
        print('    <span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';'+w+';font-size:1px;background-color:'+color+'"></span>') 
    } 

    function Plot(x,y)
    { 
        outPlot(x,y,    1,1) 
            if(Ox>=0 || Oy>=0)
            ShowLine(Ox,Oy,x    -Ox,y-Oy) 
            
        Ox     = x 
        Oy     = y 
    } 

    function ShowLine(x,y,w,h)
    { 
            if(w<0)
        { 
            x     += w 
            w     = Math.abs(w) 
        } 
        
            if(h<0)
        { 
            y     += h 
            h     = Math.abs(h) 
        } 
        
            if(w<1) w=1 
            if(h<1) h=1 
        outPlot(x,y,Math.round(w),Math.round(h)) 
    } 

    function orgY(y) {
            return y;
            return maxY-y 
    }

    function sign(n) { 
            if(n>0) return 1 
            if(n<0) return -1 
            return n 
    } 


    function Line(x1,y1,x2,y2) { 
        x2     = Math.round(x2) 
        y2     = Math.round(y2) 
        xo     = x2 
        yo     = y2 
        y1     = orgY(y1) 
        y2     = orgY(y2) 
            var str = "" 
            var i=0 

            var x = x1 
            var y = y1 
        dx     = Math.abs(x2-x1) 
        dy     = Math.abs(y2-y1) 
        s1     = sign(x2-x1) 
        s2     = sign(y2-y1) 

            if(dx==0 || dy==0) { 
            ShowLine(x1,y1,x2    -x1,y2-y1) 
                return 
        } 

            if(dx>dy)
        { 
            temp     = dx 
            dx     = dy 
            dy     = temp 
            key     = 1 
        }    else 
            key     = 0 

        e     = 2*dy-dx 

            for(i=0;i<dx;i++)
        { 
            px     = 0 
            py     = 0 
            Plot(x,y) 
                while(e>=0)
            { 
                    if(key==1)
                { 
                    x     += s1 
                    px     += s1 
                }    else { 
                    y     += s2 
                    py     += s2 
                } 
                e     = e-2*dx 
            } 
            
                if(key==1) 
                y     += s2 
                else 
                x     += s1 
            
            e     = e+2*dy 
        } 
    } 

    function print(str) { 
        document.all.printLine.innerHTML     += str; 
    } 
  • 相关阅读:
    第009讲：了不起的分支和循环3
    Term_Application
    十大编程算法助程序员走上高手之路
    每天工作4小时的程序员
    编程真相_节选
    Sublime_Snippet
    VIM资源管理
    微信企业号开发资源整理
    vitruviano
    VIM_git
  • 原文地址：https://www.cnblogs.com/goodspeed/p/25876.html
Copyright © 2011-2022 走看看