鼠标点击颜色面板时获取当前颜色十六进制值的js插件代码

原创已于 2025-06-27 15:39:04 修改 · 788 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-24 15:39:55 首次发布

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色选择器插件</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Arial', sans-serif;
}

body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #f5f7fa;
padding: 20px;
}

h1 {
margin-bottom: 30px;
color: #333;
text-align: center;
}

.color-picker-container {
width: 100%;
max-width: 600px;
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.color-palette {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 10px;
margin-bottom: 20px;
}

.color-box {
aspect-ratio: 1/1;
border-radius: 5px;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
border: 2px solid transparent;
}

.color-box:hover {
transform: scale(1.1);
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.color-box.active {
border-color: #333;
box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}

.result-area {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
padding: 20px;
background: #f0f2f5;
border-radius: 8px;
}

.selected-color {
width: 80px;
height: 80px;
border-radius: 50%;
margin-bottom: 15px;
border: 2px solid #ddd;
}

.hex-value {
font-size: 18px;
font-weight: bold;
color: #333;
padding: 10px 20px;
background: white;
border-radius: 30px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.copy-btn {
margin-top: 15px;
padding: 8px 20px;
background: linear-gradient(to right, #4776E6, #8E54E9);
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
font-size: 14px;
transition: all 0.3s;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.copy-btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.website-link {
display: inline-block;
margin-top: 30px;
padding: 12px 24px;
background: linear-gradient(to right, #FF416C, #FF4B2B);
color: white;
text-decoration: none;
border-radius: 30px;
font-size: 16px;
transition: all 0.3s;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2);
}

.website-link:hover {
transform: translateY(-3px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<h1>颜色选择器插件</h1>

<div class="color-picker-container">
<div class="color-palette" id="colorPalette">

</div>

<div class="result-area">
<div class="selected-color" id="selectedColor"></div>
<div class="hex-value" id="hexValue">点击上方颜色</div>
<button class="copy-btn" id="copyBtn">复制颜色值</button>
</div>
</div>


<script>
document.addEventListener('DOMContentLoaded', function() {
// 颜色数组 - 可以自定义
const colors = [
'#FF5733', '#33FF57', '#3357FF', '#F3FF33', '#FF33F3',
'#33FFF3', '#8A2BE2', '#FF7F50', '#6495ED', '#DC143C',
'#008B8B', '#B8860B', '#006400', '#FFD700', '#DAA520',
'#FF6347', '#FF4500', '#DA70D6', '#9932CC', '#8B008B',
'#E9967A', '#8FBC8F', '#483D8B', '#2F4F4F', '#00CED1',
'#9400D3', '#FF1493', '#00BFFF', '#696969', '#1E90FF',
'#B22222', '#228B22', '#FF8C00', '#20B2AA', '#CD5C5C',
'#4B0082', '#7CFC00', '#ADD8E6', '#F08080', '#E0FFFF',
'#FAFAD2', '#D3D3D3', '#90EE90', '#FFB6C1', '#FFA07A',
'#87CEFA', '#778899', '#B0C4DE', '#FFFFE0', '#00FF00'
];

const colorPalette = document.getElementById('colorPalette');
const selectedColor = document.getElementById('selectedColor');
const hexValue = document.getElementById('hexValue');
const copyBtn = document.getElementById('copyBtn');

let currentColor = null;

// 生成颜色面板
function generateColorPalette() {
colorPalette.innerHTML = '';

colors.forEach(color => {
const colorBox = document.createElement('div');
colorBox.className = 'color-box';
colorBox.style.backgroundColor = color;
colorBox.dataset.color = color;

colorBox.addEventListener('click', function() {
// 移除之前选中的样式
document.querySelectorAll('.color-box').forEach(box => {
box.classList.remove('active');
});

// 添加选中样式
this.classList.add('active');

// 更新当前颜色
currentColor = this.dataset.color;
selectedColor.style.backgroundColor = currentColor;
hexValue.textContent = currentColor;
});

colorPalette.appendChild(colorBox);
});
}

// 复制颜色值
copyBtn.addEventListener('click', function() {
if (!currentColor) {
alert('请先选择颜色');
return;
}

navigator.clipboard.writeText(currentColor)
.then(() => {
hexValue.textContent = '已复制: ' + currentColor;
setTimeout(() => {
hexValue.textContent = currentColor;
}, 2000);
})
.catch(err => {
console.error(' 复制失败: ', err);
alert('复制失败，请手动复制');
});
});

// 初始化
generateColorPalette();
});
</script>
</body>
</html>