我想创建一个页面,页面的按钮应该放在随机的地方
I want create a page where the the buttons of that page should place in random places
我想创建一个页面,该页面的按钮应该放在随机位置:
点:
1) 按钮应在屏幕内
2) 按钮不应碰撞
我已经扩展了这里可用的解决方案,下面是您可以做的:
[注意,此解决方案使用的是jQuery,而不是Angular。]
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>
检查这个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;
}
相关文章:
- 单击按钮时显示随机字符串
- Jquery/Javascript:通过按下按钮显示数组中的随机图像
- 单击时将文本的颜色更改为随机颜色(按钮)
- 在AngularJS中向控制器发送多个随机单选按钮值
- 每次单击按钮即可创建新的随机句子
- 当我点击一个按钮时随机选择一个声音来重现的脚本
- 按钮被制作成一个图像来执行Javascript随机生成器
- 每次单击按钮时随机选择颜色
- 我想创建一个页面,页面的按钮应该放在随机的地方
- 带有单选按钮 JavaScript 的随机测验
- 在Jquery中发送带有推文按钮点击的随机报价
- 如何将随机按钮添加到表单
- Javascript - 如何使按钮生成 1-12 的随机整数,并让按钮不断产生相同的数字
- 创建一个按钮,该按钮将使用随机查询字符串向 URL 发出请求
- 使用单选按钮使 Div 在页面上随机移动
- 如何让 Div 使用单选按钮随机移动
- 尝试在不刷新页面的情况下单击按钮显示新的随机值
- JavaScript OnClick按钮生成随机算术问题表
- 随机播放功能在单击按钮上不起作用
- 我如何使这只显示一个结果,并添加一个随机按钮