JS 216网页安全色调色板 DW 风格

利用JS做的一个网页安全色调色板 希望大家用得上!

 1<html>
 2<head>
 3<meta content="text/html; charset=utf-8" http-equiv="Content-Type"/>
 4<title>DW调色板</title>
 5<script>   
 6var ColorHex=new Array('00','33','66','99','CC','FF')   
 7var SpColorHex=new Array('FF0000','00FF00','0000FF','FFFF00','00FFFF','FF00FF')   
 8var current=null 
 9
10function intocolor()   
11{   
12var colorTable=''   
13for (i=0;i<2;i++)   
14{   
15for (j=0;j<6;j++)   
16{   
17colorTable=colorTable+'<tr height=12>'   
18colorTable=colorTable+'<td width=11 style="background-color:#000000">'   
19  
20if (i==0){   
21colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[j]+ColorHex[j]+ColorHex[j]+'">'}   
22else{   
23colorTable=colorTable+'<td width=11 style="background-color:#'+SpColorHex[j]+'">'} 
24
25  
26colorTable=colorTable+'<td width=11 style="background-color:#000000">'   
27for (k=0;k<3;k++)   
28{   
29for (l=0;l<6;l++)   
30{   
31colorTable=colorTable+'<td width=11 style="background-color:#'+ColorHex[k+i*3]+ColorHex[l]+ColorHex[j]+'">'   
32}   
33}   
34}   
35}   
36colorTable='<table width=253 border="0" cellspacing="0" cellpadding="0" style="border:1px #000000 solid;border-bottom:none;border-collapse: collapse" bordercolor="000000">'   
37+'<tr height=30><td colspan=21 bgcolor=#cccccc>'   
38+'<table cellpadding="0" cellspacing="1" border="0" style="border-collapse: collapse">'   
39+'<tr><td width="3"><td><input type="text" name="DisColor" size="6" disabled style="border:solid 1px #000000;background-color:#ffff00"></td>'   
40+'<td width="3"><td><input type="text" name="HexColor" size="7" style="border:inset 1px;font-family:Arial;" value="#000000"></td></tr></table></td></table>'   
41+'<table border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" bordercolor="000000" onmouseover="doOver()" onmouseout="doOut()" onclick="doclick()" style="cursor:hand;">'   
42+colorTable+'</table>';   
43colorpanel.innerHTML=colorTable   
44} 
45
46function doOver() {   
47if ((event.srcElement.tagName=="TD") && (current!=event.srcElement)) {   
48if (current!=null){current.style.backgroundColor = current._background}   
49event.srcElement._background = event.srcElement.style.backgroundColor   
50DisColor.style.backgroundColor = event.srcElement.style.backgroundColor   
51HexColor.value = event.srcElement.style.backgroundColor   
52event.srcElement.style.backgroundColor = "white"   
53current = event.srcElement   
54}   
55} 
56
57function doOut() { 
58
59if (current!=null) current.style.backgroundColor = current._background   
60} 
61
62function doclick(){   
63if (event.srcElement.tagName=="TD"){   
64alert("选取颜色: "+event.srcElement._background)   
65return event.srcElement._background   
66}   
67}   
68</script>
69</head>
70<body onload="intocolor()">
71<div id="colorpanel" style="position: absolute;">
72</div>
73</body>
74</html>
Published At
Categories with 网页设计
Tagged with
comments powered by Disqus