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

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

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>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有 導航