Question

我想在箭头按钮上移动div块。但它不起作用。我把按钮放在桌子上。

＆＃13;

document.getElementById("upbutton").onclick = function up() {
  var block = document.getElementById("block");
  var dos = "30px";
  var h = "630px";
  block.style.position = "relative";
  while (block.style.top > h) {
    block.style.top = "300px" + dos + "px";
    dos += "30px";
  }
};

＆＃13;

<div id="space">
  <div id="block"></div>
  <div id="arrows">
    <table>
      <tr>
        <th class="arrow"></th>
        <th class="arrow"><button id="upbutton"><img src="up.png"></button></th>
        <th class="arrow"></th>
      </tr>
      <tr>
        <td class="arrow"><button id="leftbutton"><img src="left.png"></button></td>
        <td class="arrow"><button id="resetbutton"><img src="reset.jpg"></button></td>
        <td class="arrow"><button id="rightbutton"><img src="right.png"></button></td>
      </tr>
      <tr>
        <td class="arrow"></td>
        <td class="arrow"><button id="downbutton"><img src="down.png"></button></td>
        <td class="arrow"></td>
      </tr>
    </table>

  </div>
</div>

＆＃13;

Answer 1

你的代码有很多问题

您不能将字符串添加到将导致字符串的整数级联。如果您添加"300px"+ 10，则会产生结果 300px10不是310px
我无法理解你的逻辑但是你想做什么 while (block.style.top > h) {将永远不会传递，因为块的样式将在开始时再次在字符串0px中h为630。你在while循环中使用parseInt(block.style.top)进行比较。
你的div块没有宽度，高度或颜色，你看不到任何东西。

以下是我使用箭头移动div的实现。

将您的位置存储到对象pos var pos = {top:0,left:0};

然后将事件添加到按钮

<强> UP：

更新pos.top+=dos值并将其应用于block.style.top = pos.top+'px';

document.getElementById("upbutton").onclick = function up() {
  //Update if top is not equal to zero not allowed to go out of window.
  if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';}
};

<强>向下：

更新pos.top-=dos值并将其应用于block.style.top = pos.top+'px';

document.getElementById("downbutton").onclick = function down() {
  if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';}
};

<强>左

更新pos.left-=dos值并将其应用于block.style.left = pos.left+'px';

document.getElementById("leftbutton").onclick = function left() {
  if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';}
};

从右：

更新pos.left+=dos值并将其应用于block.style.left = pos.left+'px';

document.getElementById("rightbutton").onclick = function right() { if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';} };

<强>段

var dos = 30; var h = 630; var block = document.getElementById("block"); var pos = {top:0,left:0}; document.getElementById("upbutton").onclick = function up() { if(pos.top!=0) {pos.top-=dos; block.style.top = pos.top+'px';} }; document.getElementById("downbutton").onclick = function up() { if(pos.top<h) {pos.top+=dos; block.style.top = pos.top+'px';} }; document.getElementById("leftbutton").onclick = function up() { if(pos.left!=0) {pos.left-=dos; block.style.left = pos.left+'px';} }; document.getElementById("rightbutton").onclick = function up() { if(pos.top<h) {pos.left+=dos; block.style.left = pos.left+'px';} };

#block{ width:100px; height:100px; position:relative; background-color:red; } #arrows{ position:relative; z-index:10; }

<div id="space"> <div id="block" style="top:0px"></div> <div id="arrows"> <table> <tr> <th class="arrow"></th> <th class="arrow"><button id="upbutton"><img src="up.png"></button></th> <th class="arrow"></th> </tr> <tr> <td class="arrow"><button id="leftbutton"><img src="left.png"></button></td> <td class="arrow"><button id="resetbutton"><img src="reset.jpg"></button></td> <td class="arrow"><button id="rightbutton"><img src="right.png"></button></td> </tr> <tr> <td class="arrow"></td> <td class="arrow"><button id="downbutton"><img src="down.png"></button></td> <td class="arrow"></td> </tr> </table> </div> </div>

Answer 2

我就是这样做的：

＆＃13;

var block = document.getElementById("block");

function adjustPos(dX, dY) {
  block.style.left = parseInt(block.style.left) + dX + 'px';
  block.style.top = parseInt(block.style.top) + dY + 'px';
}

document.getElementById("upbutton").onclick = () => adjustPos(0, -10);
document.getElementById("leftbutton").onclick = () => adjustPos(-10, 0);
document.getElementById("rightbutton").onclick = () => adjustPos(10, 0);
document.getElementById("downbutton").onclick = () => adjustPos(0, 10);

＆＃13;

#block {
  width: 10px;
  height: 20px;
  background-color: blue;
  position: fixed;
}

＆＃13;

<div id="space">
  <div id="block" style="top: 100px; left: 100px;"></div>
  <div id="arrows">
    <table>
      <tr>
        <th class="arrow"></th>
        <th class="arrow">
          <button id="upbutton">⇑</button>
        </th>
        <th class="arrow"></th>
      </tr>
      <tr>
        <td class="arrow">
          <button id="leftbutton">⇐</button>
        </td>
        <td class="arrow">
          <button id="resetbutton">ⓧ</button>
        </td>
        <td class="arrow">
          <button id="rightbutton">⇒</button>
        </td>
      </tr>
      <tr>
        <td class="arrow"></td>
        <td class="arrow">
          <button id="downbutton">⇓</button>
        </td>
        <td class="arrow"></td>
      </tr>
    </table>
  </div>
</div>

＆＃13;

关键的见解是你需要将字符串解析为int（这会删除尾随的＆＃39; px＆＃39;然后你可以将其添加回来。

此外，您的广告块需要使用position: fixed定位在页面的任何位置。

Answer 3

这可能是一个起点。

var block = document.getElementById("block");
document.getElementById("upbutton").onclick = function up() {
adjustPos(0, -10);
};

document.getElementById("leftbutton").onclick = function up() {
adjustPos(-10, 0);
};

document.getElementById("rightbutton").onclick = function up() {
adjustPos(10, 0);
};

document.getElementById("downbutton").onclick = function up() {
adjustPos(0, 10);
};

document.getElementById("resetbutton").onclick = function up() {
  block.style.left = 50 + 'px';
  block.style.top = 50 + 'px';
};

function adjustPos(dX, dY) {
  block.style.left = parseInt(block.style.left) + dX + 'px';
  block.style.top = parseInt(block.style.top) + dY + 'px';
}

<div id="space" style="width:100px;height:100px">
<div  id="block" style="background-color: black;position: relative;width: 10px;height: 10px; top:50px; left:50px"></div>
</div>

<div id="arrows">
<table>
<tr>
<th class="arrow"></th>
<th class="arrow"><button id="upbutton"><img src="up.png"></img></button></th>
<th class="arrow"></th>
</tr>
<tr>
<td class="arrow"><button id="leftbutton"><img src="left.png"></img></button></td>
<td class="arrow"><button id="resetbutton"><img src="reset.jpg"></img></button></td>
<td class="arrow"><button id="rightbutton"><img src="right.png"></img></button></td>
</tr>
<tr>
<td class="arrow"></td>
<td class="arrow"><button id="downbutton"><img src="down.png"></img></button></td>
<td class="arrow"></td>
</tr>
</table>

</div>

无法在箭头按钮上移动div块

3 个答案: