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

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>