2

ページの任意の場所に div をランダムに配置する方法を探しています (読み込みごとに 1 回)。

私は現在、PHP ベースのファンタジー ペット シミュレーション ゲームをプログラミングしています。ゲームの珍しいアイテムの1つは「四つ葉のクローバー」です。現在、ユーザーはランダムな配布を通じて「四つ葉のクローバー」を獲得していますが、これを変更したいと考えています (十分にインタラクティブではありません!)。

私がやろうとしていること：

アイデアは、この画像をページ上の任意の場所にランダムに配置して、ユーザーにこれらの「四つ葉のクローバー」を検索させることです: この画像(四つ葉のクローバーの私の表現)

div を生成し、ページの任意の場所に配置する Java/Ajax スクリプトを使用してこれを行いたいと思います。一度配置すると、ページがリロードされるまで移動しません。

私は非常に多くのGoogle検索を試しましたが、これまでに見つけた最も近いものはこれです (クリック) , from this question . しかし、.fadein、.delay、および .fadeout を削除すると、スクリプトが完全に機能しなくなりました。私は決して Ajax のプロではありません。私がやろうとしていることは可能ですか？

4

3 に答える 3

6

JavaScript では、0 から 1 の間の乱数を生成できます。var randomNumber = Math.random();

div に絶対配置を指定すると、次のことができます

div.style.top = (100*Math.random()) + "%";
div.style.left = (100*Math.random()) + "%";

これにより、ランダムな場所に設定されます。左側と上部の CSS プロパティを 0 から 100 の間のランダムなパーセンテージに設定する。

于 2012-07-03T09:14:06.440 に答える
2

これはまだ機能します。makeDiv() を使用して新しいものを作成するだけです。

function makeDiv(){

var divsize = ((Math.random()*100) + 50).toFixed();
var color = '#'+ Math.round(0xffffff * Math.random()).toString(16);
$newdiv = $('<div/>').css({
    'width':divsize+'px',
    'height':divsize+'px',
    'background-color': color
});

var posx = (Math.random() * ($(document).width() - divsize)).toFixed();
var posy = (Math.random() * ($(document).height() - divsize)).toFixed();

$newdiv.css({
    'position':'absolute',
    'left':posx+'px',
    'top':posy+'px',
    'display':'none'
}).appendTo( 'body' ).fadeIn(100);
};

makeDiv();
于 2012-07-03T09:18:02.177 に答える
0

最初のリンクがあなたに合っている場合は、要素を表示するフェードインを削除しないでください。または、'display':'none' を削除すると、書いたものをすべて削除できます。

于 2012-07-03T09:16:41.203 に答える