2016-02-10 33 views
0

我一直在這裏做一些研究,享受學習JavaScript。我一直在谷歌搜索找到這個答案,但沒有運氣。這可能是因爲我有點業餘愛好者,並不知道尋找合適的條件,但也許有人可以引導我走向正確的方向或幫助我。如何讓單位隨機移動單選按鈕?

無論如何,我正在尋找一種方法來讓div坐在中心,並隨每個單選按鈕隨機移動一個頁面。比如,div是一種顏色,一次點擊第一個單選按鈕,它會從中心移動一點,然後中間的單選按鈕移動更多,但最後一個單選按鈕移動很遠。

起點明顯的是頁面的「中心」,終點並不重要。它只需要按下每個按鈕隨機移動。

我有體面的HTML和CSS技能,非常基本的JS技能,以及一些實現JQuery的經驗。理想情況下,我想弄清楚這是因爲圖書館和我擁有的兩個文本都沒有幫助。

這是我到目前爲止。

在此先感謝!

<html> 
<head> 
<style> 

div.a { 
width: 50px; 
height:50px; 
background-color:red; 
margin:0px; 

} 
</style> 

<script> 

function showStyle() { 
    //alert(" ss "); 
    var id = document.getElementById("div1"); 
    var str = ""; 

    str = str + "position: " + id.style.position + ";"; 
    str += "<br>top: " + id.style.top; 
    str += "<br>left: " + id.style.left; 
    str += "<br>width: " + id.style.width; 
    str += "<br>height: " + id.style.height; 
    document.getElementById("para").innerHTML = str; 
    } 


function myFunction(){ 
    var x= document.getElementById("smallRadio"); 
    x.checked = true; } 
    function smallRadio() { 
    var id = document.getElementById("div1"); 
    id.style.top = (parseInt(id.style.top) + 50) + "px"; 
     } 

function myFunction(){ 
    var x= document.getElementById("mediumRadio"); 
    x.checked = true; } 
    function smallRadio() { 
    var id = document.getElementById("div1"); 
    id.style.top = (parseInt(id.style.top) + 50) + "px"; 
     } 


function myFunction(){ 
    var x= document.getElementById("largeRadio"); 
    x.checked = true; } 
    function smallRadio() { 
    var id = document.getElementById("div1"); 
    id.style.top = (parseInt(id.style.top) + 50) + "px"; 
     } 


$(document).ready(function(){ 
    animateDiv(); 

}); 

function makeNewPosition(){ 


    var h = $(window).height() - 50; 
    var w = $(window).width() - 50; 

    var nh = Math.floor(Math.random() * h); 
    var nw = Math.floor(Math.random() * w); 

    return [nh,nw];  

} 

function animateDiv(){ 
    var newq = makeNewPosition(); 
    $('.a').animate({ top: newq[0], left: newq[1] }, function(){ 
     animateDiv();   
    }); 

}; 

</script> 
</head> 

<body> 
<h3>Click</h3> 
Small Leap: <input type="radio" id="smallRadio"><br> 
Medium Leap: <input type="radio" id="mediumRadio"><br> 
Big Leap: <input type="radio" id="largeRadio"><br> 

<button onclick="myFunction()">Click!</button> 

<div class='a'></div> 
+0

我會爲你創建一個小提琴。我也不會使用相同的函數名稱,導致錯誤或只會執行最後找到的函數名稱。這個小提琴可能是一種不同的編碼風格,但是我將如何處理它作爲概念證明。 – Casey

+0

有多少'myFunction'?哪裏沒有單選按鈕的名稱? – Rayon

+0

那裏應該有三個。我在想,我需要3個單選按鈕。 – aether

回答

0

這是我可能會這樣做的方式,然後你可以根據需要調整它。另外,請記住使用動畫使css位置設置爲絕對。一個工作小提琴可以發現here

CSS

div.a { 
width: 50px; 
height:50px; 
background-color:red; 
position:absolute; 
} 

HTML

<h3>Click</h3> 
Small Leap: <input type="radio" id="smallRadio"><br> 
Medium Leap: <input type="radio" id="mediumRadio"><br> 
Big Leap: <input type="radio" id="largeRadio"><br> 

<div class='a' id="mainDiv"></div> 

的Javascript

$(document).on('change', 'input:radio', function(){ 
    var $thisRadio = $(this); //gives us a jQuery instance of current radio that triggered the event 
    //update functions 
    updateDivPosition($thisRadio); 
}); 

function updateDivPosition($target) 
{ 
    var $div = $('#mainDiv'); 
    var newLeft = 0; 
    var newTop = 0; 
    var currentPosition = $div.position(); 

    switch($target.attr("id")) 
    { 
     case "smallRadio": 
      newTop = currentPosition.top + 10; 
      newLeft = currentPosition.left + 10; 

     break; 
     case "mediumRadio": 
      newTop = currentPosition.top + 30; 
      newLeft = currentPosition.left + 30;  

      break;   
     case "largeRadio": 
      newTop = currentPosition.top + 50; 
      newLeft = currentPosition.left + 50; 

     break; 

    } 
    newTop = newTop + "px"; 
    newLeft = newLeft + "px"; 

    $div.animate({"left": newLeft, "top":newTop},1000); 
} 
+0

如果您想要完整的隨機數,請爲隨機數使用隨機數。另外,檢查增加後的位置是否大於父寬度,如果是,則開始減小它。這將使它不會超越觀看或屏幕外。我在javascript中使用這種方法進行遊戲。所以如果它碰到邊界,它會開始相反的方式。只是給你一些想法。 – Casey

0

HTML

<html> 
    <head> 

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

    <body> 
    <h3>Click</h3> 
    Small Leap: <input type="radio" name="leap" value="small" id="smallRadio"><br> 
    Medium Leap: <input type="radio" name="leap" value="medium" id="mediumRadio"><br> 
    Big Leap: <input type="radio" name="leap" value="large" id="largeRadio"><br> 

    <button onclick="delegateJump()">Click!</button> 

    <div class='a' data-top="0" data-left="0"></div> 
    <div id='div1'></div> 
    <div id='para'></div> 
    </body> 
    </html> 

CSS

div.a { 
    width: 50px; 
    height:50px; 
    background-color:red; 
    margin:0px; 
    position: absolute; 
    top: 50%; 
    left:50%; 

} 

的Javascript

function showStyle() { 
    //alert(" ss "); 
    var id = document.querySelector('.a'); 
    var str = ""; 

    str = str + "position: " + id.style.position + ";"; 
    str += "<br>top: " + id.style.top; 
    str += "<br>left: " + id.style.left; 
    str += "<br>width: " + id.style.width; 
    str += "<br>height: " + id.style.height; 
    str += "<br>move top: " + id.dataset.top; 
    str += "<br>move left: " + id.dataset.left; 
    document.getElementById("para").innerHTML = str; 
} 


    function smallJump(){ 
     return Math.floor(Math.random() * 25) - 10; 
    } 

    function mediumJump(){ 
     return Math.floor(Math.random() * 100) - 50; 
    } 


    function largeJump(){ 
    return Math.floor(Math.random() * 200) - 100; 
    } 

    function delegateJump() { 
    var type = $('input[name="leap"]:checked').val(); 
    var div = $('.a') 
    switch (type) { 
     case "small": 
     div.attr("data-top", smallJump()); 
     div.attr("data-left", smallJump()); 
     break; 
     case "medium": 
     div.attr("data-top", mediumJump()); 
     div.attr("data-left", mediumJump()); 
     break; 
     case "large": 
     div.attr("data-top", largeJump()); 
     div.attr("data-left", largeJump()); 
     break; 
     default: 
     div.attr("data-top", 0); 
     div.attr("data-left", 0); 
     break; 
     } 
    } 

    $(document).ready(function(){ 
    animateDiv(); 

    }); 

    function makeNewPosition(x,y){ 

    var w = $(window).width() - 50; 
    var h = $(window).height() - 50; 
    var x = parseInt(x, 10) || 0; 
    var y = parseInt(y, 10) || 0; 

    var nw = Math.floor(Math.random() * w) + x; 
    var nh = Math.floor(Math.random() * h) + y; 

    return [nh,nw];  

    } 


    function animateDiv(){ 
    var newq = makeNewPosition.apply(null, [$('.a').attr('data-top'), $('.a').attr('data-left') ]); 
    showStyle(); 

    $('.a').animate({ top: newq[0], left: newq[1] }, function(){ 
     animateDiv();  
    }); 

    }; 

我在你的代碼進行了一些修改。

  1. 我切換到使用數據屬性來保存跳轉值。

  2. 隨着數據屬性持有該值,隨機跳轉動畫使用該值來重新計算進一步的跳轉。

  3. 我對div的樣式添加了絕對定位。

  4. 您的無線電輸入需要一個名稱,這使您可以從一個選擇器中獲取任何一個值。