简易调色板

最新推荐文章于 2024-09-30 18:55:14 发布

firseve

最新推荐文章于 2024-09-30 18:55:14 发布

阅读量129

点赞数

分类专栏： JavaScript 文章标签：调色板 javascript ViewUI

JavaScript 专栏收录该内容

10 篇文章 0 订阅

订阅专栏


<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>