马黑黑 发表于 2022-5-30 11:08

H5拾色器

<style>
.mnbox { margin: 50px auto 0; width: fit-content; font: normal 1em / 1.2em sans-serif; }
.mnbox input { margin: 4px 2px; outline: none; border: 1px solid #ccc; border-radius: 4px; box-shadow: 1px 1px 1px #333; }
.mnbox input { padding: 6px; width: 120px; height: 14px; font-weight: bold; }
.mnbox input { width: 120px; cursor: pointer; }
.mnbox input { cursor: pointer; }
.mnbox p { margin: 0; padding: 4px 0; }
</style>

<div class="mnbox">
        <p><label>选择颜色: </label> <input type="color" id="picker" value="#5e7e97" />
                <input type="button" id="sub" value=" 确定 " /></p>
        <p><label>HEX代码: </label><input type="text" id="hex" value="" /></p>
        <p><label>RGB代码: </label><input type="text" id="rgb" value="" /></p>
</div>

<script>
let picker = document.querySelector('#picker'),
        hex = document.querySelector('#hex'),
        rgb = document.querySelector('#rgb'),
        btn = document.querySelector('#sub');

let hex2rgb = (val) => {
        let r = val.slice(1,3),
                g = val.slice(3,5),
                b = val.slice(5,7);
        return 'rgb(' + parseInt(r,16) + ',' + parseInt(g,16) + ',' + parseInt(b,16) + ')';
}

let setColor = () => {
        hex.value = picker.value;
        hex.style.color = picker.value;
        rgb.value= hex2rgb(picker.value);
        rgb.style.color = picker.value;
}

picker.onchange = () => setColor();
btn.onclick = () => setColor();
</script>

马黑黑 发表于 2022-5-30 11:14

HTML5的input标签有 type="color" 的拾色器，使用起来很方便：

<input type="color" id="picker" value="#5e7e97" />

然后可以通过 onchange 事件获得其 value 值即颜色值。

不同内核及其的浏览器，拾色器激活后的外观不尽一致，但现代主流浏览器多数都会支持此拾色器。ie不支持，苹果的浏览器不支持。

马黑黑 发表于 2022-5-30 11:21

例中，HEX代码说的是十六进制的颜色表示法，如 #cc00ff，RGB代码指rgb颜色表示法，如 rgb(0,20,100)。拾色器给出的颜色代码是hex，所以rgb需要一个函数进行转换。转换函数属进制转换，很简洁：

let hex2rgb = (val) => {
        let r = val.slice(1,3), g = val.slice(3,5), b = val.slice(5,7);
        return 'rgb(' + parseInt(r,16) + ',' + parseInt(g,16) + ',' + parseInt(b,16) + ')';
}

我用箭头函数来完成这个 hex2rgb 函数，并将函数等同于一个变量来处理，调用时加入 val 参数即可：

hex2rgb('#ff0000')

马黑黑 发表于 2022-5-30 11:33

其实在拾色器中就可以直接复制所选的颜色代码，共有三种颜色代码可以选择，除了前面提到的hex和rgb，还有一个叫 HSL。

这里顺带说一下 hsl 颜色表示法：

H：0(或360)表示红色，120表示绿色，240表示蓝色，也可取其他数值来指定颜色。取值为：0 - 360
S：Saturation(饱和度)。取值为：0.0% - 100.0%
L：Lightness(亮度)。取值为：0.0% - 100.0%

红影 发表于 2022-5-30 11:42

又是个好东西，可以任意选择颜色了，还能知道它们的代码，这个太好了{:4_199:}

红影 发表于 2022-5-30 11:43

马黑黑 发表于 2022-5-30 11:33
其实在拾色器中就可以直接复制所选的颜色代码，共有三种颜色代码可以选择，除了前面提到的hex和rgb，还有一 ...

hsl 颜色，这个非常陌生呢，从来没用过。

马黑黑 发表于 2022-5-30 11:43

红影 发表于 2022-5-30 11:43
hsl 颜色，这个非常陌生呢，从来没用过。

制图软件中会有它的身影

红影 发表于 2022-5-30 11:44

这个太实用了{:4_199:}

加林森 发表于 2022-5-30 13:33

来学习

红影 发表于 2022-5-30 20:18

马黑黑 发表于 2022-5-30 11:43
制图软件中会有它的身影

哦哦，不熟悉。

马黑黑 发表于 2022-5-30 20:47

红影 发表于 2022-5-30 20:18
哦哦，不熟悉。

美图秀秀也有的

醉美水芙蓉 发表于 2022-5-30 20:56

红影 发表于 2022-5-31 10:31

马黑黑 发表于 2022-5-30 20:47
美图秀秀也有的

反正常用的颜色也能用，对这个就没怎么注意过。

马黑黑 发表于 2022-5-31 18:18

红影 发表于 2022-5-31 10:31
反正常用的颜色也能用，对这个就没怎么注意过。

嗯，还不是专业手，否则必会至少关注到

马黑黑 发表于 2022-5-31 18:18

醉美水芙蓉 发表于 2022-5-30 20:56
进来学习老师的课程！

请用咖啡 {:4_190:}
页: [1]
查看完整版本: H5拾色器