实现简易web安全色的js调色板实例教程

调色板是一种经典的前端功能，简易web安全色的调色板也是非常容易实现的。对于新手来说，自己动手完成一个调色板的开发，有助于加深对数组、字符串和DOM操作的理解。

如果自己不会或者觉得步骤不太清楚，可以跟本实例教程一步一步来做。先准备一些html元素，用于存放生成的颜色块和记录选择的颜色，代码如下：

  <div class="color_wrap" id="colorWrap">
    <div class="color_container"></div>
    <div class="pick_color">
      选择颜色：<span class="show_color"></span><span class="color_text"></span>
    </div>
  </div>

还需要写一些css设置好调色板的样式，可以直接复制下的面代码使用：

  .color_wrap{
    width:218px;
    margin:30px auto;
  }
  .color_wrap .color_container{
    width:216px;
    font-size:0;
    border-left:1px solid #666;
    border-bottom:1px solid #666;
  }
  .color_wrap .color_container span{
    display:inline-block;
    width:12px;
    height:12px;
    box-sizing:border-box;
    border-top:1px solid #666;
    border-right:1px solid #666;
    cursor:pointer;
  }
  .color_wrap .pick_color{
    height:20px;
    line-height:20px;
    padding:5px 0 5px 10px;
    font-size:12px;
    background:#ccc;
  }
  .color_wrap .pick_color span{
    display:inline-block;
    height:18px;
    vertical-align:top;
  }
  .color_wrap .show_color{
    width:30px;
    background:#fff;
    border:1px solid #333;
  }
  .color_wrap .color_text{
    width:80px;
    margin-left:10px;
    background:#fff;
    border:1px solid #aaa;
  }

第一步：获取相关html元素，用于存放和显示调色板，代码如下：

  //获取包裹元素
  var eWrap = document.getElementById('colorWrap');
  //获取颜色块容器元素
  var eContainer = document.getElementsByClassName('color_container')[0];
  //获取显示选中颜色的元素
  var eShowColor = eWrap.getElementsByClassName('show_color')[0];
  //获取存放16进制rgb颜色文本的元素
  var eColorText = eWrap.getElementsByClassName('color_text')[0];

然后还需要了解一下web安全色的组合规则，web安全色是由00、33、66、99、CC和FF这些16进制值组成的RGB颜色的组合结果。

第二步：声明一个数组，存放安全色这6个16进制值，还需要声明相关变量。

  //先声明安全色这些16进制值
  var aColorBase = ['00','33','66','99','CC','FF'];
  //获取安全色数组长度
  var nLen = aColorBase.length;
  //声明组合html代码字符串的变量
  var sHTML = '';

刚才说web安全色是由6种RGB颜色的组合，那么输出结果包括6种红色调、6种绿色调、6种蓝色调。666就可以得出出了216种特定的颜色。

第三步：嵌套循环三次aColorBase基准颜色数组，并在循环中组合成html代码，如下所示：

  // 嵌套三次循环，组合6*6*6次16进制颜色码
  for(let i=0;i<nLen;i++){
    for(let j=0;j<nLen;j++){
      for(let n=0;n<nLen;n++){
        //在最内层循环组合成rgb颜色，正好组成216种安全色
        let sColor = '#' + aColorBase[i] + aColorBase[j] + aColorBase[n];
        //生成颜色块
        sHTML = sHTML + '<span style="background:'+sColor+'" data-color="'+sColor+'"></span>';
      }
    }
  }
  //颜色块放到eContainer中
  eContainer.innerHTML = sHTML;

第四步：在生成的颜色块上绑定click事件
把点击事件委托到eContainer上，使用事件委托的好处就在于不需要每个颜色块去添加事件

  eContainer.addEventListener('click',function(event){
    //获取鼠标点击的元素
    var eTarget = event.target;
    //判断是否有date-color属性，因为只有生成的色块才有此属性
    if(eTarget.dataset.color){
      //修改选中的颜色
      eShowColor.style.background = eTarget.dataset.color;
      //修改选中颜色的16进制rgb颜色码
      eColorText.innerHTML = eTarget.dataset.color;
    }
  });

自己动手，丰衣足食。只有一步一步地去做，才能更好的理解功能是怎么实现的。建议读者最好是自己手写代码，不要全部复制使用，效果会更好。