利用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>

文章来源于领测软件测试网 https://www.ltesting.net/