随机定位一个Div

Question

我正在寻找一种在页面上任意位置随机定位div的方法（每次加载ONCE）。

我目前正在编写基于PHP的幻想宠物模拟游戏。游戏中不常见的一个项目是“四叶草”。目前，用户通过随机分发获得“四叶三叶草” - 但我想改变它（它不够互动！）。

我正在尝试做什么：

这个想法是让用户通过随机将这个图像放在页面的任何位置来搜索这些“四叶三叶草”：（我的四叶草的再现）

我想使用生成div的Java / Ajax脚本执行此操作，然后将其放在页面的任何位置。并且一旦放置它就不会移动它，直到重新加载页面。

我已经尝试了很多谷歌搜索，到目前为止我发现的最接近的是this (click)来自this question。但是，删除.fadein，.delay和.fadeout会阻止脚本完全运行。我绝不是Ajax的专业人士。我正在努力做甚么可能吗？

Answer 1

在javascript中，您可以使用var randomNumber = Math.random();

生成0到1之间的随机数

如果你给你的div绝对定位，你可以做

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

这会将其设置在随机位置。通过将左侧和顶部css属性设置为0到100之间的随机百分比。

Answer 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();

Answer 3

第一个链接适合你，不要删除fadein它显示元素。或者删除'display'：'none'然后你可以删除所有你写的。