How to use Math random() distribution three div?

JavaScript
1

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.


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

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

All the best with your studies.

3

Hi ,are u still study this?
shack hands

4

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.

5

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.

6

Hi, thanks ,I find the demo.


<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>
7

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

8

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.

9

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.

10 
<!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>