利用JS在页面上动态生成直线

March 25,2004

x1:<input type=text id=x1 value=100><br>
y1:<input type=text id=y1 value=100><br>
x2:<input type=text id=x2 value=200><br>
y2:<input type=text id=y2 value=200><br>
<input type=button value=Draw onclick=Line(x1.value,y1.value,x2.value,y2.value)>
<div id=Line1 style="position:absolute;left:0;top:0;color:red;font-size:8px">
</div>
<script>
function DrawLine(x,y,LineLength,LineStyle)
{
  var s="";
  if(LineStyle=='h')s='<hr color=red width='+LineLength+'>';
  else  for(var i=0;i<LineLength-2;i++)s+="|<br>";
  document.body.innerHTML+='<div id=Line1 style="position:absolute;left:0;top:0;color:red;font-
size:8px"></div>';
  with(Line1[Line1.length-1])
  {
   innerHTML=s;;
   style.pixelLeft=x;
   style.pixelTop=y;
  }
}
function Line(x1,y1,x2,y2)
{
  DrawLine(x1,y1,(y2-y1)/8,'v');
  DrawLine(x1,y2,(x2-x1),'h');
}
</script>