随机放置一个div答案

【问题标题】：Randomly Position A Div随机放置一个div
【发布时间】：2012-07-03 16:45:33
【问题描述】：

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

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

我要做什么：

这个想法是让用户通过将这张图片随机放置在页面上的任何位置来搜索这些“四叶草”：（我对四叶草的演绎）

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

我已经尝试了很多 Google 搜索，到目前为止我找到的最接近的是 this (click)，来自 this question。但是，删除 .fadein、.delay 和 .fadeout 会使脚本完全停止工作。我绝不是 Ajax 的专业人士。我正在尝试做的事情是否可能？

【问题讨论】：

你不需要 ajax，只需要 jquery/javascript。当然这是可能的。我建议您将您创建的代码发布在 jsFiddle 中，这样会更容易帮助您。
生成两个随机数，将它们设置为绝对定位的 div 的上边缘和左边缘。
@Th0rndike - 这是一种解脱！ Java对我来说更容易理解！关于如何编写这样的代码的任何想法？ =)
@ScottS - 我可以使用 PHP 轻松做到这一点，但我如何确保对所有屏幕分辨率都使用有效数字？
见罗伯特的回答如下 - 他使用百分比，而不是像素。

标签： java php javascript jquery ajax

【解决方案1】：

在 javascript 中，您可以使用 var randomNumber = Math.random(); 生成一个介于 0 和 1 之间的随机数

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

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

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

【讨论】：

【解决方案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();

【讨论】：

我确实有最后一个问题（它可能是一个愚蠢的问题），......我将在哪里添加带有链接的标签（这样它不仅仅是一个随机框 -而是交互式三叶草图像）？
只需在函数中添加：$newdiv.html('')

【解决方案3】：

如果第一个链接适合你，不要删除淡入淡出它会显示元素。或者删除 'display':'none' 然后你就可以删除所有你写的了。

【讨论】：