本教程的目的是为了帮助初学者更好的掌握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(){
}
接下来完成函数内具体代码。分析一下功能,设定三个区域的开发顺序:色系区域 > 拾色区域 > 显示颜色区域。
- 生成色系区域的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 | ↓ |
绿>青 |