Question

我做了一个div和一个按钮。在按钮的点击上设置一个功能，设置div的边距（即移动它）。但是我怎么能在每次点击时移动它。每当我按下按钮时它会移动，（没有刷新页面）当我再次按下该按钮时它不起作用？每次点击按钮时如何移动它！这是我的代码： -

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript</title>
    <style>
        body
        {
            font-family:ebrima;
        }
    </style>
</head>


<body onload="" id="demo">

    <div name="player" style="float:right; height:32px; width:32px; background:green;" id="myDiv"></div>
    <form name="myForm" method="post">  
        <button value="MOVE" type="button" name="moveButton" onClick="move()">MOVE</button>
    </form>


    <script>
        function move()
        {
            document.getElementById("myDiv").style.margin="0px 10px 0px 0px";
        }
    </script>
</body>
</html>

Answer 1

我建议使用jQuery，这使得很多javascript非常简单。

以下是一个示例jQuery动画：

<script>
    function move() {
        $("#myDiv").animate({left:'+=250px'});
    }
</script>

每次触发此功能时，按钮都会将按钮移动250px。

请注意，您需要将jQuery添加到项目中（这很简单）。 The jQuery website has some well organized tutorials应该可以帮助您找到适合JavaScript和jQuery的方法 - 快乐编码！

Answer 2

每次使用变量设置新的边距。使用它之后，更改变量的值，以便下次它将移动到其他地方。

var x = 10;
function move() {
  document.getElementById("myDiv").style.margin="0px "+x+"px 0px 0px";
  x = x+10;
}

首先，不要使用内联js（如onclick）。阅读其中一些结果： *Why is inline js bad? *

相反，请使用javascript：

附加您的事件监听器

var myBtn = document.getElementById('my-btn');
myBtn.addEventListener('click', move);

您的代码将更具可读性/效率，并且更容易调试：

//cache element reference in advance
var document.getElementById("myDiv")

function move() {
  //just target the property you want to change.
  myDiv.style.marginLeft = x+'px';
  x = x+10;
}

这里有一点 demo (click) 我放在一起你可能会喜欢。

var myDiv = document.getElementById('my-div');
var myBtn = document.getElementById('my-btn');

myBtn.addEventListener('click', move);

function move(e) {
  var v = r()+'px '+r()+'px '+r()+'px '+r()+'px';
  myDiv.style.margin = v;
}

function r() {
  return getRandomInt(0, 20);
}

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}

使用mousemove而不是click这是一个更有趣的方法。的 Demo here.

Answer 3

像这样：

function move() {
  var elt = document.getElementById("myDiv"),
      currentMargin = parseInt(elt.style.marginRight, 10);
  elt.style.marginRight = currentMargin + 10 + 'px';
}

如何在javascript中移动内容？

3 个答案: