使用單選按鈕讓Div隨機在頁面上移動嗎？

Question

對編程而言，這是一種新事物，並且會混入一些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>

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