How to use Math random() distribution three div?

**youlichika** · Nov 12, 2010 15:48

I have 3 divs. I want distribution them random (when refresh the windows, three divs' position will be changed)
I think Math random() can solve this problem, but how to do that? Thanks.

HTML Code:

<div id="div1">...</div>
<div id="div2">...</div>
<div id="div3">...</div>
<script>
Math.floor(Math.random()*3)+1;
...
</script>

**paul_wilkins** · Nov 12, 2010 16:02

I remember doing this exercise as an assignment during a course that I was taking.

All the best with your studies.

**youlichika** · Nov 12, 2010 16:07

Hi ,are u still study this?
shack hands

**paul_wilkins** · Nov 12, 2010 18:14

Originally Posted by youlichika

Hi ,are u still study this?
shack hands

No, that was as a part of a Web Design & Programming course from around 5 years ago.

The purpose of the exercise is to help you learn how to use loops and some of the scripting methods.

You'll find though that it's much harder for you to learn when you have the answers just given to you.

A little bit of work spent actually learning about this stuff, does pay off in the end.

**Kalon** · Nov 12, 2010 18:31

Originally Posted by youlichika

I have 3 divs. I want distribution them random (when refresh the windows, three divs' position will be changed)
I think Math random() can solve this problem, but how to do that? Thanks.

something similar to this:

1) for each div generate a random integer between the min and max x position you want the div in

2) for each div generate a random integer between the min and max y position you want the div in

3) on page load, use javascript to set the appropriate style properties of each div to their values in 1) and 2) to position the divs

I can't help much more without actually writing some code.

But of you post the code you have so far we can try to help you debug it if you get stuck.

**youlichika** · Nov 13, 2010 02:11

Hi, thanks ,I find the demo.

Code:

<script type="text/javascript">
var order = [1, 2, 3]  // declare as global, and this is the div number
var out = ""  // output to html
var rand      // random number variable to be used in the loop
while (order.length>0) {
  rand = getRandom()
  out += "<div id=\"div"+rand+"\">Displaying Div "+rand+"</div>"
}
document.write(out)

function getRandom() {
  var res = null
  if (order.length==0) { res = null }  // no random, shouldn't be called in this example
  else if (order.length==1) {  // last one left, just return the value inside it
    res = order[0]
    order.pop()
  }
  else {  // get a random element from the array
    var orderLen = order.length
    var rand = Math.floor(Math.random()*orderLen)
    // swap the selected random one with the last element,
    // then get rid of the element
    res = order[rand]
    order[rand] = order[orderLen-1]
    order[orderLen-1] = res
    order.pop()
    // you could check whether the random is the last element and don't need to do swapping,
    // but it would not speed up that much anyway.
  }

  return res  // return the random
}
</script>

**Kalon** · Nov 13, 2010 02:42

that might be what you want but it's not what you asked for.

you asked for a random distribution not a random ordering of display

**youlichika** · Nov 13, 2010 03:03

em... you are right, for my careless, this is not use Math random(), it just random the div orders. maybe I shall still looking for the correct one.

**Kalon** · Nov 13, 2010 03:21

the demo code you posted does use Math.random but to just randomly order the divs.

when you said distribution in your original post I thought you meant you wanted to randomly position the divs in terms of their positions from the top and left margins of the browser window.

it wasn't clear what you meant by distribution.

**Logic Ali** · Nov 13, 2010 10:33

Originally Posted by youlichika

em... you are right, for my careless, this is not use Math random(), it just random the div orders. maybe I shall still looking for the correct one.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Randomise position of specified existing elements of a common parent</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" >
<style type='text/css'>

div{border:solid #f00 1px; width:30%}

</style>
</head>
<body>
 <div id="div1">FIRST</div>
 <div id="div2">SECOND</div>
 <div id="div3">THIRD</div>
 
<script type='text/javascript'>

function orderElems()
{
 var elems = [], tempElem, pn, args = orderElems.arguments;
 
 for( var i = 0, len = args.length; i < len; i++ )
  ( pn = ( elems[ i ] = tempElem = document.getElementById( args[ i ] ) ).parentNode).removeChild( tempElem );
  
 for( var i = len - 1, idx, tmp; i > -1; i-- )
 { 
  while( ( idx = Math.floor( Math.random() * len ) ) == i )
  ;
  tmp = elems[ i ];
  elems[ i ] = elems[ idx ];
  elems[ idx ] = tmp;
 } 
 
 for( var i = 0; i < len; i++ )
  pn.appendChild( elems[ i ] );
}

orderElems( 'div1', 'div2', 'div3' );

</script>
</body>
</html>

User Tag List

Thread: How to use Math random() distribution three div?

Thread Tools

Display

How to use Math random() distribution three div?

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions