<html>
<head>
<style type="text/css">
div.line {
position:absolute;
z-index:2;
width:1px;
height:1px;
font-size:1px;
background-color:#0000FF;
overflow:hidden;
}
</style><script type="text/javascript">
var sX = 0;
var sY = 0;
var eX = 0;
var eY = 0;
var fline=false;
function mouseup(event)
{
if(fline) //fline为真,划直线
{
eX = event.clientX; //结束点
eY = event.clientY;
fline=false;
line(document.getElementById('container'));
}
else
{
fline=true;
sX = event.clientX; //开始点
sY = event.clientY;
}
}function line(container) {
if (sX == eX) {
if (sY > eY) {
var tempY = sY;
sY = eY;
eY = tempY;
}
for (var k = sY; k < eY; k++) {
createPoint(container, sX, k);
}
}
// y = ax + b
var a = (sY - eY) / (sX - eX);
var b = sY - ((sY - eY) / (sX - eX)) * sX;
if (Math.abs(sX - eX) > Math.abs(sY - eY)) {
if (sX > eX) {
var tempX = eX;
eX = sX;
sX = tempX;
}
var left = container.style.left;
var top = container.style.top;
for (var i = sX; i <= eX; i++) {
createPoint(container, i, a * i + b);
}
}
else {
if (sY > eY) {
var tempY = sY;
sY = eY;
eY = tempY;
}
for (var j = sY; j <= eY; j++) {
createPoint(container, (j - b) / a, j);
}
}
}
function createPoint(container, x, y) {
var node = document.createElement('div');
node.className = 'line';
node.style.marginTop = y;
node.style.marginLeft = x;
container.appendChild(node);
}
</script>
</head>
<body onmouseup = mouseup(event)>
<div id="container" style="width:100%;height:100%;border:1px;margin-left:1px"></div>
</body>
</html>
考div的背景色画线
出一个奇怪问题:
line(document.getElementById('container'));
这个函数换成:
line():{
container = document.getElementById('container')
在IE下就报运行时错误:
行39错误:对象不支持此属性或者方法
FireFox 没问题!
container = document.getElementById('container')
这是什么写法?
var container = document.getElementById('container')
……
}不好意思,这样!
()是执行function的一种方式,这里就变成了先执行line,如果你line没定义,当然报错
你是不是想这样写
var fn = {
line:function(){}
}
位置变了而已,原先作为函数的参数传递,现在直接在函数里取得!