js按条件画斜线解决思路
日期：2014-05-16 浏览次数：20380 次
js按条件画斜线
每行都会出一个数字，现在要做的是将上一行出的数字用斜线连起来。
1、每一行出的数字都随机不固定。
2、行的数量也不固定。
请问各位高手这个表用table还是用div，最要是那个好控制？
请各位高手帮忙，最好能给出代码和注解万分感谢！
------解决方案--------------------
参考下
每行都会出一个数字，现在要做的是将上一行出的数字用斜线连起来。
1、每一行出的数字都随机不固定。
2、行的数量也不固定。
请问各位高手这个表用table还是用div，最要是那个好控制？
请各位高手帮忙，最好能给出代码和注解万分感谢！
------解决方案--------------------
参考下
- HTML code
<!DOCTYPE HTML>
<html>
<head>
<meta charset="gb2312" />
<title></title>
<style>
.point {
position:absolute;
width:1px; height:1px; overflow:hidden;
background:#000;
}
.col {
position:absolute; left:300px; top:100px;
font-size:20px; font-weight:bold; text-align:center;
}
.right {
left:500px;
}
p {
width:20px;
border:1px solid red;
}
</style>
</head>
<body>
<div class="col">
<p>a</p>
<p>c</p>
<p>b</p>
</div>
<div class="col right">
<p>B</p>
<p>A</p>
<p>C</p>
</div>
<script>
var x = [];
var y = [];
document.onclick = function(e){
e = window.event || e;
var tx = e.clientX;
var ty = e.clientY;
x.push(tx);
y.push(ty);
//console.log( x );
//console.log( y );
if( x.length == 2 && y.length == 2 ){
createLine(x[0], y[0], x[1], y[1]);
x.length = 0;
y.length = 0;
}
}
function point(x, y){
var div = document.createElement('div');
div.style.left = x + 'px';
div.style.top = y + 'px';
div.className = 'point';
document.body.appendChild(div);
}
function createLine(x1,y1,x2,y2){
var tmp, x, y;
if(x1 >= x2){
tmp = x1;
x1 = x2;
x2 = tmp;
tmp = y1;
y1 = y2;
y2 = tmp;
}
for(var i = x1 ; i < x2; i++){
x = i;
y = (y2 - y1)/(x2 - x1)*(x - x1)+y1;
point(x,y);
}
}
</script>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
