未完成的代码(JS)
本来打算写个显示数据库关系的页面,可惜JS太慢了。代码又舍不得扔,就放在这里。
![]() <html>
<html>
![]() <head>
<head> 
![]() <title>javascript绘图</title>
<title>javascript绘图</title> 
![]() <style>
<style>
![]() td{font-size:12px}
td{font-size:12px}
![]() </style>
</style>
![]() </head>
</head> 
![]() <script src="line.js"></script>
<script src="line.js"></script>
![]() <script language="javascript">
<script language="javascript">
![]() var Obj
var Obj
![]() function MouseDown(obj){
function MouseDown(obj){
![]() var o = window.event.srcElement;
var o = window.event.srcElement;
![]() if (o.IsMove)
if (o.IsMove)
![]() {
{
![]() Obj=obj;
    Obj=obj;
![]() Obj.setCapture();
    Obj.setCapture();
![]() Obj.l=event.x-Obj.style.pixelLeft;
    Obj.l=event.x-Obj.style.pixelLeft;
![]() Obj.t=event.y-Obj.style.pixelTop;
    Obj.t=event.y-Obj.style.pixelTop;
![]() }
}
![]() }
}
![]() function MouseMove(){
function MouseMove(){
![]() if(Obj!=null){
if(Obj!=null){
![]() Obj.style.left = event.x-Obj.l;
    Obj.style.left = event.x-Obj.l;
![]() Obj.style.top = event.y-Obj.t;
    Obj.style.top = event.y-Obj.t;
![]() }
    }
![]() }
}
![]() function MouseUp(){
function MouseUp(){
![]() if(Obj!=null){
if(Obj!=null){
![]() Obj.releaseCapture();
    Obj.releaseCapture();
![]() Obj=null;
    Obj=null;
![]() }
    }
![]() }
}
![]()
![]() function link(e)
function link(e)
![]() {
{
![]() var obj1 = document.all.t1;
    var obj1 = document.all.t1;
![]() var obj2 = document.all.t2;
    var obj2 = document.all.t2;
![]()
![]() document.all.printLine.innerHTML = "";
document.all.printLine.innerHTML = "";
![]() Line(getPos(obj1)[1]-96,getPos(obj1)[0]-13,getPos(obj2)[1]-96,getPos(obj2)[0]-13);
Line(getPos(obj1)[1]-96,getPos(obj1)[0]-13,getPos(obj2)[1]-96,getPos(obj2)[0]-13);
![]()
![]() }
}
![]() function getPos(cell)
function getPos(cell)
![]() {
{
![]() var pos = new Array();
    var pos = new Array();
![]() var t=cell.offsetTop;
    var t=cell.offsetTop;
![]() var l=cell.offsetLeft;
    var l=cell.offsetLeft;
![]() while(cell=cell.offsetParent)
    while(cell=cell.offsetParent)
![]() {
    {
![]() t+=cell.offsetTop;
        t+=cell.offsetTop;
![]() l+=cell.offsetLeft;
        l+=cell.offsetLeft;
![]() }
    }
![]() pos[0] = t;
    pos[0] = t;
![]() pos[1] = l;
    pos[1] = l;
![]() return pos;
    return pos;
![]() }
}
![]()
![]()
![]() </script>
</script>
![]() <body bgcolor="#ffffff">
<body bgcolor="#ffffff"> 
![]() <div style="position:absolute;" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>
<div style="position:absolute;" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>
![]() <TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t1">
<TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t1">
![]() <TR>
<TR>
![]() <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD>
    <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD>
![]() </TR>
</TR>
![]() <TR>
<TR>
![]() <TD>
    <TD>
![]() <table width="98%">
        <table width="98%">
![]() <tr><td width="20">&</td><td>C1</td></tr>
            <tr><td width="20">&</td><td>C1</td></tr>
![]() <tr><td></td><td>C2</td></tr>
            <tr><td></td><td>C2</td></tr>
![]() <tr><td></td><td>C3</td></tr>
            <tr><td></td><td>C3</td></tr>
![]() </table>
        </table>
![]() </TD>
    </TD>
![]() </TR>
</TR>
![]() </TABLE>
</TABLE>
![]() </div>
</div>
![]()
![]()
![]() <div style="position:absolute;left:100px" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>
<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">
<TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t2">
![]() <TR>
<TR>
![]() <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD>
    <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD>
![]() </TR>
</TR>
![]() <TR>
<TR>
![]() <TD>
    <TD>
![]() <table width="98%">
        <table width="98%">
![]() <tr><td width="20">&</td><td>C1</td></tr>
            <tr><td width="20">&</td><td>C1</td></tr>
![]() <tr><td></td><td>C2</td></tr>
            <tr><td></td><td>C2</td></tr>
![]() <tr><td></td><td>C3</td></tr>
            <tr><td></td><td>C3</td></tr>
![]() </table>
        </table>
![]() </TD>
    </TD>
![]() </TR>
</TR>
![]() </TABLE>
</TABLE>
![]() </div>
</div>
![]() <div style="position:absolute;left:100px" id="printLine"></div>
<div style="position:absolute;left:100px" id="printLine"></div>
![]() <INPUT TYPE="button" onclick="link(this);" value="显示关系">
<INPUT TYPE="button" onclick="link(this);" value="显示关系">
![]() </body>
</body>
![]() </html>
</html>
![]() 
![]() var rad = Math.PI/180
var rad = Math.PI/180 
![]() var maxY = 400
var maxY = 400 
![]() var color = "red"
var color = "red" 
![]() var Ox = -1
var Ox = -1 
![]() var Oy = -1
var Oy = -1 
![]()
![]() function outPlot(x,y,w,h) {
function outPlot(x,y,w,h) { 
![]() print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
    print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>') 
![]() }
} 
![]()
![]() function Plot(x,y)
function Plot(x,y)
![]() {
{ 
![]() outPlot(x,y,1,1)
    outPlot(x,y,1,1) 
![]() if(Ox>=0 || Oy>=0)
    if(Ox>=0 || Oy>=0)
![]() ShowLine(Ox,Oy,x-Ox,y-Oy)
        ShowLine(Ox,Oy,x-Ox,y-Oy) 
![]() 
        
![]() Ox = x
    Ox = x 
![]() Oy = y
    Oy = y 
![]() }
} 
![]()
![]() function ShowLine(x,y,w,h)
function ShowLine(x,y,w,h)
![]() {
{ 
![]() if(w<0)
    if(w<0)
![]() {
    { 
![]() x += w
        x += w 
![]() w = Math.abs(w)
        w = Math.abs(w) 
![]() }
    } 
![]() 
    
![]() if(h<0)
    if(h<0)
![]() {
    { 
![]() y += h
        y += h 
![]() h = Math.abs(h)
        h = Math.abs(h) 
![]() }
    } 
![]() 
    
![]() if(w<1) w=1
    if(w<1) w=1 
![]() if(h<1) h=1
    if(h<1) h=1 
![]() outPlot(x,y,Math.round(w),Math.round(h))
    outPlot(x,y,Math.round(w),Math.round(h)) 
![]() }
} 
![]()
![]() function orgY(y) {
function orgY(y) {
![]() return y;
    return y;
![]() return maxY-y
    return maxY-y 
![]() }
}
![]()
![]() function sign(n) {
function sign(n) { 
![]() if(n>0) return 1
    if(n>0) return 1 
![]() if(n<0) return -1
    if(n<0) return -1 
![]() return n
    return n 
![]() }
} 
![]()
![]()
![]() function Line(x1,y1,x2,y2) {
function Line(x1,y1,x2,y2) { 
![]() x2 = Math.round(x2)
    x2 = Math.round(x2) 
![]() y2 = Math.round(y2)
    y2 = Math.round(y2) 
![]() xo = x2
    xo = x2 
![]() yo = y2
    yo = y2 
![]() y1 = orgY(y1)
    y1 = orgY(y1) 
![]() y2 = orgY(y2)
    y2 = orgY(y2) 
![]() var str = ""
    var str = "" 
![]() var i=0
    var i=0 
![]()
![]() var x = x1
    var x = x1 
![]() var y = y1
    var y = y1 
![]() dx = Math.abs(x2-x1)
    dx = Math.abs(x2-x1) 
![]() dy = Math.abs(y2-y1)
    dy = Math.abs(y2-y1) 
![]() s1 = sign(x2-x1)
    s1 = sign(x2-x1) 
![]() s2 = sign(y2-y1)
    s2 = sign(y2-y1) 
![]()
![]() if(dx==0 || dy==0) {
    if(dx==0 || dy==0) { 
![]() ShowLine(x1,y1,x2-x1,y2-y1)
        ShowLine(x1,y1,x2-x1,y2-y1) 
![]() return
        return 
![]() }
    } 
![]()
![]() if(dx>dy)
    if(dx>dy)
![]() {
    { 
![]() temp = dx
        temp = dx 
![]() dx = dy
        dx = dy 
![]() dy = temp
        dy = temp 
![]() key = 1
        key = 1 
![]() }else
    }else 
![]() key = 0
        key = 0 
![]()
![]() e = 2*dy-dx
    e = 2*dy-dx 
![]()
![]() for(i=0;i<dx;i++)
    for(i=0;i<dx;i++)
![]() {
    { 
![]() px = 0
        px = 0 
![]() py = 0
        py = 0 
![]() Plot(x,y)
        Plot(x,y) 
![]() while(e>=0)
        while(e>=0)
![]() {
        { 
![]() if(key==1)
            if(key==1)
![]() {
            { 
![]() x += s1
                x += s1 
![]() px += s1
                px += s1 
![]() }else {
            }else { 
![]() y += s2
                y += s2 
![]() py += s2
                py += s2 
![]() }
            } 
![]() e = e-2*dx
            e = e-2*dx 
![]() }
        } 
![]() 
        
![]() if(key==1)
        if(key==1) 
![]() y += s2
            y += s2 
![]() else
        else 
![]() x += s1
            x += s1 
![]() 
        
![]() e = e+2*dy
        e = e+2*dy 
![]() }
    } 
![]() }
} 
![]()
![]() function print(str) {
function print(str) { 
![]() document.all.printLine.innerHTML += str;
    document.all.printLine.innerHTML += str; 
![]() }
} 
 <html>
<html> <head>
<head>  <title>javascript绘图</title>
<title>javascript绘图</title>  <style>
<style> td{font-size:12px}
td{font-size:12px} </style>
</style> </head>
</head>  <script src="line.js"></script>
<script src="line.js"></script> <script language="javascript">
<script language="javascript"> var Obj
var Obj function MouseDown(obj){
function MouseDown(obj){ var o = window.event.srcElement;
var o = window.event.srcElement; if (o.IsMove)
if (o.IsMove) {
{ Obj=obj;
    Obj=obj; Obj.setCapture();
    Obj.setCapture(); Obj.l=event.x-Obj.style.pixelLeft;
    Obj.l=event.x-Obj.style.pixelLeft; Obj.t=event.y-Obj.style.pixelTop;
    Obj.t=event.y-Obj.style.pixelTop; }
} }
} function MouseMove(){
function MouseMove(){ if(Obj!=null){
if(Obj!=null){ Obj.style.left = event.x-Obj.l;
    Obj.style.left = event.x-Obj.l; Obj.style.top = event.y-Obj.t;
    Obj.style.top = event.y-Obj.t; }
    } }
} function MouseUp(){
function MouseUp(){ if(Obj!=null){
if(Obj!=null){ Obj.releaseCapture();
    Obj.releaseCapture(); Obj=null;
    Obj=null; }
    } }
}
 function link(e)
function link(e) {
{ var obj1 = document.all.t1;
    var obj1 = document.all.t1; var obj2 = document.all.t2;
    var obj2 = document.all.t2;
 document.all.printLine.innerHTML = "";
document.all.printLine.innerHTML = ""; Line(getPos(obj1)[1]-96,getPos(obj1)[0]-13,getPos(obj2)[1]-96,getPos(obj2)[0]-13);
Line(getPos(obj1)[1]-96,getPos(obj1)[0]-13,getPos(obj2)[1]-96,getPos(obj2)[0]-13);
 }
} function getPos(cell)
function getPos(cell) {
{ var pos = new Array();
    var pos = new Array(); var t=cell.offsetTop;
    var t=cell.offsetTop; var l=cell.offsetLeft;
    var l=cell.offsetLeft; while(cell=cell.offsetParent)
    while(cell=cell.offsetParent) {
    { t+=cell.offsetTop;
        t+=cell.offsetTop; l+=cell.offsetLeft;
        l+=cell.offsetLeft; }
    } pos[0] = t;
    pos[0] = t; pos[1] = l;
    pos[1] = l; return pos;
    return pos; }
}

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

 <div style="position:absolute;left:100px" onmousedown=MouseDown(this) onmousemove=MouseMove() onmouseup=MouseUp()>
<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">
<TABLE border="1" bordercolor="white"cellpadding="0" cellspacing="0" bordercolorlight="black" id="t2"> <TR>
<TR> <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD>
    <TD style="padding:3px" style="cursor:hand" IsMove="true">Table Name</TD> </TR>
</TR> <TR>
<TR> <TD>
    <TD> <table width="98%">
        <table width="98%"> <tr><td width="20">&</td><td>C1</td></tr>
            <tr><td width="20">&</td><td>C1</td></tr> <tr><td></td><td>C2</td></tr>
            <tr><td></td><td>C2</td></tr> <tr><td></td><td>C3</td></tr>
            <tr><td></td><td>C3</td></tr> </table>
        </table> </TD>
    </TD> </TR>
</TR> </TABLE>
</TABLE> </div>
</div> <div style="position:absolute;left:100px" id="printLine"></div>
<div style="position:absolute;left:100px" id="printLine"></div> <INPUT TYPE="button" onclick="link(this);" value="显示关系">
<INPUT TYPE="button" onclick="link(this);" value="显示关系"> </body>
</body> </html>
</html>
line.js
 var rad = Math.PI/180
var rad = Math.PI/180  var maxY = 400
var maxY = 400  var color = "red"
var color = "red"  var Ox = -1
var Ox = -1  var Oy = -1
var Oy = -1 
 function outPlot(x,y,w,h) {
function outPlot(x,y,w,h) {  print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')
    print('<span style="position:absolute;left:'+x+';top:'+y+';height:'+h+';width:'+w+';font-size:1px;background-color:'+color+'"></span>')  }
} 
 function Plot(x,y)
function Plot(x,y) {
{  outPlot(x,y,1,1)
    outPlot(x,y,1,1)  if(Ox>=0 || Oy>=0)
    if(Ox>=0 || Oy>=0) ShowLine(Ox,Oy,x-Ox,y-Oy)
        ShowLine(Ox,Oy,x-Ox,y-Oy)  
         Ox = x
    Ox = x  Oy = y
    Oy = y  }
} 
 function ShowLine(x,y,w,h)
function ShowLine(x,y,w,h) {
{  if(w<0)
    if(w<0) {
    {  x += w
        x += w  w = Math.abs(w)
        w = Math.abs(w)  }
    }  
     if(h<0)
    if(h<0) {
    {  y += h
        y += h  h = Math.abs(h)
        h = Math.abs(h)  }
    }  
     if(w<1) w=1
    if(w<1) w=1  if(h<1) h=1
    if(h<1) h=1  outPlot(x,y,Math.round(w),Math.round(h))
    outPlot(x,y,Math.round(w),Math.round(h))  }
} 
 function orgY(y) {
function orgY(y) { return y;
    return y; return maxY-y
    return maxY-y  }
}
 function sign(n) {
function sign(n) {  if(n>0) return 1
    if(n>0) return 1  if(n<0) return -1
    if(n<0) return -1  return n
    return n  }
} 

 function Line(x1,y1,x2,y2) {
function Line(x1,y1,x2,y2) {  x2 = Math.round(x2)
    x2 = Math.round(x2)  y2 = Math.round(y2)
    y2 = Math.round(y2)  xo = x2
    xo = x2  yo = y2
    yo = y2  y1 = orgY(y1)
    y1 = orgY(y1)  y2 = orgY(y2)
    y2 = orgY(y2)  var str = ""
    var str = ""  var i=0
    var i=0 
 var x = x1
    var x = x1  var y = y1
    var y = y1  dx = Math.abs(x2-x1)
    dx = Math.abs(x2-x1)  dy = Math.abs(y2-y1)
    dy = Math.abs(y2-y1)  s1 = sign(x2-x1)
    s1 = sign(x2-x1)  s2 = sign(y2-y1)
    s2 = sign(y2-y1) 
 if(dx==0 || dy==0) {
    if(dx==0 || dy==0) {  ShowLine(x1,y1,x2-x1,y2-y1)
        ShowLine(x1,y1,x2-x1,y2-y1)  return
        return  }
    } 
 if(dx>dy)
    if(dx>dy) {
    {  temp = dx
        temp = dx  dx = dy
        dx = dy  dy = temp
        dy = temp  key = 1
        key = 1  }else
    }else  key = 0
        key = 0 
 e = 2*dy-dx
    e = 2*dy-dx 
 for(i=0;i<dx;i++)
    for(i=0;i<dx;i++) {
    {  px = 0
        px = 0  py = 0
        py = 0  Plot(x,y)
        Plot(x,y)  while(e>=0)
        while(e>=0) {
        {  if(key==1)
            if(key==1) {
            {  x += s1
                x += s1  px += s1
                px += s1  }else {
            }else {  y += s2
                y += s2  py += s2
                py += s2  }
            }  e = e-2*dx
            e = e-2*dx  }
        }  
         if(key==1)
        if(key==1)  y += s2
            y += s2  else
        else  x += s1
            x += s1  
         e = e+2*dy
        e = e+2*dy  }
    }  }
} 
 function print(str) {
function print(str) {  document.all.printLine.innerHTML += str;
    document.all.printLine.innerHTML += str;  }
}  
                    
                     
                    
                 
                    
                 
 
        

 td
td 
                
            
         浙公网安备 33010602011771号
浙公网安备 33010602011771号