利用JS在页面上动态生成直线
类别: JavaScript教程
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>
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>
- 上一篇: 让表格闪起来的技巧
- 下一篇: 当页面正在被下载时在页面上显示LOADING.....的例子
-= 资 源 教 程 =-
文 章 搜 索