一个简单的颜色取值工具的实现。这个工具允许用户输入颜色代码（如十六进制或RGB），并实时显示所选颜色的预览。此外，还提供了从预定义颜色列表中选择颜色的功能。
代码说明：
- HTML结构：
- 包含标题、颜色预览区域、颜色输入框和预定义颜色列表。
- CSS样式：
- 设置了整体布局、颜色、间距等，使页面美观且易于阅读。
- 颜色预览区域设置了边框和圆角。
- 输入框和颜色列表项设置了样式，使其更具吸引力。
- JavaScript逻辑：
- 定义了一个预定义的颜色列表。
- 获取DOM元素并初始化颜色预览。
- 监听颜色输入框的变化，验证输入的有效性并更新颜色预览。
- 创建预定义颜色项，并添加点击事件以更新颜色预览和输入框。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>颜色取值工具</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f0f2f5;
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.container {
width: 80%;
max-width: 600px;
background-color: white;
padding: 20px;
border-radius: 16px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
text-align: center;
}
.color-preview {
width: 100%;
height: 100px;
margin: 20px 0;
border: 1px solid #ccc;
border-radius: 8px;
}
.input-group {
margin-bottom: 20px;
}
.input-group label {
display: block;
margin-bottom: 5px;
font-weight: bold;
}
.input-group input {
width: calc(100% - 22px);
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
font-size: 16px;
}
.color-list {
display: flex;
justify-content: space-around;
flex-wrap: wrap;
}
.color-item {
width: 40px;
height: 40px;
margin: 5px;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s ease;
}
.color-item:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div class="container">
<h2>颜色取值工具</h2>
<div class="color-preview" id="color-preview"></div>
<div class="input-group">
<label for="color-input">输入颜色代码 (例如 #ffcccb 或 rgb(255, 204, 203)):</label>
<input type="text" id="color-input" placeholder="#ffcccb">
</div>
<div class="color-list" id="color-list"></div>
</div>
<script>
// 预定义的颜色列表
const predefinedColors = [
'#ffcccb', '#ffb6c1', '#faebd7', '#ffe4e1', '#fff0f5',
'#ffefd5', '#ffdab9', '#ffd700', '#ffffe0', '#fffacd',
'#fafad2', '#ffe4b5', '#ffdead', '#f8f8ff', '#ffe4c4',
'#ffa07a', '#ff6347', '#ff4500', '#ff8c00', '#ffa500'
];
// 获取DOM元素
const colorPreview = document.getElementById('color-preview');
const colorInput = document.getElementById('color-input');
const colorList = document.getElementById('color-list');
// 初始化颜色预览
function updateColorPreview(color) {
colorPreview.style.backgroundColor = color;
}
// 处理颜色输入变化
colorInput.addEventListener('input', () => {
const color = colorInput.value;
if (isValidColor(color)) {
updateColorPreview(color);
} else {
alert('请输入有效的颜色代码');
}
});
// 检查颜色代码是否有效
function isValidColor(color) {
const s = new Option().style;
s.color = color;
return s.color !== '';
}
// 创建预定义颜色项
predefinedColors.forEach(color => {
const colorItem = document.createElement('div');
colorItem.className = 'color-item';
colorItem.style.backgroundColor = color;
// 点击颜色项时更新颜色预览和输入框
colorItem.addEventListener('click', () => {
colorInput.value = color;
updateColorPreview(color);
});
colorList.appendChild(colorItem);
});
</script>
</body>
</html>
No responses yet