jquery - jqueryは、divの高さと幅の乱数を生成します

Question

divの幅と高さを使用して乱数を生成したい。生成後、xとyの位置を使用して静的テキストを配置する必要がありますが、テキストが重ならないようにする必要があります。

この関数は私のために乱数を生成しますMath.floor ( Math.random ( ) );が、n個の数字が欲しいと言うと、テキストが互いに重ならないことを常に保証できます。

高さと幅を使用して乱数を生成するにはどうすればよいですか？

Answer 1

x=Math.floor(Math.random()*1000);
y=Math.floor(Math.random()*1000);
$('#idoftextbox').val('X Position is '+x+' and Y Position is '+y);

Answer 2

jsフィドル

テキストの衝突を処理する更新されたコードは次のとおりです。テキストに応じて、衝突許容距離 (およびおそらくあきらめるまでのランダムな試行回数) を変更する必要があります。理論的には非常に非効率的ですが、現時点では目立ったパフォーマンスの問題はありませんが、必要に応じて微調整できます。

明らかなパフォーマンス向上の 1 つは、座標リストをソートされた順序に保つことです。そうすれば、挿入する前に各リストの前の値をチェックする必要がなくなり、挿入する正しいインデックスを検索することは、衝突をチェックすることと同じプロセスになります。さらに言えば、簡単に見つけることができるより優れた検索アルゴリズムを使用するだけで、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>