• JS实现颜色值的转换


    从网上看了个案例,是实现颜色值转换的,就想着自己也写个。网上的案例链接找不到了,这里也就不贴了。

    JavaScript颜色转换的核心就是进制间的转换。

    rgba(0,0,0,.4)转换成#000000,就是Number.toString(16)

    #ffffff转换成rgb(255,255,255),就是parseInt(String,16)

    代码如下:

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" Content="text/html; charset=utf-8;">
    <title>JS-颜色值的转换</title>
    <meta name="author" content="rainna" />
    <meta name="keywords" content="rainna's js lib" />
    <meta name="description" content="js" />
    <style>
    *{margin:0;padding:0;}
    body{background:#f0f0f0;}
    h2{margin:0 0 20px;}
    input{width:300px;height:24px;line-height:24px;}
    
    .m-box{width:900px;margin:0 auto;padding:20px;}
    </style>
    </head>
    
    <body>
    <div class="m-box">
        <h2>RGB(A)颜色转换为HEX十六进制的颜色值</h2>
        <div class="box1">
            <input type="text" id="colorIpt1" value="rgba(0,0,0,.4)"/>
            <a href="#" id="link1">转换</a>
            <input type="text" id="colorIpt2"/>
        </div>
    </div>
    
    <div class="m-box">
        <div class="box1">
            <input type="text" id="colorIpt3" value="#ffffff"/>
            <a href="#" id="link2">转换</a>
            <input type="text" id="colorIpt4"/>
        </div>
    </div>
    
    <script>
    var colorChange = {
        rgbToHex:function(val){  //RGB(A)颜色转换为HEX十六进制的颜色值
            var r, g, b, a,
            regRgba = /rgba?((d{1,3}),(d{1,3}),(d{1,3})(,([.d]+))?)/,    //判断rgb颜色值格式的正则表达式,如rgba(255,20,10,.54)
            rsa = val.replace(/s+/g,'').match(regRgba);
            if(!!rsa){
                r = parseInt(rsa[1]).toString(16);
                r = r.length == 1 ? '0' + r : r;
                g = (+rsa[2]).toString(16);
                g = g.length == 1 ? '0' + g : g;
                b = (+rsa[3]).toString(16);
                b = b.length == 1 ? '0' + b : b;
                a = (+(rsa[5] ? rsa[5] : 1)) * 100;
                return {hex:'#' + r + g + b, alpha: Math.ceil(a)};
            }else{
                return {hex:val, alpha:100};
            }    
        },
        hexToRgb:function(val){   //HEX十六进制颜色值转换为RGB(A)颜色值
            var a,b,c;
            if((/^#/g).test(val)){
                a = val.slice(1,3);
                b = val.slice(3,5);
                c = val.slice(5,7);
                return {rgba:'rgb(' + parseInt(a,16) + ',' + parseInt(b,16) + ',' + parseInt(c,16) + ')'};
            }else{
                return {rgba:'无效值:' + val};
            }
        }
    };
    
    link1.onclick = function(){
        var obj = colorChange.rgbToHex(document.getElementById('colorIpt1').value);
        document.getElementById('colorIpt2').value = '颜色值:' + obj.hex + ',透明度:' + obj.alpha + '%';
    };
    link2.onclick = function(){
        var obj = colorChange.hexToRgb(document.getElementById('colorIpt3').value);
        document.getElementById('colorIpt4').value = '颜色值:' + obj.rgba;
    };
    </script>
    </body>
    </html>
  • 相关阅读:
    您知道SASS吗?
    打破技术壁垒, 用SpreadJS 抢占“表格文档协同编辑系统”的入市先机
    7种你应该知道的JavaScript常见的错误
    前端开发:这10个Chrome扩展你不得不知
    疫情下,买菜难,其实卖菜的也是这么想的
    疫情之下远程办公,开启企业办公的全新时代!
    “泛在电力物联网”究竟是什么?
    2020 春节集五福最详细收集攻略
    怎样使我们的用户不再抵触填写Form表单?
    新事业,新征程:换屏哥,您身边的手机维修专家
  • 原文地址:https://www.cnblogs.com/zourong/p/4767053.html
Copyright © 2020-2023  润新知