鍍金池/ 問答/Linux  HTML/ js練習中的困擾

js練習中的困擾

通過js 實現簡單的文本移動

html文件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>js動畫效果演示</title>    
    </head>
    <body>
        <p id="message">666</p>
        <p id="message2">777</p>    
        <script src="js動畫效果.js"></script>
    </body>
</html>

然后js有三個函數 分別是 moveelement函數

function moveElement(elementId,final_x,final_y,interval){
     if(!document.getElementById) return false;
     if(!document.getElementById(elementId)) return false;
    var elem = document.getElementById(elementId);
    var xpos = parseInt(elem.style.left);
    var ypos = parseInt(elem.style.top);
    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++;
    }
    elem.style.left = xpos + "px";
    elem.style.top = ypos + "px";
    var repeat = "moveElement('"+elementId+"')"+final_x+","+final_y+","+interval+")";
    movement = setTimeout(repeat,interval)
    
}

addonloadEvent函數

    function addLoadEvent(func){
    var oldonload = window.onload;
    if( typeof window.onload != "function"){
        window.onload = func;
    }else{
        window.onload = function(){
            oldonload();
            func();
        }
    }

以及positionMessage函數

    if(!document.getElementById) return false;
    if(!document.getElementById("message")) return false;
    var elem = document.getElementById("message");
    elem.style.position = "absolute";
    elem.style.left = "50px";
    elem.style.top = "100px";
    moveElement("message",200,100,10);
}

addLoadEvent(positionMessage);
想要實現的效果是文本移動
但實際上positiMessage成功調用
但未出現文本移動效果；
并且瀏覽器報錯[Web瀏覽器] "Uncaught SyntaxError: Unexpected number" (1)

回答
編輯回答
撥弦

JSBIN

你這個代碼有很大的問題，沒有考慮方向什么的

修改了一個地方

clipboard.png
你自己比對一下

補充：

clipboard.png
這個地方理應會將其拼接成一個 "moveElement('message',200,100,10)"，如果你把這個單引號去除掉，那么拼接出來就會變成"moveElement(message,200,100,10)",然后setTimeout調用的時候就會變成
new Function("moveElement(message,200,100,10)")()，這個時候message只是個沒意義的字符，也不是全局變量，于是程序就出錯了

2018年5月5日 00:54