JS实现的RGB网页颜色在线取色器完整实例

下面是“JS实现的RGB网页颜色在线取色器完整实例”的详细攻略。

1. 实现思路

此取色器实现的主要流程如下：

1. 生成一个颜色面板
2. 当用户点击面板中的某个颜色区域，该区域的颜色会被选中
3. 预览区域实时展示当前选中的颜色
4. 点击确认按钮将选中的颜色返回

2. HTML 结构

首先在 HTML 文件中定义以下结构：

<div class="color-panel">
  <div class="color-item"></div>
  <!-- 包含 16 个 color-item -->
</div>
<div class="color-picker">
  <div class="preview"></div>
  <div class="controls">
    <input type="range" min="0" max="255" step="1" class="range-r">
    <input type="range" min="0" max="255" step="1" class="range-g">
    <input type="range" min="0" max="255" step="1" class="range-b">
    <input type="number" min="0" max="255" class="input-r">
    <input type="number" min="0" max="255" class="input-g">
    <input type="number" min="0" max="255" class="input-b">
  </div>
  <button class="confirm">确认</button>
</div>

其中 color-panel 为颜色面板，包含了16个 color-item 元素，每个元素的背景色代表了对应的颜色。

color-picker 为取色器页面，包含了展示和调节颜色的区域，预览区域为 preview，颜色调节区域为 controls，其中使用了 range 和 number 输入框来调节颜色。

confirm 为确认按钮，用于返回选中的颜色。

3. CSS 样式

为了美化样式，我们需要覆盖默认样式。在 CSS 文件中，我们可以使用以下样式：

.color-panel {
  display: inline-block;
  border: 1px solid #ccc;
  padding: 5px;
}

.color-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 5px;
  cursor: pointer;
}

.color-picker {
  position: fixed;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}

.preview {
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  background: #000;
}

.controls {
  display: flex;
  flex-wrap: wrap;
}

input[type="range"] {
  width: 100%;
  vertical-align: middle;
}

input[type="number"] {
  width: 30%;
  margin-left: 5px;
  vertical-align: middle;
}

.confirm {
  margin-top: 10px;
  padding: 5px 10px;
  border: none;
  background: #3993d0;
  color: #fff;
  cursor: pointer;
}

4. JS 实现

const $ = (selector) => document.querySelector(selector);
const $$ = (selector) => document.querySelectorAll(selector);

// rgb 颜色转 hex 颜色
function rgbToHex(r, g, b) {
  let hex = ((r << 16) | (g << 8) | b).toString(16);
  return "#" + new Array(Math.abs(hex.length - 7)).join("0") + hex;
}

// 初始化值
let selectedColor = "#ff0000"; // 默认为紅色
let isControlledByInput = false;

// 颜色调节函数
function setColor(color) {
  selectedColor = color;
  $(".preview").style.backgroundColor = color;

  // 将 RGB 值分离
  let r = parseInt(color.slice(1, 3), 16);
  let g = parseInt(color.slice(3, 5), 16);
  let b = parseInt(color.slice(5, 7), 16);

  // 设置 range 和 input 的值
  if (!isControlledByInput) {
    $(".range-r").value = r;
    $(".range-g").value = g;
    $(".range-b").value = b;

    $(".input-r").value = r;
    $(".input-g").value = g;
    $(".input-b").value = b;
  }

  // 将 RGB 颜色转为 HEX 颜色并返回
  return rgbToHex(r, g, b);
}

// 绑定事件
// 点击颜色区块，设置选中颜色
$$(".color-item").forEach((item) => {
  item.addEventListener("click", () => {
    let color = window.getComputedStyle(item).getPropertyValue("background-color");
    setColor(color);
  });
});

// 拖动 range，设置颜色
$$(".range-r, .range-g, .range-b").forEach((range) => {
  range.addEventListener("input", function() {
    isControlledByInput = false;
    setColor(`rgb(${$(".range-r").value}, ${$(".range-g").value}, ${$(".range-b").value})`);
  });
});

// 输入数值，设置颜色
$$(".input-r, .input-g, .input-b").forEach((input) => {
  input.addEventListener("input", function() {
    isControlledByInput = true;
    setColor(`rgb(${$(".input-r").value}, ${$(".input-g").value}, ${$(".input-b").value})`);
  });
});

// 点击确认按钮返回颜色
$(".confirm").addEventListener("click", () => {
  console.log(selectedColor); // 这里可以改为其他操作来实现颜色选取器的交互
});

总结

通过以上实现，我们成功地开发了一个颜色选取器，用户可以通过点击颜色区块、调节颜色数值、拖动 range 来选取喜欢的颜色，并返回 RGB 颜色值。

示例说明：

1. 点击 color-item 区块：如果用户点击颜色区块，通过事件绑定，获取该区块的颜色作为当前选中颜色。
2. 调节颜色数值：用户也可以通过调节颜色数值实时改变颜色，通过事件绑定，实现数值调节颜色的效果。

希望这份攻略能够对你造福，如有问题，欢迎进一步交流探讨！