如何使用 javascript 移動 div

Question

我絕對是 Javascript 的新手。我的目標是通過使用 Javascript 來構建兩個 div 並為孩子設置動畫。但是我的 function 中存在某種問題，盡管這是一項繁瑣的任務，但我找不到任何東西。

所以，這些是我的按鈕和我的 div（我只是想弄清楚開始按鈕是如何工作的，然后我將處理其他按鈕

//create elements
const start = document.createElement('button');
const reset = document.createElement('button');
const stop = document.createElement('button');



const parent = document.createElement("div");
const child= document.createElement("div");
document.body.append(parent);
parent.append(child);
document.body.append(start);
document.body.append(reset);
document.body.append(stop);

// style 
parent.style.width = "200px";
parent.style.height = "200px";

child.style.width = "20px";
child.style.height = "20px";


child.style.background = "green"
parent.style.background  = "red";

start.innerHTML = "start";
reset.innerHTML = "reset";
stop.innerHTML = "stop";

這是我沒用的 function 看起來不正確

/functions and listeners
var g =setInterval(move(),2000);
function move(){
    var pos = 0;
    if (pos == 200) {
        clearInterval(g);
    }
    else {
        pos++;
        child.style.top = pos + "px";
        child.style.left = pos + "px";
    }
}
start.addEventListener("click",move());

任何類型的提示或建議表示贊賞=）

Answer 1

你有幾個問題：

• pos變量需要在使用它的 function 之外聲明，以便在 function 運行時不會丟失其值，然后可以在 ZC1C425268E68384D14AB5074C17Z9 運行時使用。
• 開始按鈕的點擊事件處理程序應該是間隔計時器開始的地方，否則它會立即開始。
• Both setInterval() and .addEventListener .addEventListener() take function references - - you do not invoke a function in their arguments (unless that function returns a function and that returned function is what you want to reference). 因此，在 function 名稱之后都不應該有() 。
• 您的父元素和子元素需要定位，以便它們不在正常的文檔流中，否則設置top或left CSS 屬性將不起作用。
• 當您不使用 HTML 字符串時，請勿使用.innerHTML ，因為.innerHTML具有安全性和性能影響。 當您只有文本可以使用時，請使用.textContent 。

查看其他內聯評論：

 //create elements const start = document.createElement('button'); const reset = document.createElement('button'); const stop = document.createElement('button'); const parent = document.createElement("div"); const child= document.createElement("div"); document.body.append(parent); parent.append(child); document.body.append(start); document.body.append(reset); document.body.append(stop); /* Use CSS classes instead of inline styles */ parent.classList.add("parent"); child.classList.add("child"); start.textContent = "start"; reset.textContent = "reset"; stop.textContent = "stop"; //functions and listeners var timer = null; var pos = 0; function move(){ // Since it's the top and left of the child that are being set, we // need to subtract the width of the box from the size of the parent // so that the child doesn't end with its top and left outside of the // parent. if (pos == 180) { clearInterval(timer); } else { pos++; child.style.top = pos + "px"; child.style.left = pos + "px"; } } start.addEventListener("click", function() { // The timer should start when the button is clicked timer = setInterval(move,20); }); reset.addEventListener("click", function() { clearInterval(timer); // Stop the timer so motion stops pos = 0; child.style.top = pos+ "px"; child.style.left = pos + "px"; });

 /* The child needs to be taken out of the normal document flow so it can be explicitly positioned, but we want it to be relative to the parent it is inside of, so the parent also has to be positioned explicitly. */.parent { position:relative; width: 200px; height:200px; background-color:red; }.child { position:relative; width: 20px; height:20px; background-color:green; }