原生js制作简易DOM拾色器实例教程

本教程的目的是为了帮助初学者更好的掌握DOM和数组相关操作，实例效果如下图所示。

可以看到实例中的拾色器分为三个部分：拾色区域、色系区域、显示颜色区域。先写出这三个部分的html代码，如下所示：

  <div class="color_container">
    <div class="main_wrap"> <!--拾色区域-->
      <div class="main_drag" id="mainDrag"></div>
      <div class="main_con" id="mainCon"></div>
    </div>
    <div class="side_wrap"> <!--色系区域-->
      <div class="side_drag" id="sideDrag"></div>
      <div class="side_con" id="sideCon"></div>
    </div>
    <div class="show_color" id="findColor"><!--显示区域-->
      <div class="color_full" id="colorFull"></div>
      <div class="color_text" id="colorText">
        R:<input type="text">
        G:<input type="text">
        B:<input type="text">
      </div>
    </div>
  </div>

读者可以自己编写样式，也可以从 《原生js制作简易DOM拾色器实例教程》源码 下载本教程关联实例中复制。

开始编写javascript代码，声明一个fnColorPicker函数，把拾色器功能封装起来。

	function fnColorPicker(){
   
	
	}

接下来完成函数内具体代码。分析一下功能，设定三个区域的开发顺序：色系区域 > 拾色区域 > 显示颜色区域。

1. 生成色系区域的DOM

色系区域实际上是不同色系色块组成（DOM元素），所以现在要做的工作就是使用js生成色块。生成色块有两个条件，一是有多少个色块，二是每个色块的rgb值分别是多少。知道这两个条件就可以很轻松拼成区域内的DOM元素。

每个色块的高度为1，宽度和色系区域一致，需要根据色系区域的高度计算出需要多少个色块，也就是共有多少种颜色。

1.1 获取色系区域及高度，如下所示：

//获取色系区域
var eSideCon = document.getElementById('sideCon');
//获取色系区域的高度
var nSideH = eSideCon.offsetHeight;

色系区域的高度nSideH实际上就是色块的数量，给每一个色块添加正确的背景颜色就可达到效果。分析一下色系区域的颜色变化是：红>黄>绿>青>蓝>紫>红，共七种颜色从上至下的渐变就形成了色系区域。在下表中列出了颜色每次变化的rgb值及修改规则：

颜色渐变	rgb颜色数组变化	修改的rgb值	在数组中的下标	修改方向
红>黄	[255,0,0] → [255,255,0]	g	1	↑
黄>绿	[255,255,0] → [0,255,0]	r	0	↓
绿>青