JavaScript实现网页虚线
昨天对Math.floor()的用法做了介绍,使用Math.floor()可以获得一个数的整数部分。在网页中呈现虚线的原理是,2个点的颜色交替,周而复始。根据这个原理,使用JavaScript写一段document.write单元格的循环程序。首先将程序列出来:
<script>len=400;d1=2;d2=2;cou=Math.floor(len/(d1+d2));
document.write('<table cellspacing=0 cellpadding=0 height=1 width='+len+'><tr>');
for(i=0;i<cou;i++){document.write('<td width='+d2+'><td width='+d1+' bgcolor=333333>')}</script></table>
运行的结果如:
说明:len=400表示虚线的长度为400像素,d1和d2是黑白相间的间隔,cou=Math.floor(len/(d1+d2)),cou表示总共要循环的次数。例如这里是400像素的虚线,黑色点和白色的点都是2像素,那么就要循环100次。由这200个单元格组成一条虚线。
改变虚线的长度,请修改len=400的值;
改变虚线的颜色,请修改bgcolor=333333的值;
改变虚线的高度,请修改height=1的值;
改变虚线的密度,请修改d1和d2的值。
例2:d1=6;d2=3
例3:d1=1;d2=1
例4:d1=3;d2=3;height=3;bgcolor=BBBBBB
例5:d1=3;d2=3;height=3;bgcolor=B1CD9D
例6:d1=4;d2=3;height=2;bgcolor=819DC5;width=500
例7:d1=2;d2=2;bgcolor=FF0000
也可以使用背景图片来制作虚线,出现的效果与上述的效果是一样的。
From:http://www.webshu.com/agile/tor/7cid=0430.htm
浙公网安备 33010602011771号