全新：js实现Dreamweaver中颜色选择器的功能，如果你曾经为此烦恼，来看看吧！
///////////////////////////////////////////////////////////////////////////////////////////////
///////////////////////////////////////////////////////////////////////////////////////////////
不要问我为什么会想到去写这样一个东西，道理其实很简单，我拿出来的东西，基本上都是在我的“精灵部落”中有需求的，我必须实现这样的一些功能。这个颜色选择器被用在用户更改桌面设置的时候，可以用来修改桌面图标的字体颜色和桌面背景颜色。不排除未来其它需要颜色设置的时候也还会用上。我也想过要走“捷径”去网上搜一下有没有现成的类似的代码，可以每次结果都让我很失望，有一些代码，但感觉质量都不能符合我的要求，最起码都兼容不了firefox。看样子注定大多数工作还得靠自己来完成。我没有花时间去自己设计一个全新的颜色选择器，没有那么多时间，感觉Dreamweaver中的颜色选择器还算是可以的，就直接拿它当原型，用js实现了。
颜色选择器，原理上其实不难，就是在页面上显示一序列的颜色，然后鼠标点击某个颜色区域的时候，返回一个颜色值给调用程序或者对象了。需要花的心思的，倒是如何显示这一序列颜色的问题。有心人仔细研究一下Dreamweaver的颜色选择器不难发现，它的颜色显示是有规律可循的：拿它的立方色盘来说，主要的色盘区域可以明显看出分为6个小区域，每个区域有6*6个小色块。再以其中第一个区域为例，x方向查看其颜色值：000000，003300，006600，009900，00cc00，0ff00，可以发现，每一行的颜色值中都只有中间两位按规律变化。再看y方向颜色值：000000，000033，000066，000099，0000cc，0000ff，每一列的颜色值中都之后最后两位按规律变化。这就是规律，其他几种色盘也可以用类似的方式去发现它的生成规律，这里就不重复说了。
知道了规律，要生成这个色盘就不难了。我们以td为单元格做色块， 下面的代码则是按照上面我们发现的规律来生成这个色盘了：
2 {
3 for(var i=0;i<ColorsPreCloum;i++)
4 {
5 ColorHTML+=" <tr>";
6 for(var j=0;j<ColorsPreRow;j++)
7 {
8 var hR=0; //前两位颜色值，这里先用10进制表示起值，便于计算，后面再将其转换为16进制。
9 var hG=0; //中间两位颜色值
10 var hB=0; //后两位颜色值
11 var Temp=Math.floor(i/Degree)*3+(Math.floor(j/Degree)+Math.floor(i/Degree)*2)*3;
13 Temp=j%Degree*3;
14 hG=Temp*16+Temp; //计算机中间两位的值
15 Temp=i%Degree*3;
16 hB=Temp*16+Temp; //计算后两位的值
17 var CnLeiColor=new MyColor(hR,hG,hB);
18 var ColorValue=CnLeiColor.hexValue();//转换为16进制19 ColorHTML+="<td style=\"background-color:"+ColorValue+"; height:15px; width:15px; font-size:5px;border:1px solid #000000\" \
20 onmouseover=\"BlueColorSelecter.ShowColor(this)\"\
21 onclick=\"BlueColorSelecter.SelectColor(this)\"\
22 ></td>" //生成单元格html代码
23 }
24 ColorHTML+=" </tr>";
25 }
26 ColorHTML+=" </tr></table>";
27 ColorArea.innerHTML=ColorHTML; //显示生成的html，也就是色盘效果
28 }
其他还有两个色盘，一个连续色调的，一个是灰度级别的，道理都跟上面这个是类似的，就不重复了。
其他需要讲一下的，大概就是整个颜色选择器是如何工作的了。其实道理也简单，js里面写好这个空间构成必须的html代码，我这里是用表格布局的，然后当事件激发需要显示这个选择器的时候，显示这个html就ok了。如果你对js是有一些了解的话，我想肯定是一点就通的，甚至我这“一点”也是多余的哦，呵呵！对源代码感兴趣的朋友可以直接右键查看本文章源代码，相信你能找到的。也可以点这里直接下载，对哦，在页面上的定位好象有点问题，有兴趣的话可以去修复一下，因为在我自己的应用中不会产生这个定位不准确的问题，加上比较忙，就没有去管它。还有其他什么问题也欢迎大家交流！
上次的一篇模拟google首页图标动画的文章，引发了一些不愉快，这是我非常不愿意见到的。为此我在这里先声明一下，发表这些文章基本上都是出于跟大家交流心得的目的，我没有必要去别的什么地方抄袭一个文章来哗众取宠，我敢说抄袭最终肯定是要自取其辱的，这样的事情我绝对不会干。当然我也不排斥别人持有怀疑的态度，但是请这些抱怀疑态度的人在这里发表关于什么抄袭之类的评论的时候，先擦亮眼睛看一看，对比一下源代码，你真的找到了所谓抄袭的证据么？否则，我还是希望抄袭之类伤害作者感情的话还是慎重点说为好。如果你有心去研究对比一下，相信最终还是会发现，应该是我这个全新的更完美。
作者：ublue.liao 联系我：QQ:70buluo@163.com/1047166052 网址：http://www.70buluo.com(精灵部落) 电子邮件：70buluo@163.com/admin@70buluo.com
