colorpicker
文章目录
需求分析:
以下四种方案, 前三种为点击色块选择颜色, 第四种为滑动/拖拽选颜色, 所以分为两种实现类型-色块或者色带, 做出两种colorpicker.
第一种方案的颜色选择器: 点击色块选择颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第一种方法:点击方块选择颜色</title>
<style>
* {
margin: 0;
padding: 0;
}
#colorpicker {
width: 230px;
height: 350px;
margin: auto;
padding: 2px;
background-color: #f1f1f1;
border: 1px solid black;
text-align: center;
}
.color_container {
display: flex;
width: 220px;
height: 210px;
margin: 5px;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
align-items: center;
background-color: #cec7c7;
}
.rgb_value {
margin: 10px;
}
.rgb_value input {
display: inline-block;
width: 70px;
}
</style>
</head>
<body>
<div id="colorpicker">
无颜色
<div class="color_container"></div>
<div class="rgb_value">
RGB值为 <input type="text" value="">
</div>
</div>
<script>
let colorpicker = document.getElementById('colorpicker');
let color_container = document.querySelector('.color_container');
/* 创建颜色代码数组 */
// 因为找不到这个案例的颜色变化的规律, 所以用了笨方法, 写死了颜色数组
let color_array = [
"#ffffff", "#e5e4e4", "#d9d8d8", "#c0bdbd", "#a7a4a4", "#8e8a8b", "#827e7f", "#767173", "#5c585a", "#000000",
"#fefcdf", "#fef4c4", "#feed9b", "#fee573", "#ffed43", "#f6cc0b", "#f6cc0b", "#c9a601", "#ad8e00", "#8c7301",
"#ffded3", "#ffc4b0", "#ff9d7d", "#ff7a4e", "#ff6600", "#e95d00", "#d15502", "#ba4b01", "#a44201", "#8d3901",
"#ffd2d0", "#ffbab7", "#fe9a95", "#ff7a73", "#ff483f", "#fe2419", "#f10b00", "#d40a00", "#940000", "#6d201b",
"#ffdaed", "#ffb7dc", "#ffa1d1", "#ff84c3", "#ff57ac", "#fd1289", "#ec0078", "#d6006d", "#bb005f", "#9b014f",
"#fcd6fe",