我想創建一個頁面，該頁面的按鈕應該在隨機的地方

Question

我想創建一個頁面，該頁面的按鈕應該在隨機的地方。地方：

點：

1）按鈕應當出現在屏幕內

2）按鈕不應碰撞

Answer 1

我有擴展可用here和這裏的解決方案是你可以做什麼：

[請注意，此解決方案使用jQuery和沒有棱角。]

var min_x = 0; 
 
var max_x = 200; 
 
var min_y = 0; 
 
var max_y = 200; 
 
var filled_areas = new Array(); 
 

 
$('.word').each(function() { 
 
    var rand_x=0; 
 
    var rand_y=0; 
 
    var area; 
 
    do { 
 
     rand_x = Math.round(min_x + ((max_x - min_x)*(Math.random() % 1))); 
 
     rand_y = Math.round(min_y + ((max_y - min_y)*(Math.random() % 1))); 
 
     area = {x: rand_x, y: rand_y, width: $(this).width(), height: $(this).height()}; 
 
    } while(check_overlap(area)); 
 
    
 
    filled_areas.push(area); 
 
    
 
    $(this).css({left:rand_x, top: rand_y}); 
 
}); 
 

 
function check_overlap(area) { 
 
    for (var i = 0; i < filled_areas.length; i++) { 
 
     
 
     check_area = filled_areas[i]; 
 
     
 
     var bottom1 = area.y + area.height; 
 
     var bottom2 = check_area.y + check_area.height; 
 
     var top1 = area.y; 
 
     var top2 = check_area.y; 
 
     var left1 = area.x; 
 
     var left2 = check_area.x; 
 
     var right1 = area.x + area.width; 
 
     var right2 = check_area.x + check_area.width; 
 
     if (bottom1 < top2 || top1 > bottom2 || right1 < left2 || left1 > right2) { 
 
      continue; 
 
     } 
 
     return true; 
 
    } 
 
    return false; 
 
}

.word { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="word1" class="word"><button>hello</button></div> 
 
<div id="word2" class="word"><button>tag</button></div> 
 
<div id="word3" class="word"><button>cloud</button></div> 
 
<div id="word4" class="word"><button>hello</button></div>

Answer 2

支票本的jsfiddle鏈接....你可以改變的隨機值.. http://jsfiddle.net/abcdurga/uparw4tc/

makeRandomButtons(10, 10, 2, 255, 2, 255, 2, 255, 'buttonId','Button');//  call this in ur for loop. 

function makeRandomButtons(min_w, max_w, min_col_r, max_col_r, min_col_g, max_col_g, min_col_b, max_col_b, buttonId,ButtonName){ 

    var w = Math.floor(rand(min_w/2,max_w/2))*2+80; 
    var col_r = Math.floor(rand(min_col_r,max_col_r)); 
    var col_g = Math.floor(rand(min_col_g,max_col_g)); 
    var col_b = Math.floor(rand(min_col_b,max_col_b)); 
    var col_a = 1; 
    var left = Math.floor(rand(150,40)); 
    var top = Math.floor(rand(110,40)); 

    var borderrad = 10; 

    var params = buttonId; 

    var divTag = '<div onclick="buttonClick('+params+')" style="position:relative;float:left;margin-left:'+left+'px;margin-top:'+top+'px;width:'+w+'px;height:'+w+'px;background-color:rgba('+col_r+','+col_g+','+col_b+','+col_a+');-moz-border-radius:'+borderrad+'px;-webkit-border-radius:'+borderrad+'px;border-radius:'+borderrad+'px;z-index:9999;" >' 
     +'<div style="color:black;margin-top:5%;margin-left:43%;width:52%;height:10%;">'+ButtonName+'</div></div>'; 

    $('#contentId').append(divTag); 

}

function rand(minv,maxv){ 
return (Math.random()*(maxv-minv))+minv; 

}