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

Making a Div move across a page randomly with radio buttons?

本文关键字：随机 移动 单选按钮 Div      更新时间：2023-09-26
有点

新编程到一般和弄乱一些JS。我正在尝试获得一些理解并帮助解决此问题。我去过图书馆，试图弄清楚这一点。

我想做的是有 3 个单选按钮。我将它们命名为小、中、大，中间有一个div。div 应该在屏幕中间。人员从单选按钮中选择位移 delta。用户将鼠标悬停在彩色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>


<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>

相关文章：