【JS颜色选择器】216种web安全色选择器

<input type="button" value="按钮选取颜色" id="myhand" /> <span id="spanhand">其他标签选取颜色</span>
<input type="button" value="#FFFFFF" id="showColor" />
<div id="color"></div>

#color{ width:235px; padding:0 0 1px 0; background:#fff; overflow:hidden; margin-bottom:30px;}
#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;}

// 辅助函数
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);
  }
};