使用单选按钮使 Div 在页面上随机移动？答案

【问题标题】：Making a Div move across a page randomly with radio buttons?使用单选按钮使 Div 在页面上随机移动？
【发布时间】：2016-02-11 06:37:01
【问题描述】：

对于一般的编程和搞乱一些 JS 有点陌生。我试图获得一些理解和帮助来解决这个问题。我去过图书馆，想弄明白。

我想要做的是有 3 个单选按钮。我将它们命名为小、中、大，中间有一个 div。 div 应该在屏幕的中间。该人从单选按钮中选择位移增量。用户将鼠标悬停在彩色 div 上，然后 div 将移动到一个随机的新位置（我在想 random() 方法），然后是 [delta -5, delta +5] 之间的位移。

现在。该程序有效。我似乎无法将“div”放在图像的中心，并且由 math.random 在页面上移动的 div 很慢？我怎样才能让它更快？

所以这些是我不确定的问题。

1) 如何使 div 居中？我已经尝试过两次更改位置，但是这导致“中心”不是一个正确的名称，然后尝试了顶部和宽度，但不起作用。

2) 如何通过 math.random 让 div 移动得更快。

3) 有没有什么办法可以不刷新页面，而是转到另一个“收音机”，速度会变慢，而不会使这些变得复杂？

这是我到目前为止的代码。

<html>
    <head></head>   
    <style>

    div.moving{
      width: 90px;
      height:90px;
      background-color:black;
      position:absolute;}
    </style>
    </head>


    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    1 px <input type="radio" id="s" name="move" value="1" checked="checked"><br>
    10 px <input type="radio" id="m" name="move" value="10"><br>
    100 px <input type="radio" id="l" name="move" value="100"><br>

    <div class='moving' id="mainDiv" onmouseover=" move();"></div>
    </body>

    <script type="text/javascript">
    $( document ).ready( function(){  
      $('#mainDiv').mouseover(function(){
          var stepSize = parseInt( $('input[type=radio][name=move]:checked').val() );

          var pos = $( this ).position();
          var left = parseInt( pos.left );
          var top = parseInt( pos.top );

          var new_left = left + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] );
          var new_top = top + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] );    

          $( this ).css('left', new_left + 'px' );
          $( this ).css('top', new_top + 'px' );
      });});

    document.getElementById('mainDiv').style.left="700px";

    function getRandomIntInclusive(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    </script>

【问题讨论】：

查看jquery动画功能

标签： javascript jquery html css random

【解决方案1】：

<html>
    <head></head>   
    <style>
        html.body {
            width: 100%;
            height: 100%;
        }
    div.moving{
      width: 90px;
      height:90px;
      background-color:black;
      position:absolute;
        left: 0;
  right: 0;
        margin: 0 auto;}
    </style>
    </head>


    <body>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


    1 px <input type="radio" id="s" name="move" value="1" checked="checked"><br>
    10 px <input type="radio" id="m" name="move" value="10"><br>
    100 px <input type="radio" id="l" name="move" value="100"><br>

    <div class='moving' id="mainDiv" onmouseover=" move();"></div>
    </body>

    <script type="text/javascript">
    $( document ).ready( function(){  
      $('#mainDiv').mouseover(function(){
          var stepSize = parseInt( $('input[type=radio][name=move]:checked').val() );

          var pos = $( this ).position();
          var left = parseInt( pos.left );
          var top = parseInt( pos.top );

          var new_left = left + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] );
          var new_top = top + (getRandomIntInclusive(0,stepSize) * [-1,1][Math.floor(Math.random() * 2) * 10] );    

          $( this ).css('left', new_left + 'px' );
          $( this ).css('top', new_top + 'px' );
      });});

    document.getElementById('mainDiv').style.left="0px";

    function getRandomIntInclusive(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
    </script>

【讨论】：