Java 随机定位一个Div

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

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

我想做什么：

这样做的目的是让用户通过在页面的任意位置随机放置这张图片来搜索这些“四叶草”：（我的四叶草的翻版）

我想使用一个生成div的Java/Ajax脚本来实现这一点，然后将其放在页面的任何位置。并且在页面重新加载之前，不会在放置后移动它

---

我已经尝试了很多谷歌搜索，到目前为止我发现的最接近的东西是，来自。但是，删除.fadein、.delay和.fadeout使脚本无法完全工作。我绝对不是Ajax的专家。我想做的是可能的吗？

在javascript中，您可以使用

var randomNumber=Math.random（）生成一个介于0和1之间的随机数

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

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

这将在随机位置设置它。通过将左侧和顶部css属性设置为0到100之间的随机百分比
 如果第一个链接适合您，请不要删除fadein，因为它会显示元素。或者删除'display'：'none'，然后您可以删除您所写的所有内容。
这仍然有效。只需使用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();

函数makeDiv（）{
var divsize=（（Math.random（）*100）+50）.toFixed（）；
var color='#'+Math.round（0xffffff*Math.random（））.toString（16）；
$newdiv=$（''）.css({
“宽度”：divsize+'px'，
“高度”：divsize+'px'，
“背景色”：颜色
});
var posx=（Math.random（）*（$（document.width（）-divsize））.toFixed（）；
var posy=（Math.random（）*（$（document.height（）-divsize））.toFixed（）；
$newdiv.css({
'位置'：'绝对'，
“左”：posx+“px”，
'top'：posy+'px'，
“显示”：“无”
}).appendTo（‘body’）.fadeIn（100）；
};
makeDiv（）；
这不需要ajax，只需要jquery/javascript。当然这是可能的。我建议您发布在JSFIDLE中创建的代码，这样会更容易帮助您。生成两个随机数，将它们设置为绝对定位div的上边缘和左边缘。@Th0rndike-这是一个解脱！Java对我来说更容易理解！关于如何编写这样的代码有什么想法吗？=）@ScottS-我可以用PHP轻松做到这一点，但我如何确保我对所有屏幕分辨率使用的是有效的数字？请参见下面的Robert的回答-他使用百分比，而不是像素。不过我还有最后一个问题（可能是个愚蠢的问题），…我应该在哪里添加带有链接的标记（这样它就不仅仅是一个随机框，而是一个交互式的三叶草图像）？只需在函数中添加：$newdiv.html（“”）