Random jQuery Programs - Part 1
In this program we are going to make a program which creates number of random colored cards at random position or coordinates and we are going to do this through looping the divs and the using the looping logic in jquery and using math.random function.
Try out this program and the code is following :
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> </head>
<body> <button id="button">click me</button><br> <div id="container"></div>
<script> for(var i =1; i<= 300; i++){ $('#container').append($('<div/>', { id: 'box' + i, 'class' : 'block'})) } $("#button").click(function(){ for(var j=1;j<300;j++){ $("#box"+j).css({"position" : "absolute","top": 500*Math.random(), "left": 1200*Math.random(), "background-color": "rgb(" + Math.floor(256*Math.random())+ "," + + Math.floor(256*Math.random())+ "," + + Math.floor(256*Math.random())+ ")" })} });
</script>
<style> #container{ height: 550px; width: 1200px; } .block{ height: 30px; width: 30px; background-color: aqua; margin: 20 20 20 20; }</style> </body></html>
0 Comments