Day21-30/code/demo02/homework03.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#container {
				width: 800px;
				height: 400px;
				border: 1px solid black;
				margin: 0 auto;
			}
			#panel {
				width: 800px;
				margin: 10px auto;
				text-align: center;
			}
			.piece {
				width: 80px;
				height: 80px;
				float: left;
			}
		</style>
	</head>
	<body>
		<div id="container"></div>
		<div id="panel">
			<button id="addBtn">添加</button>
			<button id="flaBtn">闪烁</button>
		</div>
		<script src="js/mylib.js"></script>
		<script>
			function randomColor() {
				var r = parseInt(Math.random() * 256);
				var g = parseInt(Math.random() * 256);
				var b = parseInt(Math.random() * 256);
				return 'rgb(' + r + ',' + g + ',' + b +')'; 
			}
			
			(function() {
				var counter = 0;
				bind($('addBtn'), 'click', function() {
					if (counter < 50) {
						counter += 1;
						var div = document.createElement('div');
						div.className = 'piece';
						div.style.backgroundColor = randomColor();
						$('container').appendChild(div);
					}
				});
				var timer = 0;
				bind($('flaBtn'), 'click', function() {
					if (!timer) {
						timer = setInterval(function() {
							var allPieces = $('container').children;
							for (var i = 0; i < allPieces.length; i += 1) {
								allPieces[i].style.backgroundColor = randomColor();
							}
						}, 200);
					}
				});
			}());
		</script>
	</body>
</html>