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();
以上代码实现了调色板功能,并为其添加了显示颜色名称和十六进制代码的区域,使用户了解当前所选颜色的相关信息。
三、示例说明
-
示例1-调整颜色:用户可以通过拖动滑块动态地调整调色板中所选颜色的色相、饱和度和亮度,从而实现更细致的调整。
-
示例2-显示颜色信息:使用者可以通过区域中的显示颜色名称和十六进制代码的区域,了解当前所选颜色的具体信息,方便后续的应用和处理。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JS实现的系统调色板完整实例 - Python技术站