简易调色板

happysoul

浏览: 401736 次
性别:
来自: 天津

最近访客更多访客>>

yuhua8688

gaopengv

huanchou

qq447373051

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

调色板 javascript

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<title>调色板</title>
<style>
*{margin:0px;padding:0px;}
.color_table{width:229;border:border:1px solid #000000; cellspacing:0;cellpadding:0;border-bottom:none;border-collapse:collapse;}
.color_table tr{height:30px;}
.color_table td{background-color:#000000;}
.color_block{border:1px solid black;border-collapse: collapse}
.color_block td{border:1px solid black;cursor:pointer;}
.showinput{border:1px solid #000000;background-color:#ffff00;}
</style>
<script>
function initcolor(){
	var ColorHex=new Array('00','33','66','99','CC','FF')
	var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
	var colorTable=''
	for (i=0;i<2;i++){
		for (j=0;j<SpColorHex.length;j++){
			colorTable=colorTable+'<tr height=12>'
			if (i==0){
				colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'
			}else{
				colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'
			}

			for (k=0;k<3;k++){
				for (l=0;l<6;l++){
					colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'
				}
			}
		}
	}
	colorTable='<table class="color_table">'
			+'<tr><td colspan=19 bgcolor=#eee>'
			+'<div><input type="text" id="showcolor" size="20" disabled class="showinput"></div>'
			+'</td></tr></table>'
			+'<table id="colortab" class="color_block" cellspacing="0" cellpadding="0">'+colorTable+'</table>';
	document.getElementById("colorpanel").innerHTML=colorTable;
	
	var x = document.getElementById("colortab").getElementsByTagName("TD");
	var col = document.getElementById("showcolor");
	for(var i=0;i<x.length;i++){
		x[i].onmouseover=function(){
			col.value = col.style.backgroundColor = this._bc = this.style.backgroundColor;
			this.style.backgroundColor = "white";
		}
		x[i].onmouseout=function(){
			this.style.backgroundColor = this._bc;
		}
		x[i].onclick=function(){alert(this._bc)}//alert the color
	}

}


</script>
</head>

<body onload="initcolor()">
<div id="colorpanel" style="margin:30px;"></div>
</body>
</html>