将下面的代码改成效率最高的形式。（高分）

动态添加大量的元素到页面上，始终都会越来越慢的。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>paint</TITLE>
<SCRIPT LANGUAGE="JavaScript" defer>
<!--
var blnStartFlag;
blnStartFlag = false;
var intCount;
var intMouseMoveCount;
intCount = 1;
intMouseMoveCount = 1; function fnSwitchMode(){
if(blnStartFlag == false && window.event.srcElement.type != "button"){
blnStartFlag = true;
}
else{
blnStartFlag = false;
}
} var emu = document.createElement("<div>");
document.body.insertBefore(emu);
function fnPaint(){
if(blnStartFlag == true){
intCount = intCount + 1;
var stElm = "<div style='color:red;position:absolute;width:0px;height:0px,border-color:red;border:solid;left:"+event.x
+";top:"+event.y+"'/>";
setTimeout("emu.innerHTML +=\""+stElm+"\"",1); }
intMouseMoveCount = intMouseMoveCount + 1;
div1.innerHTML = "MouseMoveCount:" + intMouseMoveCount
+ "<br> PaintCount:" + intCount
+ "<br>LeftPos:" + window.event.x 
+ "<br> TopPos:" + window.event.y;
}
function fnShowCount(){
alert(intCount);
}
//-->
</SCRIPT>
</HEAD><BODY onclick="fnSwitchMode()" onmousemove="fnPaint()">
<input type="button" onclick="fnShowCount()" value="ShowCount">
<div id="div1"></div>
</BODY>
</HTML>

解决方案 »

  1.   

    <HTML>
    <HEAD>
    <TITLE>paint</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    var blnStartFlag;
    blnStartFlag = false;
    var intCount;
    var intMouseMoveCount;
    intCount = 1;
    intMouseMoveCount = 1; function fnSwitchMode(){
    if(blnStartFlag == false && window.event.srcElement.type != "button"){
    blnStartFlag = true;
    }
    else{
    blnStartFlag = false;
    }
    } function fnPaint(){
    if(blnStartFlag == true){
    var aElement = document.createElement("<span>");
    intCount = intCount + 1;
    aElement.innerHTML = "<a></a>"
    aElement.style.backgroundColor = "#FF0000";
    aElement.style.position ="absolute";
    aElement.style.width = "1px";
    aElement.style.height = "1px";
    //aElement.style.borderColor = "#FF0000";
    //aElement.style.border = "solid";
    aElement.style.borderWidth = "0px";
    aElement.style.left = window.event.x;
    aElement.style.top = window.event.y;
    document.getElementById("div2").appendChild(aElement);
    }
    intMouseMoveCount = intMouseMoveCount + 1;
    div1.innerHTML = "MouseMoveCount:" + intMouseMoveCount
    + "<br> PaintCount:" + intCount
    + "<br>LeftPos:" + window.event.x 
    + "<br> TopPos:" + window.event.y;
    }
    function fnShowCount(){
    alert(intCount);
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onclick="fnSwitchMode()" onmousemove="fnPaint()">
    <input type="button" onclick="fnShowCount()" value="ShowCount">
    <div id="div1"></div>
    <div id="div2"></div></BODY>
    </HTML>
      

  2.   

    maxChildren 的值可以根据机器的情况调整获得更优化的效果。<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>paint</TITLE>
    <SCRIPT LANGUAGE="JavaScript" defer>
    <!--
    var blnStartFlag;
    blnStartFlag = false;
    var intCount;
    var intMouseMoveCount;
    intCount = 1;
    intMouseMoveCount = 1; function fnSwitchMode(){
    if(blnStartFlag == false && window.event.srcElement.type != "button"){
    blnStartFlag = true;
    }
    else{
    blnStartFlag = false;
    }
    } function fnPaint(){
    if(blnStartFlag == true){
    intCount = intCount + 1;
    var stElm = "<div style='color:red;position:absolute;width:0px;height:0px;border:solid;left:"+event.x
    +";top:"+event.y+"'/>";
    draw(stElm);
    }
    intMouseMoveCount = intMouseMoveCount + 1;
    div1.innerHTML = "MouseMoveCount:" + intMouseMoveCount
    + "<br> PaintCount:" + intCount
    + "<br>LeftPos:" + window.event.x 
    + "<br> TopPos:" + window.event.y;
    }
    var emu = null;
    var maxChildren = 50;
    function draw(html){
    if (emu == null || emu.children.length>maxChildren){
    emu = document.createElement("<div>");
    document.body.insertBefore(emu);
    }
    setTimeout("emu.innerHTML+=\""+html+"\"",1)
    }
    function fnShowCount(){
    alert(intCount);
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onclick="fnSwitchMode()" onmousemove="fnPaint()">
    <input type="button" onclick="fnShowCount()" value="ShowCount">
    <div id="div1"></div>
    </BODY>
    </HTML>
      

  3.   

    确实原来的画笔太难看了，长长的一竖，换成一个点就可以画细线了：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>paint</TITLE>
    <style>
    .emuWH{position:absolute;font-size:3px;width:3;height:3;background-color:red}
    </style><SCRIPT LANGUAGE="JavaScript" defer>
    <!--
    var blnStartFlag;
    blnStartFlag = false;
    var intCount;
    var intMouseMoveCount;
    intCount = 1;
    intMouseMoveCount = 1; function fnSwitchMode(){
    if(blnStartFlag == false && window.event.srcElement.type != "button"){
    blnStartFlag = true;
    }
    else{
    blnStartFlag = false;
    }
    } function fnPaint(){
    if(blnStartFlag == true){
    intCount = intCount + 1;
    var stElm = "<div class=emuWH style='left:"+event.x+";top:"+event.y+"'/>";
    draw(stElm);
    }
    intMouseMoveCount = intMouseMoveCount + 1;
    div1.innerHTML = "MouseMoveCount:" + intMouseMoveCount
    + "<br> PaintCount:" + intCount
    + "<br>LeftPos:" + window.event.x 
    + "<br> TopPos:" + window.event.y;
    }
    var emu = null;
    var maxChildren = 50;
    function draw(html){
    if (emu == null || emu.children.length>maxChildren){
    emu = document.createElement("<div>");
    setTimeout("document.body.insertBefore(emu)",50);
    }
    setTimeout("emu.innerHTML+=\""+html+"\"",1)
    }
    function fnShowCount(){
    alert(intCount);
    }
    //-->
    </SCRIPT>
    </HEAD><BODY onclick="fnSwitchMode()" onmousemove="fnPaint()">
    <input type="button" onclick="fnShowCount()" value="ShowCount">
    <div id="div1"></div>
    </BODY>
    </HTML>画笔太小的时候画的线不连贯，暂舍为三个像素大小。
      

  4.   

    把以前画线用的函数也搬出来了哈哈<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>paint</TITLE>
    <style>
    .emuW{position:absolute;font-size:2px;width:2;background-color:red}
    .emuH{position:absolute;font-size:2px;height:2;background-color:red}
    .emuWH{position:absolute;font-size:2px;width:2;height:2;background-color:red}
    </style><SCRIPT LANGUAGE="JavaScript" defer>
    <!--
    var blnStartFlag;
    blnStartFlag = false;
    var intCount;
    var intMouseMoveCount;
    intCount = 1;
    intMouseMoveCount = 1; function fnSwitchMode(){
    if(blnStartFlag == false && window.event.srcElement.type != "button"){
    blnStartFlag = true;
    }
    else{
    blnStartFlag = false;
    oldX=oldY=0;
    }
    } function fnPaint(){
    if(blnStartFlag == true){
    intCount = intCount + 1;
    var stElm = drawLine(oldX==0?event.x:oldX,oldY==0?event.y:oldY,event.x,event.y,"red");
    oldX = event.x;oldY = event.y;draw(stElm);
    }
    intMouseMoveCount = intMouseMoveCount + 1;
    div1.innerHTML = "MouseMoveCount:" + intMouseMoveCount
    + "<br> PaintCount:" + intCount
    + "<br>LeftPos:" + window.event.x 
    + "<br> TopPos:" + window.event.y;
    }
    function draw(html){
    if (emu == null || emu.children.length>maxChildren){
    emu = document.createElement("<div>");
    setTimeout("document.body.insertBefore(emu)",50);
    }
    setTimeout("emu.innerHTML+=\""+html+"\"",1)
    }
    function fnShowCount(){
    alert(intCount);
    }
    //-->
    </SCRIPT><SCRIPT LANGUAGE="JavaScript">
    <!--
    var emu = null;
    var maxChildren = 50;
    var oldX = 0;
    var oldY = 0;
    function drawLine(x0,y0,x1,y1,color){
    x0 = Math.round(x0);
    x1 = Math.round(x1);
    y0 = Math.round(y0);
    y1 = Math.round(y1);
    var rs = "";
    if (y0 == y1){  //画横线
    if (x0>x1){var t=x0;x0=x1;x1=t}  
    rs = "<p class=emuH style='top:"+y0+";left:"+x0+";background-color:"+color+"; width:"+Math.abs(x1-x0)+"'/>";
    }
    else if (x0 == x1){  //画竖线
    if (y0>y1){var t=y0;y0=y1;y1=t} 
    rs = "<p class=emuW style='top:"+y0+";left:"+x0+";background-color:"+color+";height:"+Math.abs(y1-y0)+"'/>";
    }
    else{
    var lx = x1-x0;
    var ly = y1-y0;
    if (Math.abs(lx)>Math.abs(ly)){
    if (ly<0){
    var t=x0;x0=x1;x1=t;
    t=y0;y0=y1;y1=t;
    lx = -lx;
    ly = -ly;
    }
    var dx = lx/ly;
    rs = new Array(ly);
    for (var i=0;i<ly;i++){
    var left,width;
    if (dx>0){
    left = Math.round(i*dx);
    width = Math.round((i+1)*dx)-left;
    left += x0;
    if (width+left>x1) width = x1-left;
    }else{
    left = Math.round((i+1)*dx);
    width = Math.round((i)*dx)-left;
    left += x0;
    if (left<x1) {
    width = width+left-x1;
    left=x1;
    }
    }
    rs[i] = "<p class=emuH style='top:"+(y0+i)+";left:"+left+";width:"+width+";background-color:"+color+"'/>";
    }
    }else{
    if (lx<0){
    var t=x0;x0=x1;x1=t;
    t=y0;y0=y1;y1=t;
    lx = -lx;
    ly = -ly;
    }
    var dy = ly/lx;
    rs = new Array(lx);
    for (var i=0;i<lx;i++){
    var top,height;
    if (dy>0){
    top = Math.round(i*dy);
    height = Math.round((i+1)*dy)-top;
    top += y0;
    if (height+top>y1) height = y1-top;
    }else{
    top = Math.round((i+1)*dy);
    height = Math.round((i)*dy)-top;
    top += y0;
    if (top<y1) {
    height = height+top-y1;
    top=y1;
    }
    }
    rs[i] = "<p class=emuW style='top:"+top+";left:"+(x0+i)+";height:"+height+";background-color:"+color+"'/>";
    }
    }
    rs = rs.join("");
    }
    return rs
    }//-->
    </SCRIPT>
    </HEAD><BODY onclick="fnSwitchMode()" onmousemove="fnPaint()">
    <input type="button" onclick="fnShowCount()" value="ShowCount">
    <div id="div1"></div>
    </BODY>
    </HTML>
      

  5.   

    用层的话，怎么高不起来，建议楼主用vml来画