为什么setTimeout不会走动呢?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
function create(){
var element = document.createElement("p");
element.style.border = "1px solid orange";
element.style.width = "300px";
element.style.position = "absolute";
element.style.top = "150px";
element.style.left = "100px";
var ypos = parseInt(element.style.top);
var xpos = parseInt(element.style.left);
if(xpos == 200 && ypos == 300){
return true;
}
if(xpos < 200){
xpos++;
}
if(xpos > 200){
xpos--;
}
if(ypos < 300){
ypos++;
}
if(ypos > 300){
ypos--;
}
element.style.left = xpos + "px";
element.style.top = ypos + "px";
setTimeout("create()",10);
var text = document.createTextNode("我的javascript之旅");
element.appendChild(text);
document.body.appendChild(element)
}

</script>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>我的JavaScript之旅!</title>
</head>
<body>
<input type="button" value="请按下!" onclick="create()" />
</body>
</html>不知道怎么回事啊. 文字不会走动.哪位大侠帮我看看..记住哦.哪里错误的要在帖子里解释下啊

解决方案 »

  1.   

    没看明白,setTimeout("create()",10);不停的创建新的element,又如何会动呢?
      

  2.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript" simplemode=true src="http://kingfishers.googlecode.com/svn/trunk/Kingfishers/kingfishers/logger.js"></script>
    <script type="text/javascript">function move(){
    var element = document.getElementById("tempp");
    var ypos = parseInt(element.style.top);
        var xpos = parseInt(element.style.left);
        if(xpos == 200 && ypos == 300){
            return true;
        }
        if(xpos < 200){
            xpos++;
        }
        if(xpos > 200){
            xpos--;
        }
        if(ypos < 300){
            ypos++;
        }
        if(ypos > 300){
            ypos--;
        }
        $alert(xpos+","+ypos);
        
        setTimeout("move()",10);
        element.style.left = xpos + "px";
        element.style.top = ypos + "px";
    }
    function create(){
        var element = document.createElement("p");
        element.style.border = "1px solid orange";
        element.id="tempp";
        element.style.width = "300px";
        element.style.position = "absolute";
        element.style.top = "150px";
        element.style.left = "100px";
        var text = document.createTextNode("我的javascript之旅");
        element.appendChild(text);
        document.body.appendChild(element);
        move();
    }
        
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>我的JavaScript之旅!</title>
    </head>
        <body>
            <input type="button" value="请按下!" onclick="create()" />
        </body>
    </html>
      

  3.   


    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    function create(){
        var element = document.createElement("p");
        element.style.border = "1px solid orange";
        element.style.width = "300px";
        element.style.position = "absolute";
        element.style.top = "150px";
        element.style.left = "100px";
        var ypos = parseInt(element.style.top);
        var xpos = parseInt(element.style.left);
        if(xpos == 200 && ypos == 300){
            return true;
        }
        if(xpos < 200){
            xpos++;
        }
        if(xpos > 200){
            xpos--;
        }
        if(ypos < 300){
            ypos++;
        }
        if(ypos > 300){
            ypos--;
        }
        element.style.left = xpos + "px";
        element.style.top = ypos + "px";
    alert("aaaaaa");
        
        var text = document.createTextNode("我的javascript之旅");
        element.appendChild(text);
        document.body.appendChild(element)
    }
    function doit()
    {
    create();
    //放到create方法里面 会找不到create方法
    setTimeout("create()",10);
    }
    </script>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>我的JavaScript之旅!</title>
    </head>
        <body>
            <input type="button" value="请按下!" onclick="doit()" />
        </body>
    </html>
      

  4.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">function prepareMove(){
      var op = document.createElement("p");
      op.style.position = "absolute";
      op.style.left = "100px";
      op.style.top = "300px";
      op.setAttribute("id","p1");
      op.appendChild(document.createTextNode("我的JavaScript之旅!"));
      document.body.appendChild(op);
    }function move(pId,final_x,final_y,interval){
        var element = document.getElementById(pId); 
        var ypos = parseInt(element.style.top);
        var xpos = parseInt(element.style.left);
        if(xpos == final_x && ypos == final_y){
            return true;
        }
        if(xpos < final_x){
            xpos++;
        }
        if(xpos > final_x){
            xpos--;
        }
        if(ypos < final_y){
            ypos++;
        }
        if(ypos > final_y){
            ypos--;
        }
        element.style.left = xpos + "px";
        element.style.top = ypos + "px";
    var repeat = "move('"+pId+"',"+final_x+","+final_y+","+interval+")"
        setTimeout(repeat,interval);
      
    }
        
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>我的JavaScript之旅!</title>
    </head>
        <body onload="prepareMove()">
            <input type="button" value="请按下!" onclick="move('p1',500,500,10)" />
        </body>
    </html>
      

  5.   

    稍微修改下就OK了
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <script type="text/javascript">
    var element = null;
    function create(){
        if(element == null){
        element = document.createElement("p");
        element.style.border = "1px solid orange";
        element.style.width = "300px";
        element.style.position = "absolute";
        element.style.top = "150px";
        element.style.left = "100px";
        var text = document.createTextNode("我的javascript之旅");
        element.appendChild(text);
        document.body.appendChild(element);
    }
        var ypos = parseInt(element.style.top);
        var xpos = parseInt(element.style.left);
        if(xpos == 200 && ypos == 300){
            return true;
        }
        if(xpos < 200){
            xpos++;
        }
        if(xpos > 200){
            xpos--;
        }
        if(ypos < 300){
            ypos++;
        }
        if(ypos > 300){
            ypos--;
        }
        element.style.left = xpos + "px";
        element.style.top = ypos + "px";
        setTimeout("create()",10);
        
    }
        
        </script>
        <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
        <title>我的JavaScript之旅!</title>
    </head>
        <body>
            <input type="button" value="请按下!" onclick="create()" />
        </body>
    </html>
      

  6.   

    function create(){
    setTimeout("create()",10);
    }
    setTimeout("create()",10);
      

  7.   

    创建完成后，再调用setTimeout方法
    其实可以用递归调用的。