git_playground/math.random.html at master · Mrshcom/git_playground · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Math Random</title>
	<style type="text/css">
		body{
			background-color:#ddd;
			transition:all 1s;
			-webkit-transition:all 1s;
			-moz-transition:all 1s;
			-o-transition:all 1s;
		}

		div.div-rnd{
			position:absolute;
			top:0;
			left:0;
			width:30px;
			height:10px;
			border-radius:5px;
			transition:all 1s;
			-webkit-transition:all 1s;
			-moz-transition:all 1s;
			-o-transition:all 1s;
		}
	</style>
</head>

<body>
	<script type="text/javascript">

		for(var i=0 ; i<100 ; i++){
			document.write('<div class="div-rnd"></div>');
		}

		function num_rnd(a,b){
			var num = Math.floor(Math.random()*(b-a+1)+a);
			return num;
		}

		function color_rnd(){
			var c='#';
			for(var i=0 ; i<6 ; i++){
				c += num_rnd(0,15).toString(16);
			}
			return c;
		}

		var divs= document.getElementsByClassName('div-rnd');
		function auto_motion(){

			for(var i=0 ; i<divs.length ; i++){
				divs.item(i).style.width = num_rnd(6,30) + 'px';
				divs.item(i).style.height = num_rnd(3,20) + 'px';
				divs.item(i).style.top = num_rnd(5,95) + '%';
				divs.item(i).style.left = num_rnd(5,95) + '%';
				divs.item(i).style.backgroundColor = color_rnd();
				document.body.style.backgroundColor = color_rnd();
			}
		}
		auto_motion();
		setInterval(auto_motion,800);


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