如何使用javascript移动div

我对Javascript绝对是新手。我的目标是只使用Javascript构建两个div并设置孩子的动画。但我的函数中存在某种问题，尽管这是一项琐碎的任务，但我找不到任何东西

所以，这些是我的按钮和div（我只是想弄清楚start按钮是如何工作的，然后我将处理其他按钮

//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";

这是我没用的函数，看起来不对

/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());

---

任何提示或建议都将不胜感激。

您有几个问题：

• pos

  变量需要在 使用它，以便在函数运行和 然后可以在函数运行额外时间时使用
• 开始按钮的click事件处理程序应该位于间隔 计时器已启动，否则将立即启动
• 兼得 函数引用——您不调用中的函数 它们的参数（除非该函数返回一个函数 返回的函数是您要引用的函数）。因此，两者都不应该 函数名后面有

  （）

• 需要对父元素和子元素进行定位，以便它们 不在正常文档流中，否则设置

  顶部

  或

  左侧

  CSS属性不会做任何事情
• 当您不使用HTML字符串时，不要使用

  .innerHTML

  .innerHTML

  具有安全性和性能影响。当你刚刚 要使用文本，请使用

  .textContent

请参阅其他注释：

//创建元素
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（父级）；
父。追加（子）；
document.body.append（开始）；
document.body.append（重置）；
document.body.append（停止）；
/*使用CSS类而不是内联样式*/
parent.classList.add（“parent”）；
child.classList.add（“child”）；
start.textContent=“开始”；
reset.textContent=“reset”；
stop.textContent=“停止”；
//函数和侦听器
var定时器=null；
var-pos=0；
函数move（）{
//因为要设置的是孩子的左上方，所以我们
//需要从父对象的大小中减去长方体的宽度
//这样子对象就不会以其顶部结束，并留在外部
//家长。
如果（位置==180）{
清除间隔（计时器）；
}否则{
pos++；
child.style.top=pos+“px”；
child.style.left=pos+“px”；
}
}
start.addEventListener（“单击”，函数（）{
//单击按钮时，计时器应启动
定时器=设置间隔（移动，20）；
});
reset.addEventListener（“单击”，函数（）{
clearInterval（计时器）；//停止计时器，使运动停止
pos=0；
child.style.top=pos+“px”；
child.style.left=pos+“px”；
});
/*需要将该子项从正常文档流中取出，以便
显式定位，但我们希望它是相对于父对象的
在的内部，因此父对象也必须显式定位*/
.parent{位置：相对；宽度：200px；高度：200px；背景色：红色；}
.child{position:relative；width:20px；height:20px；background color:green；}
最后一个快速问题：我的重置按钮工作正常，但当我单击它时，正方形开始自动向下运行。我如何只重置位置，然后只在按下开始按钮时启动正方形？这是我的重置按钮
reset.addEventListener（“单击”，函数（）{pos=0；child.style.top=pos+“px”；child.style.left=pos+“px”}）
不客气。我已经更新了我的答案来回答你的最后一个问题，这真的只需要添加
clearInterval（计时器）以便运动停止。请考虑将此标记为“答案”，单击答案左上方的复选标记。