原生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
绿>青
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值