取色器
input在html5中有新增了type=color的属性有一个直接值的 取色器 加 拾色器 ，点击滴管进入取色，监听input事件追踪值的变化 input的value值会返回十六进制，所以写了一个内置conversion函数转成rgb
<!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>Document</title>
<style>
.test {
display: flex;
}
/* css 改变取色器的样式去边框款高度等 */
input[type="color"] {
-webkit-appearance: none;
border: none;
padding: 0;
border-radius: 2px;
width: 30px;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
margin: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
border-radius: 2px;
}
</style>
</head>
<body>
<div class="test">
<input type="color" id="htmlColorEl">
<div id="show">无</div>
</div>
<script>
document.getElementById("htmlColorEl").addEventListener("input", (e) => {
let conversion = function (value) {
// 16进制颜色值的正则
let reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
// 把颜色值变成小写
let color = value.toLowerCase();
if (reg.test(color)) {
// 如果只有三位的值，需变成六位，如：#fff => #ffffff
if (color.length === 4) {
let colorNew = "#";
for (let i = 1; i < 4; i += 1) {
colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
}
color = colorNew;
}
// 处理六位的颜色值，转为RGB
let colorChange = [];
console.log("%c Line:67
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
