Javascript 如何使一个盒子达到一个大盒子的边缘

javascript初学者在这里！所以我试着做一个盒子（在一个更大的盒子里）从盒子的顶部移动到边缘。代码如下：

var-boxcont=document.getElementById（“boxcont”）；
var-boxbtn=document.getElementById（“boxbtn”）；
boxbtn.addEventListener（“单击”，函数（）{
var-loc=0；
var timebox=设置间隔（boxmove，5）；
函数boxmove（）{
如果（loc==320）{
清除间隔（时间盒）；
}否则{
loc++；
boxcont.style.top=loc+“px”；
boxcont.style.left=loc+“px”；
}
}
});
#移动框{
宽度：300px；
高度：350px；
背景颜色：灰色；
}
#博克斯康{
宽度：30px；
高度：30px；
背景色：印度红；
位置：相对位置；
}

移动框
而不是

if (loc == 320) {

把你带到那里

300px是包含的
div
的宽度，移动的
div
的宽度为30px，因此300-30=270px


var-boxcont=document.getElementById（“boxcont”）；
var-boxbtn=document.getElementById（“boxbtn”）；
boxbtn.addEventListener（“单击”，函数（）{
var-loc=0；
var timebox=设置间隔（boxmove，5）；
函数boxmove（）{
如果（loc==270）{
清除间隔（时间盒）；
}否则{
loc++；
boxcont.style.top=loc+“px”；
boxcont.style.left=loc+“px”；
}
}
});
#移动框{
宽度：300px；
高度：350px；
背景颜色：灰色；
}
#博克斯康{
宽度：30px；
高度：30px；
背景色：印度红；
位置：相对位置；
}

移动框
灰色大框未设置为与红色小框移动相对应的正确高度和宽度。你让它每5次向下1，向右1，然而，你实际上穿过的是一个矩形，而不是一个正方形。将灰色框的宽度和高度设置为相同，并稍微将停止点调整为稍小一点



var-boxcont=document.getElementById（“boxcont”）；
var-boxbtn=document.getElementById（“boxbtn”）；
boxbtn.addEventListener（“单击”，函数（）{
var-loc=0；
var timebox=setInterval（boxmove，5）；//每五毫秒
函数boxmove（）{
如果（loc==290）{
清除间隔（时间盒）；
}否则{
loc++；
boxcont.style.top=loc+“px”；
boxcont.style.left=loc+“px”；
}
}
});


#移动箱{
宽度：300px；
高度：350px；
背景颜色：灰色；
}
#博克斯康{
宽度：30px；
高度：30px；
背景色：印度红；
位置：相对位置；
}


移动箱子
与您正在做的有点不同，但您可以使用css类来实现这一点：我知道，但如果我希望灰色框的宽度更大，但仍然使红色框达到其边缘，该怎么办。问题已由另一位用户解决，但感谢您的感谢：）好的，我以为您希望它从一个角落转到另一个角落。没问题！
if (loc == 320) {