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

Question

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

​

var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");

boxbtn.addEventListener("click", function() {
  var loc = 0;
  var timebox = setInterval(boxmove, 5);
  function boxmove() {
    if (loc == 320) {
      clearInterval(timebox);
    } else {
      loc++;
      boxcont.style.top = loc + "px";
      boxcont.style.left = loc + "px";
    }
  }
});

#movebox {
  width: 300px;
  height: 350px;
  background-color: grey;
}
#boxcont {
  width: 30px;
  height: 30px;
  background-color: indianred;
  position: relative;
}

<div id="movebox">
    <div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>

​

问题是，这个小盒子不完全是在边缘，而是在右边。我试着做

boxcont.style.left = (loc - 0.5) + "px";

但不起作用。很肯定，这个解决方案很简单，但是作为一个新手，这让我很困惑:p。哦，我还试着对0.5和数字(0.5)做++，所以它读起来是十进制，但仍然不起作用！

Answer 1

大灰色盒子没有被设置到与红色小盒子的运动相对应的正确的高度和宽度。你让它下降1，右边每5，然而，你实际上穿过一个矩形，而不是一个正方形。将您的宽度和高度设置为相同的灰色框，并将停止点稍微调整为小一点。

​

                var boxcont = document.getElementById("boxcont");
                var boxbtn = document.getElementById("boxbtn");

                boxbtn.addEventListener("click", function() {
                var loc = 0;
                var timebox = setInterval(boxmove, 5); // every five milliseconds
                function boxmove() {
                    if (loc == 290) {
                    clearInterval(timebox);
                    } else {
                    loc++;
                    boxcont.style.top = loc + "px";
                    boxcont.style.left = loc + "px";
                    }
                }
                });

                #movebox {
                    width: 300px;
                    height: 350px;
                    background-color: grey;
                }
                #boxcont {
                    width: 30px;
                    height: 30px;
                    background-color: indianred;
                    position: relative;
                }

                <div id="movebox" style = "height: 320px; width: 320px">
                    <div id="boxcont" ></div>
                </div>
                <button id="boxbtn">Move the box</button>

​

Answer 2

if (loc == 270) {

而不是

if (loc == 320) {

带你去那里。

300 30是包含div的宽度，移动div宽30 30=270 30。

​

var boxcont = document.getElementById("boxcont");
var boxbtn = document.getElementById("boxbtn");

boxbtn.addEventListener("click", function() {
  var loc = 0;
  var timebox = setInterval(boxmove, 5);
  function boxmove() {
    if (loc == 270) {
      clearInterval(timebox);
    } else {
      loc++;
      boxcont.style.top = loc + "px";
      boxcont.style.left = loc + "px";
    }
  }
});

#movebox {
  width: 300px;
  height: 350px;
  background-color: grey;
}
#boxcont {
  width: 30px;
  height: 30px;
  background-color: indianred;
  position: relative;
}

<div id="movebox">
    <div id="boxcont"></div>
</div>
<button id="boxbtn">Move the box</button>

​