javascript 颜色值转化

最新推荐文章于 2019-07-22 16:11:31 发布

sotti

最新推荐文章于 2019-07-22 16:11:31 发布

阅读量157

点赞数

文章标签： javascript xhtml web安全 ViewUI

本文链接：https://blog.csdn.net/sotti/article/details/84467160

版权


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>颜色值相互转换---Color---www.cnblogs.com/kuikui</title>
    <style type="text/css">
        td, body{font-size: 12px;}
        #primcolor, #drakcolor, #lightcolor, #websafecolor{width: 100px;height: 100px;border: 1px solid #808080;}
        #inputcolor{border: 0;border-bottom: 1px solid #000;width: 50px;height: 20px;}
        #setbutton{border: 1px solid #000;}
    </style>
    <script type="text/javascript">
        var Color = function () {
            //将hex颜色值str转化成rgb数组
            this.HexToRgb = function (str) {
                var r = /^\#?[0-9a-f]{6}$/;
                //test方法检查在字符串中是否存在一个模式，如果存在则返回true，否则返回false
                if (!r.test(str)) return window.alert("输入错误的hex颜色值");
                //replace替换查找的到的字符串
                str = str.replace("#", "");
                //match得到查询数组
                var hxs = str.match(/../g);
                for (var i = 0; i < 3; i++) hxs[i] = parseInt(hxs[i], 16);
                return hxs;
            }

            //将rgb颜色值为a,b,c转化成hex颜色值
            this.RgbToHex = function (a, b, c) {
                var r = /^\d{1,3}$/;
                if (!r.test(a) || !r.test(b) || !r.test(c)) return window.alert("输入错误的rgb颜色值");
                var hexs = [a.toString(16), b.toString(16), c.toString(16)];
                for (var i = 0; i < 3; i++) if (hexs[i].length == 1) hexs[i] = "0" + hexs[i];
                return "#" + hexs.join("");
            }

            //得到hex颜色值为color的加深颜色值，level为加深的程度，限0-1之间
            this.getDarkColor = function (color, level) {
                var r = /^\#?[0-9a-f]{6}$/;
                if (!r.test(color)) return window.alert("输入错误的hex颜色值");
                var rgbc = this.HexToRgb(color);
                //floor 向下取整
                for (var i = 0; i < 3; i++) rgbc[i] = Math.floor(rgbc[i] * (1 - level));
                return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
            }

            //得到hex颜色值为color的减淡颜色值，level为减淡的程度，限0-1之间
            this.getLightColor = function (color, level) {
                var r = /^\#?[0-9a-f]{6}$/;
                if (!r.test(color)) return window.alert("输入错误的hex颜色值");
                var rgbc = this.HexToRgb(color);
                for (var i = 0; i < 3; i++) rgbc[i] = Math.floor((255 - rgbc[i]) * level + rgbc[i]);
                return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
            }

            //得到hex颜色值为color的web安全色
            this.getWebSafeColor = function (color) {
                var r = /^\#?[0-9a-f]{6}$/;
                if (!r.test(color)) return window.alert("输入错误的hex颜色值");
                var rgbc = this.HexToRgb(color);
                for (var i = 0; i < 3; i++) {
                    var q1 = Math.floor(rgbc[i] / 51) * 51;
                    //ceil向上取整
                    var q2 = Math.ceil(rgbc[i] / 51) * 51;
                    //abs绝对值
                    if (Math.abs(q1 - rgbc[i]) <= Math.abs(q2 - rgbc[i])) rgbc[i] = q1;
                    else rgbc[i] = q2;
                }
                return this.RgbToHex(rgbc[0], rgbc[1], rgbc[2]);
            }
        }
    </script>
</head>
<body>
    <table cellspacing="10" border="0">
        <tr>
            <td>
                <div id="primcolor">
                </div>
                （原始颜色）<br />
                hex:<span></span><br />
                rgb:<span></span>
            </td>
            <td align="center">
                颜色：#<input type="text" id="inputcolor" maxlength="6" onfocus="select()" />
                <input type="button" value="设定" id="setbutton" onclick="setC()" />
            </td>
        </tr>
    </table>
    <table cellspacing="10" border="0">
        <tr>
            <td>
                <div id="drakcolor">
                </div>
                （加深颜色）<br />
                hex:<span></span><br />
                rgb:<span></span>
            </td>
            <td>
                <div id="lightcolor">
                </div>
                （减淡颜色）<br />
                hex:<span></span><br />
                rgb:<span></span>
            </td>
            <td>
                <div id="websafecolor">
                </div>
                （Web安全色）<br />
                hex:<span></span><br />
                rgb:<span></span>
            </td>
        </tr>
    </table>
</body>
</html>
<script type="text/javascript">
    var test = new Color();
    function insetpane(tid, colorvalue) {
        var spans = document.getElementById(tid).parentNode.getElementsByTagName("span");
        try {
            document.getElementById(tid).style.backgroundColor = "#" + colorvalue.replace("#", "");
            spans[0].innerHTML = "#" + colorvalue.replace("#", "");
            spans[1].innerHTML = test.HexToRgb(colorvalue).join(",");
        } catch (e) {
        }
    }

    function setC() {
        var v = document.getElementById("inputcolor").value;
        insetpane("primcolor", v);
        insetpane("drakcolor", test.getDarkColor(v, 0.5));
        insetpane("lightcolor", test.getLightColor(v, 0.5));
        insetpane("websafecolor", test.getWebSafeColor(v));
    }
</script>

sotti

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 颜色值转化

[code="java"] 颜色值相互转换---Color---www.cnblogs.com/kuikui td, body{font-size: 12px;} #primcolor, #drakcolor, #lightcolor, #websafecolor{width: 100px;height: 100px;borde...
复制链接

扫一扫