我想使用 div 宽度和高度生成一个随机数。生成后,我必须使用 x 和 y 位置放置静态文本,但文本不应重叠。
这个函数会为我生成一个随机数,Math.floor ( Math.random ( ) );
但是说我想要 n 个数字,它总是可以向我保证文本不会相互重叠。
如何使用高度和宽度生成随机数?
我想使用 div 宽度和高度生成一个随机数。生成后,我必须使用 x 和 y 位置放置静态文本,但文本不应重叠。
这个函数会为我生成一个随机数,Math.floor ( Math.random ( ) );
但是说我想要 n 个数字,它总是可以向我保证文本不会相互重叠。
如何使用高度和宽度生成随机数?
x=Math.floor(Math.random()*1000);
y=Math.floor(Math.random()*1000);
$('#idoftextbox').val('X Position is '+x+' and Y Position is '+y);
这是处理文本冲突的更新代码;您需要根据您的文本修改碰撞容差距离(可能还有放弃前的随机尝试次数)。虽然理论上效率非常低,但目前没有任何明显的性能问题,但您可以根据需要进行调整。
一个明显的性能提升是保持坐标列表的排序。这样,您不必在每次插入之前检查每个列表中的每个先前值,并且搜索要插入的正确索引与检查冲突的过程相同。就此而言,您可以通过使用更好的搜索算法简单地isTooClose
从更改O(n)
为,您可以轻松找到该算法。O(log n)
$(document).ready(function() {
var z = 300, tops = [], lefts = [];
for (var i = 0; i <= z; i++) {
var x=0, y=0, j=0;
while( isTooClose(x, y) && j < 50) {
x = Math.floor(Math.random() * 500);
y = Math.floor(Math.random() * 500);
j++;
}
if (j>=50) { alert('1'); }
$('<div>').css({
position: "absolute",
left: x,
top: y,
fontSize: 'small'
}).html("Hello").appendTo('#test');
lefts.push(x);
tops.push(y);
}
function isTooClose( x, y ) {
for (var i = 0; i < tops.length; i++) {
if ( (x + 30 >= lefts[i] && x - 30 <= lefts[i]) &&
(y + 10 >= tops[i] && y - 10 <= tops[i]) ) {
return true;
}
}
return false;
}
});
</p>