参考：mossbaoo~

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>color拾取器</title>
    </head>
    <body>
        <div>社会主义接班人</div>
        <input type="color" id="color1">
        <input type="color" id="color2">
    </body>
    <script type="text/javascript" charset="utf-8">
        /**
         * 以prototype原型的方式，给string字符串类型添加方法，用于实现颜色值格式的转换。
         * 
         * RGB转换为16进制
         * 
         * 使用方式：
         * "rgb(255,255,255)".colorHex();  // #ffffff
         */
        String.prototype.colorHex = function() {
            // RGB颜色值的正则
            var reg = /^(rgb|RGB)/;
            var color = this;
            if (reg.test(color)) {
                var strHex = "#";
                // 把RGB的3个数值变成数组
                var colorArr = color.replace(/(?:\(|\)|rgb|RGB)*/g, "").split(",");
                // 转成16进制
                for (var i = 0; i < colorArr.length; i++) {
                    var hex = Number(colorArr[i]).toString(16);
                    if (hex === "0") {
                        hex += hex;
                    }
　　　　　　　　　　　　hex = hex.length == 1?\'0\'+hex:hex;
                    strHex += hex;
                }
                return strHex;
            } else {
                return String(color);
            }
        };

        /**
         * 16进制转换为RGB
         * 
         * 使用方式：
         * "#fff".colorRgb(); // rgb(255,255,255)
         * "#ffffff".colorRgb(); // rgb(255,255,255)
         */
        String.prototype.colorRgb = function() {
            // 16进制颜色值的正则
            var reg = /^#([0-9a-fA-f]{3}|[0-9a-fA-f]{6})$/;
            // 把颜色值变成小写
            var color = this.toLowerCase();
            if (reg.test(color)) {
                // 如果只有三位的值，需变成六位，如：#fff => #ffffff
                if (color.length === 4) {
                    var colorNew = "#";
                    for (var i = 1; i < 4; i += 1) {
                        colorNew += color.slice(i, i + 1).concat(color.slice(i, i + 1));
                    }
                    color = colorNew;
                }
                // 处理六位的颜色值，转为RGB
                var colorChange = [];
                for (var i = 1; i < 7; i += 2) {
                    colorChange.push(parseInt("0x" + color.slice(i, i + 2)));
                }
                return "RGB(" + colorChange.join(",") + ")";
            } else {
                return color;
            }
        };


        /** ========== 测试分割线 测试分割线 测试分割线 测试分割线 ========== */
        var colorsHex = "#ff8080";
        var colorsRgb = "rgb(255, 128, 128)"

        var colors = document.querySelector("#color1").value;
        console.log(colors);

        document.querySelector("#color1").onchange = function() {
            // document.getElementById(\'color1\').click(); // 必须添加触发click事件否则不能通过点击确定按钮触发更改颜色

            document.body.style.color = this.value;
            
            var bodyColor = document.body.style.color;

            document.querySelector("#color2").value = bodyColor.colorHex();
            
            console.log(bodyColor);
            console.log(bodyColor.colorHex());
            console.log(document.body.style.color.colorHex());
        }
    </script>
</html>

 

hex = hex.length == 1 ? \'0\' + hex : hex;

版权声明：本文为antao原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/antao/p/14109500.html