luowen
/*
   @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>
  

 

分类:

技术点:

相关文章: