java - Randomly Position A Div - Stack Overflow

admin管理员组

文章数量:1323723

I'm looking for a way to randomly position a div anywhere on a page (ONCE per load).

I'm currently programming a PHP-based fantasy pet simulation game. One of the unmon items on the game is a "Four Leaf Clover." Currently, users gain "Four Leaf Clovers" through random distribution - but I would like to change that (it's not interactive enough!).

What I Am Trying To Do:

The idea is to make users search for these "Four Leaf Clovers" by randomly placing this image anywhere on the page: (my rendition of a four leaf clover)

I'd like to do this using a Java/Ajax script that generates a div, and then places it anywhere on the page. And does not move it once it's been placed, until the page is reloaded.

I've tried so many Google searches, and the closest thing that I've found so far is this (click), from this question. But, removing the .fadein, .delay, and .fadeout stopped the script from working entirely. I'm not by any means a pro with Ajax. Is what I'm trying to do even possible?

I'm looking for a way to randomly position a div anywhere on a page (ONCE per load).

I'm currently programming a PHP-based fantasy pet simulation game. One of the unmon items on the game is a "Four Leaf Clover." Currently, users gain "Four Leaf Clovers" through random distribution - but I would like to change that (it's not interactive enough!).

What I Am Trying To Do:

The idea is to make users search for these "Four Leaf Clovers" by randomly placing this image anywhere on the page: (my rendition of a four leaf clover)

I'd like to do this using a Java/Ajax script that generates a div, and then places it anywhere on the page. And does not move it once it's been placed, until the page is reloaded.

I've tried so many Google searches, and the closest thing that I've found so far is this (click), from this question. But, removing the .fadein, .delay, and .fadeout stopped the script from working entirely. I'm not by any means a pro with Ajax. Is what I'm trying to do even possible?

• java
• php
• javascript
• jquery
• ajax

Share Improve this question Follow edited May 23, 2017 at 12:01 CommunityBot 111 silver badge asked Jul 3, 2012 at 9:08 ConnieConnie 7733 silver badges88 bronze badges 5

• you don't need ajax for this, only jquery/javascript. And of course it's possible. I suggest that you post the code YOU created in a jsFiddle, so it would be easier to help you out. – Th0rndike Commented Jul 3, 2012 at 9:11
• Generate two random numbers, set these for the top and left edges of your absolutely positioned div. – Scott Stevens Commented Jul 3, 2012 at 9:13
• @Th0rndike - That's a relief! Java is so much easier for me to understand! Any ideas on how to code something like this? =) – Connie Commented Jul 3, 2012 at 9:13
• @ScottS - I could do that easily with PHP, but how would I ensure that I am using valid numbers for all screen resolutions? – Connie Commented Jul 3, 2012 at 9:15
• See Robert's answer below - he uses percentages, instead of pixels. – Scott Stevens Commented Jul 3, 2012 at 9:16

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 6

In javascript you can generate a a random number between 0 and 1 using var randomNumber = Math.random();

If you give your div absolute positioning, you can then do

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

this will set it in a random location. By setting the left and top css properties to a random percentage between 0 and 100.

This still works. simply use makeDiv() to create new one.

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

It the first link suits you, do not remove fadein it shows up the element. Or remove 'display':'none' and then you can remove all you wrote.

本文标签： javaRandomly Position A DivStack Overflow