js实现十六进制颜色转化成rgb颜色 

/*
   @author:luowen
   @time:2013-10-08
   @desc:js to rgb color           
*/
<!doctype html>
<html>
    <head>
        <title>js to rgb color</title>
        <charset='utf-8' />
    </head>
    <body>
        <input type='text' id='color' />
        <button id="change">change to ten</button>
        <span>eg: (#fff) ==> rgb(255,255,255)</span>
        <br />
        <input type="text" id="res" value="" />
    </body>
        <script type="text/javascript">
        //获取对象
        function $(id){
            return document.getElementById(id);
        }
        //响应点击函数
        $('change').onclick = function(){
                if($('color').value == ''){
                    alert('请输入需要转化的值如:#fff');
                    return;
                }
                toRGB($('color').value);
        }
        function toRGB(msg){
                var re = new RegExp(/^#([0-9a-fA-F]){3,6}$/);    
                var flag = msg.match(re);
                //alert(flag);
                if(flag == null){
                    //alert(msg);
                    $('res').value = msg;
                    $('res').style.color = 'red';
                }
                else{
                    //#11 11 11
                    var resStr = msg.substr(1);
                    
                    var resArr = spiltArr(resStr);
                    
                    var rgb = toTen(resArr);
                    //console.log(resTen);
                    //alert('rgb'+'('+rgb+')');
                    $('res').value = 'rgb'+'('+rgb+')';
                    $('res').style.color = 'blue';
                }
                
        }
        //将拿到的字符转化成十进制
        function toTen(arr){
            var rgb = ['','',''];
            for(var i = 0;i < 3; i++){
                rgb[i] = parseInt(arr[i],16);    
            }
            return rgb;
        }
        //将字符串分割成(cc,dd,ff)形式
        function spiltArr(str){
            var tmp = ['','',''];
            var strLen = str.length;
            if(strLen == 3){
                var a = str.substr(0,1);    
                var b = str.substr(1,1);    
                var c = str.substr(2,1);
                tmp[0] = a + a;
                tmp[1] = b + b;
                tmp[2] = c + c;
                return tmp;    
            }
            else if(strLen == 6){
                tmp[0] = str.substr(0,2);    
                tmp[1] = str.substr(2,2);    
                tmp[2] = str.substr(4,2);    
                return tmp;
            }
        }

    </script>
    </html>
　　

 

posted @ 2013-10-08 18:09  arvim  阅读(1267)  评论(0)    收藏  举报