JS实现的系统调色板完整实例

2023年6月10日下午6:50 • JavaScript

JS实现的系统调色板完整实例攻略

一、目标

本教程将介绍如何使用HTML、CSS和JavaScript实现一个系统调色板。该调色板将由六个滑块组成，每个滑块对应一个颜色通道。通过拖动滑块，可动态改变色彩输出。最后，我们将为该调色板添加一个显示颜色名称和十六进制代码的区域，以便用户了解当前所选颜色的相关信息。

二、步骤

1. HTML结构

首先，创建一个HTML结构以容纳调色板、色彩名称和十六进制代码的区域。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>JS实现的系统调色板</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="box">
        <div class="color-strip"></div>
        <div class="color-select"></div>
    </div>
    <div class="info">
        <div class="color-name"></div>
        <div class="hex-code"></div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. CSS样式

接下来，编写CSS样式以为调色板区域和信息区域添加样式。

.box {
  margin: 50px auto;
  width: 210px;
  height: 210px;
  position: relative;
}

.color-strip {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50px;
}

.color-select {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 50px;
}

.info {
  margin: 20px auto;
  width: 400px;
  height: 100px;
  position: relative;
}

.color-name, .hex-code {
  width: 49%;
  height: 100%;
  position: absolute;
}

.color-name {
  left: 0;
}

.hex-code {
  right: 0;
  text-align: right;
}

3. JavaScript代码

最后，使用JavaScript代码添加功能逻辑，实现调色板和颜色信息的动态变化。

const strip = document.querySelector('.color-strip');
const select = document.querySelector('.color-select');
const colorName = document.querySelector('.color-name');
const hexCode = document.querySelector('.hex-code');

let hue = 0;
let saturation = 100;
let lightness = 50;

function setColor() {
  const hueValue = `hue(${hue}deg)`;
  const saturationValue = `saturate(${saturation}%)`;
  const lightnessValue = `brightness(${lightness}%)`;
  const filterValue = `${hueValue} ${saturationValue} ${lightnessValue}`;

  strip.style.filter = filterValue;

  const selectedColor = strip.style.backgroundColor;
  select.style.backgroundColor = selectedColor;

  const color = new TinyColor(selectedColor);
  colorName.textContent = color.toName();
  hexCode.textContent = color.toHex();
}

strip.addEventListener('mousedown', (e) => {
  setColor();

  function drag(e) {
    hue = Math.round((e.offsetX / strip.offsetWidth) * 360);
    saturation = Math.round((e.offsetY / strip.offsetHeight) * 100);
    setColor();
  }

  document.addEventListener('mousemove', drag);
  document.addEventListener('mouseup', () => {
    document.removeEventListener('mousemove', drag);
  });
});

setColor();

以上代码实现了调色板功能，并为其添加了显示颜色名称和十六进制代码的区域，使用户了解当前所选颜色的相关信息。