Javascript 单击上\下\左\右按钮时如何在div中移动圆

我需要通过单击按钮来移动圆。圆圈不应该远离边界

这只适用于左键和下键，但这不是使用边距的好方法。有一种方法可以改变相对左\右\上\下的位置，而不是边距

（函数（）{
var button=document.getElementsByClassName（“按钮”）；
var circle=document.getElementById（“circle”）；
var向下=0，向上=0，左=0，右=0；
对于（变量i=0；i
html，正文{
字体大小：62.5%；
}
.边界{
位置：相对位置；
溢出：隐藏；
浮动：左；
宽度：70%；
高度：50雷姆；
边框：1深黑色实心；
右边距：1rem；
}
.侧边栏{
位置：相对位置；
浮动：左；
边框：1深黑色实心；
宽度：25%；
高度：50雷姆；
}
.按钮{
位置：相对位置；
宽度：25雷姆；
高度：21雷姆；
顶部：9rem；
左：4rem；
}
.按钮{
位置：绝对位置；
宽度：7雷姆；
身高：7雷姆；
}
.阿罗{
位置：绝对位置；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}
.向上箭头{
左边框：12px实心透明；
右边框：12px实心透明；
边框底部：16px纯黑；
}
.向右箭头{
边框顶部：12px实心透明；
边框底部：12px实心透明；
左边框：16px纯黑；
}
.左箭头{
边框顶部：12px实心透明；
边框底部：12px实心透明；
右边框：16px纯黑；
}
.向下箭头{
左边框：12px实心透明；
右边框：12px实心透明；
边框顶部：16px纯黑；
}
.下来{
底部：0；
左：9雷姆；
}
.左{
顶部：7rem；
左：0；
}
.对{
顶部：7rem；
右：0；
}
.起来{
排名：0；
左：9雷姆；
}
.重置{
位置：相对位置；
顶部：12雷姆；
宽度：10雷姆；
身高：4rem；
左：12rem；
}
#圈{
位置：相对位置；
边界半径：50%；
宽度：150px；
高度：150像素；
背景：蓝色；
左：50%；
最高：50%；
转换：翻译（-50%，-50%）；
}

重置
您必须对javascript代码做一些小的更改：

    (function(){

    var button = document.getElementsByClassName("button");
    var circle = document.getElementById("circle");

    var top=50, left=50, perStep = 2;

    for (var i = 0; i < button.length; i++) {
        button[i].addEventListener('click',function(e){

            var position = e.currentTarget.value;

            switch(position){
                case "up": top-=perStep; break;
                case "down": top+=perStep; break;
                case "left": left-=perStep; break;
                case "right": left+=perStep; break;
            }

            if(top < 0)
                top = 0;
            if(top > 100)
                top = 100;

            if(left < 0)
                left = 0;
            if(left > 100)
                left = 100;

            circle.style.top = top+'%';
            circle.style.left = left+'%';
        });
    }

}());

（函数（）{
var button=document.getElementsByClassName（“按钮”）；
var circle=document.getElementById（“circle”）；
var top=50，left=50，perStep=2；
对于（变量i=0；i100）
top=100；
if（左<0）
左=0；
如果（左>100）
左=100；
circle.style.top=top+'%'；
circle.style.left=左+“%”；
});
}
}());

与其更改页边距，不如更改顶部和左侧css属性

编辑：更改了开关的if语句

编辑2：现在不要走出国境

JS:

(function() {
  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");
  var down = 0,
    up = 0,
    left = 0,
    right = 0;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;

      // for bottom and top, use marginTop, but for one increase by 5
      // and for the other decrease by 5
      if (position === "down") {
        down += 5;
        circle.style.marginTop = down + "px";
      }
      if (position == "up") {
        up -= 5;
        circle.style.marginTop = up + 'px';
      }
      // same thing for left and right, use marginLeft, but for one increase by 5
      // and for the other decrease by 5
      if (position == "left") {
        left -= 5;
        circle.style.marginLeft = left + 'px';
      }
      if (position == "right") {
        left += 5;
        circle.style.marginLeft = left + 'px';
      }
    })
  }
}());

将使用边距，但始终仅设置
marginLeft/Top
。不要使用四个值，只使用
水平
和
垂直
。当检测到左/上按钮时，减小相应的值，如果是右/下按钮，则增大相应的值。谢谢！！这项工作正在进行中。我也尝试使用circle.style.top，但它不起作用……它起作用了，但你需要抓住
circle.offsetTop
和
circle.offsetLeft
valeus，就像我在回答中的第二把小提琴一样。我如何阻止圆从边框中出来？正如我告诉你的，使用CSS top和left，而不是边距。看看新的修改。。我没有测试它，所以它不能工作。请试一试。
(function() {

  var button = document.getElementsByClassName("button");
  var circle = document.getElementById("circle");


  var posTop = circle.offsetTop,
    posLeft = circle.offsetLeft;

  for (var i = 0; i < button.length; i++) {
    button[i].addEventListener('click', function(e) {
      var position = e.currentTarget.value;
      if (position === "down") {
        posTop += 5;
        circle.style.top = posTop + "px";
      }
      if (position == "up") {
        posTop -= 5;
        circle.style.top = posTop + 'px';
      }
      if (position == "left") {
        posLeft -= 5;
        circle.style.left = posLeft + 'px';
      }
      if (position == "right") {
        posLeft += 5;
        circle.style.left = posLeft + 'px';
      }

    })
  }
}());