How to use Math random() distribution three div?

Discussion in 'JavaScript' started by youlichika, Nov 12, 2010.

Thread Status:
Not open for further replies.
0
  1. #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>
    HTML:
     
    youlichika, Nov 12, 2010 IP
  2. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #2
    Use absolute positioning, with random values for top and left. 
    
<html>
<head>
<style type='text/css'>
   body {
      border: 1px solid #000;
      height: 300px;
      margin: 0;
      padding: 0;
      width: 300px;
   }

   .box {
      height: 50px;
      position: absolute;
      width: 50px;
   }
	
   #div1 { background: #f00; }
   #div2 { background: #0f0; }
   #div3 { background: #00f; }
</style>
<script type='text/javascript'>
   function setDivPos() {
      for (i=1; i<=3; i++) {
         var x = Math.floor(Math.random()*250);
         var y = Math.floor(Math.random()*250);
         document.getElementById('div'+i).style.left = x + 'px';
         document.getElementById('div'+i).style.top = y + 'px';
      }
   }
</script>
</head>
<body onload='setDivPos();'>
<div id='div1' class='box'></div>
<div id='div2' class='box'></div>
<div id='div3' class='box'></div>
</body>
</html>
    Code (markup):
     
    Last edited: Nov 13, 2010
    Cash Nebula, Nov 13, 2010 IP
  3. youlichika

    youlichika Greenhorn

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #3
    Thanks Cash, this is a random effection. I am sorry, may be I did not say clearly in english. the three divs position will be change is meaning like: div1{float:left;width:100px;height:100px;left:0;top:0} div2{float:left;width:100px;height:100px;left:100px;;top:0} div3{float:left;width:100px;height:100px;left:200px;top:0}, when I refresh the page, the three divs position will be change, div1 go to div2's position, div2 go to div3's position, div3 go to div1's position...
     
    youlichika, Nov 13, 2010 IP
  4. Cash Nebula

    Cash Nebula Peon

    Messages:
    1,197
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Something like this?
    
<html>
<head>
<style type='text/css'>
#random {
   height: 100px;
   margin: 50px auto;
   position: relative;
   width: 300px;
}

.box {
   height: 100px;
   position: absolute;
   top: 0;
   width: 100px;
}

#div1 { background: #f00; }
#div2 { background: #0f0; }
#div3 { background: #00f; }
</style>
<script type='text/javascript'>
function setDivPos() {
   var box1, box2, box3;
   box1 = Math.ceil(Math.random()*3);
   do {
      box2 = Math.ceil(Math.random()*3);	
   } while (box2 == box1);
   do {
      box3 = Math.ceil(Math.random()*3);	
   } while (box3 == box1 || box3 == box2);
   document.getElementById('div'+box1).style.left = '0';
   document.getElementById('div'+box2).style.left = '100px';
   document.getElementById('div'+box3).style.left = '200px';
}
</script>
</head>
<body onload='setDivPos();'>
<div id='random'>
<div id='div1' class='box'></div>
<div id='div2' class='box'></div>
<div id='div3' class='box'></div>
</div>
</body>
</html>
    Code (markup):
     
    Cash Nebula, Nov 13, 2010 IP
  5. youlichika

    youlichika Greenhorn

    Messages:
    74
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    16
    #5
    Morning Cash, great , just that. And these days, I search from google and read many article about this. I also write one.
    
<html>
<head>
<style type='text/css'>
#random {
   height: 100px;
   margin: 50px auto;
   position: relative;
   width: 300px;
}
#div1 { width:100px;height:100px; float:left;}
#div2 { width:100px;height:100px; float:left;}
#div3 { width:100px;height:100px; float:left;}
</style>
</head>
<body>
<div id='random'>
<div id='div1' ></div>
<div id='div2' ></div>
<div id='div3' ></div>
</div>
<script>
var index = Math.floor(Math.random()*6); 
var ids = [[1,2,3],[1,3,2],[2,1,3],[2,3,1],[3,1,2],[3,2,1]][index]; 
document.getElementById('div'+ids[0]).innerHTML = 'aaa'; 
document.getElementById('div'+ids[1]).innerHTML = 'bbb';
document.getElementById('div'+ids[2]).innerHTML = 'ccc';
</script>
</body>
</html>
    Code (markup):
    But I find all the Math.random() should make a suppose first. It is hard to add one more divs. If the divs number add into 6, there should be write a long long javascript code to suppose how to distribution all the possibility of divs positions. Is it right?
     
    youlichika, Nov 14, 2010 IP
Thread Status:
Not open for further replies.