本颜色选择器进筛选出了216种WEB安全色，简单实用、方便快捷。
查看示例：http://www.imf7.com/code/getColor.html
js引用：将下面的JS源码存入您的JS文件或者网页的<head><script>JS代码</script></head>标签中
HTML要求：页面的HTML代码中必须包含三个元素，即：触发手柄、显示选中颜色的节点、显示筛选出来的216种颜色的节点
例：
触发手柄 <input type="button" value="按钮选取颜色" id="myhand" />
显示选中颜色的节点 <input type="button" value="#FFFFFF" id="showColor" style="width:120px; background:#fff; border:1px solid #ccc; height:22px;" />
显示筛选出来的216种颜色的节点 <div id="color" style="display:none;"></div>
CSS要求：
然后再将CSS源码放在头部的<head>标签中
引用：满足JS、HTML、CSS的要求后就只剩下引用来让效果生效了
window.onload = function(){
var Fcolor = new getColor(F$("myhand"), F$("showColor"), F$("color"), "click");
Fcolor.init();
};
引用解说：
将这段JS与前面说过的JS源码引用之后就可以。
onload函数是起待页面加载完成后执行
getColor()该函数就是取色效果的核心函数，其接受4个参数，依次是：触发手柄节点、显示选中颜色的节点、显示筛选出来的216种颜色的节点、鼠标触发方式『click表示点击弹出颜色选择框』
F$()该函数相当于document.getElementById(); 只是一个辅助函数
以上解释在演示的源码中都可以看明白。
HTML源码：
<input type="button" value="#FFFFFF" id="showColor" style="width:120px; background:#fff; border:1px solid #ccc; height:22px;" />
<div id="color" style="display:none;"></div>
CSS源码：
#color ul{ width:78px; float:left; display:inline; background:#fff; overflow:hidden;}
#color li{ float:left; display:inline; width:12px; height:12px; margin:1px 0 0 1px; background:#808080;}
#color li a{ display:block; margin:1px 0 0 1px; width:11px; height:11px; overflow:hidden;}
JS源码：
function F$(element){
return typeof(element)=="object" ? element : document.getElementById(element);
};
// 事件加载器
function addEvent(elem,type,fn){if(elem.nodeName==="A"&&type==="click"){F7(elem).attr("href","javascript:void(0)")};if(elem.addEventListener){elem.addEventListener(type,fn,false);return true;}else if(elem.attachEvent){elem['e'+type+fn]=fn;elem[type+fn]=function(){elem['e'+type+fn](window.event);}
elem.attachEvent("on"+type,elem[type+fn]);return true;}
return false;};
// 主体函数
var getColor = function(hand, input, elem, mouse){
// 缺点：目前不支持点击空白地方关闭
this.hand = hand;// 触发按钮
this.input = input;// 接受选中颜色的表单
this.elem = elem;// 色块放置的容器，最佳标签为DIV
this.mouse = mouse;// 鼠标触发动作
this.flag = 0;// 记录是否已经打开颜色模块
this.h = [];
this.h[0] = "FF";
this.h[1] = "CC";
this.h[2] = "99";
this.h[3] = "66";
this.h[4] = "33";
this.h[5] = "00";
};
getColor.prototype = {
init: function(){// 执行
var that = this;
addEvent(this.hand, this.mouse, function(){
if(that.flag == 0){
that.show();
that.getRank();
//that.hand.onblur = function(){ that.hide() };// 手柄失去焦点后关闭 – 此功能失败
//that.hand.onblur = function(){ setTimeout(function(){that.hide()}, 100) };// 手柄失去焦点后关闭
}else{
that.hide();
};
});
},
show: function(){
this.elem.style.display = "block";
this.elem.innerHTML = "";// 先清空内容；
this.flag = 1;
},
hide: function(){
this.elem.style.display = "none";
this.flag = 0;
},
getRank: function(){// 组合出216种不同的颜色参数
for(var r=0; r<6; r++){
var _ul = document.createElement("ul");
for(var g=0; g<6; g++){
for(var b=0; b<6; b++){
this.getCube(this.h[r], this.h[g], this.h[b], _ul);
};
};
this.elem.appendChild(_ul);
};
},
getCube: function(R, G, B, _ul){// 创建颜色小方块
var _li = document.createElement("li");
var _a = document.createElement("a");
_a.style.background = "#"+ R + G + B;
_li.title = "#"+ R + G + B;
_li.appendChild(_a);
_ul.appendChild(_li);
var that = this;
addEvent(_li, "click", function(){ that.action(R + G + B) });
},
action:function(RGB){//点击颜色后的执行
this.hide();
this.input.value = "#"+RGB;
this.input.style.background = "#"+RGB;
alert(‘您选择的颜色是:’+RGB);
}
};
效果很不错，以后能用上