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

分类:Javascript| 发布:佚名| 查看: | 发表时间:2014/2/7

查看示例:http://camnpr.com/TuiJianTools/jsdemo/color.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" />
显示筛选出来的216种颜色的节点 <div id="color"></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="按钮选取颜色" id="myhand" /> <span id="spanhand">其他标签选取颜色</span>
<input type="button" value="#FFFFFF" id="showColor" />
<div id="color"></div>

CSS源码:

#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;}

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);
  }
};

查看示例:http://camnpr.com/TuiJianTools/jsdemo/color.html

365据说看到好文章不转的人,服务器容易宕机
原创文章如转载,请注明:转载自郑州网建-前端开发 http://camnpr.com/
本文链接:http://camnpr.com/archives/939.html