简易调色板
简易调色板Html代码1.<html>
2.<head>
3.<meta http-equiv="Content-Type" content="text/html; charset=gbk">
4.<title>调色板</title>
5.<style>
6.*{margin:0px;padding:0px;}
7..color_table{width:229;border:border:1px solid #000000; cellspacing:0;cellpadding:0;border-bottom:none;border-collapse:collapse;}
8..color_table tr{height:30px;}
9..color_table td{background-color:#000000;}
10..color_block{border:1px solid black;border-collapse: collapse}
11..color_block td{border:1px solid black;cursor:pointer;}
12..showinput{border:1px solid #000000;background-color:#ffff00;}
13.</style>
14.<script>
15.function initcolor(){
16. var ColorHex=new Array('00','33','66','99','CC','FF')
17. var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')
18. var colorTable=''
19. for (i=0;i<2;i++){
20. for (j=0;j<SpColorHex.length;j++){
21. colorTablecolorTable=colorTable+'<tr height=12>'
22. if (i==0){
23. colorTablecolorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex+ColorHex+ColorHex+'">'
24. }else{
25. colorTablecolorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex+'">'
26. }
27.
28. for (k=0;k<3;k++){
29. for (l=0;l<6;l++){
30. colorTablecolorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex+ColorHex+ColorHex+'">'
31. }
32. }
33. }
34. }
35. colorTable='<table class="color_table">'
36. +'<tr><td colspan=19 bgcolor=#eee>'
37. +'<div><input type="text" id="showcolor" size="20" disabled class="showinput"></div>'
38. +'</td></tr></table>'
39. +'<table id="colortab" class="color_block" cellspacing="0" cellpadding="0">'+colorTable+'</table>';
40. document.getElementById("colorpanel").innerHTML=colorTable;
41.
42. var x = document.getElementById("colortab").getElementsByTagName("TD");
43. var col = document.getElementById("showcolor");
44. for(var i=0;i<x.length;i++){
45. x.onmouseover=function(){
46. colcol.value = col.style.backgroundColor = this._bc = this.style.backgroundColor;
47. this.style.backgroundColor = "white";
48. }
49. x.onmouseout=function(){
50. thisthis.style.backgroundColor = this._bc;
51. }
52. x.onclick=function(){alert(this._bc)}//alert the color
53. }
54.
55.}
56.
57.
58.</script>
59.</head>
60.
61.<body onload="initcolor()">
62.<div id="colorpanel" style="margin:30px;"></div>
63.</body>
64.</html> 谢谢分享
页:
[1]