<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>  

解决方案 »

  1.   

    这个是用js画线的一断代码,  单击鼠标两次会在单击的两点之间画一条线。原理是在两点间画创造很多 div
    考div的背景色画线
    出一个奇怪问题:
    line(document.getElementById('container'));
    这个函数换成:
    line():{
    container = document.getElementById('container')
    在IE下就报运行时错误:
    行39错误:对象不支持此属性或者方法
    FireFox  没问题!
      

  2.   

    line():{
    container = document.getElementById('container')
    这是什么写法?
      

  3.   

    line():{
    var container = document.getElementById('container')
    ……
    }不好意思,这样!
      

  4.   

    =.=
    ()是执行function的一种方式,这里就变成了先执行line,如果你line没定义,当然报错
    你是不是想这样写
    var fn = {
        line:function(){}
    }
      

  5.   

    不是,就是:var container = document.getElementById('container')
    位置变了而已,原先作为函数的参数传递,现在直接在函数里取得!
      

  6.   

    是,IE不兼容,chrome  FireFox都好办!