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

Question

Kind of new to programming to general and messing around with some JS. 对编程而言，这是一种新事物，并且会混入一些JS。 I'm trying to get some understanding and help to fix this. 我正在尝试获得一些理解并帮助解决此问题。 I've been to the library, trying to figure this out. 我去过图书馆，试图找出答案。

What I'm trying to do is have 3 radio buttons. 我想做的是有3个单选按钮。 I named them like small, medium, large and have a div in the middle. 我将它们命名为“小”，“中”，“大”，中间有一个div。 The div is suppose to be in the middle of the screen. div应该位于屏幕中间。 The person selects a displacement, delta, from the radio buttons. 该人员从单选按钮中选择位移增量。 The users mouses over the coloured div, the div would then move to a new location that is random (I'm thinking random() method), then the displacement between [delta -5, delta +5]. 用户将鼠标悬停在彩色的div上，然后div将移动到一个随机的新位置（我在考虑random（）方法），然后移动[delta -5，delta +5]之间。

Right now. 马上。 The program works. 该程序有效。 I cannot seem to get the 'div' right in the centre of the image and the div moved by math.random across the page is slow? 我似乎无法正确地将'div'放置在图像中心，并且math.random在整个页面上移动的div较慢？ How can I make that faster? 我怎样才能使它更快？

So these are the problems I'm not sure about. 所以这些是我不确定的问题。

1) How can I centre the div? 1）如何将div居中？ I have tried twice to change the position, but then that leads to 'centre' not being a right name, then tried top and width, not working. 我已经尝试过两次更改位置，但是这导致“中心”不是正确的名称，然后尝试了顶部和宽度，却无法正常工作。

2) How can I make the div move faster by math.random. 2）如何通过math.random使div移动更快。

3) Is there a way instead of refreshing the page, I can go to the other 'radio' and the speed slows down without making these complicated? 3）有没有一种方法可以刷新页面，我可以转到另一个“收音机”，并且速度变慢而不会使这些变得复杂？

Here is the code I have so far. 这是我到目前为止的代码。

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

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

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

问题描述

1 个解决方案

解决方案1
0 2016-02-11 06:44:43

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

问题描述

1 个解决方案

解决方案1 0 2016-02-11 06:44:43

解决方案1
0 2016-02-11 06:44:43