( Jquery ) 아주아주 심플한 칼라 렌덤 팔레트

아.... 이건... 정말... 제가 심플하게... 만든거에요...

그냥...저냥...정말 심플하면서....급하게...

....

.......다음엔 퀄리티 높게 할께요 ㅠㅠ

1. 완성본

2. 소스부분

  1. CSS 부분

 
	<style>
		html, body {
			margin: 0;
		}

		.ColorPikerBody {
			width: 350px;
			height: 176px;
			border: 1px;
			border-style: dotted;
		}

		.ColorPik {
			margin: auto;
			width: 350px;
		}

		.ColorPik div {
			width: 35px;
			height: 35px;
			line-height: 35px;
			float: left;
			cursor: pointer;
		}

		.ColorView {
			width: 19px;
			height: 19px;
			float: left;
			margin-right: 10px;
			border: 1px;
			border-style: dotted;
		}
	</style>

  2. javascript 부분

	<!-- jquery 파일은 다운받아서 쓰세용 -->
	<script src='http://xline.dothome.co.kr/_Js/JQuery/jquery-2.2.2.js'></script>
	<script>
		function colorPickUp() {
			if($('.ColorPikerBody').css("display") == "none"){
				$('.ColorPikerBody').css("display", "block");
				$('.ColorPik')[0].innerHTML = "";
				for(var i=0; i< 5; i++){
					for(var j=0; j<10; j++){
						var InColorPick = Math.random().toString(16).replace(/.*(\w{6})/, '#$1');
						$('.ColorPik')[0].innerHTML += "<div class='cPick_1' coloTump='"+InColorPick+"' style='background-color: "+InColorPick+";''></div>";
					}
				}
				$('[class^="cPick_"]').hover(
					function(){
						$('.ColorView').css("background-color", $(this).attr("coloTump"));
						$('#inputColor').val($(this).attr("coloTump"));
					}
				);
				$('[class^="cPick_"]').click(function(){
					$('.ColorPikerBody').css("display", "none");
					$('#inputColor').val($(this).attr("coloTump"));
				});
			}else{
				$('.ColorPikerBody').css("display", "none");
			}
		}
	</script>

  3. html 부분

<input type='text' id='inputColor' name='inputColor' size='7' onclick='colorPickUp(); return false;' value='Click'/><div class='ColorView'></div>
<div class="ColorPikerBody" style="display:none">
	<div class='ColorPik'></div>
</div>