zoukankan      html  css  js  c++  java
  • 牛客网刷题27—颜色字符串转换

    51.颜色字符串转换

    题目链接

    https://www.nowcoder.com/practice/80b08802a833419f9c4ccc6e042c1cca?tpId=2&&tqId=10860&rp=1&ru=/activity/oj&qru=/ta/front-end/question-ranking

    题目描述

    将 rgb 颜色字符串转换为十六进制的形式,如 rgb(255, 255, 255) 转为 #ffffff
    1. rgb 中每个 , 后面的空格数量不固定
    2. 十六进制表达式使用六位小写字母
    3. 如果输入不符合 rgb 格式,返回原始输入
    示例1

    输入

    'rgb(255, 255, 255)'

    输出

    #ffffff

    重难点

    1.  rgb 颜色字符串的正则表达式。
    2. 二进制转16进制时要注意题目中第二点要求:十六进制表达式使用六位小写字母。

    题目分析

    1. 写rgb 颜色字符串的正则表达式,判断输入是否符合rgb 颜色字符串的格式;
    2. 若符合rgb 颜色字符串的格式,用(分割字符串并去除所有空格;
    3. 删除),用,分割字符串;
    4. 将字符串转成整型数字,若数字>=0 && <= 255,转成16进制;
    5. 注意:转成16进制时要判断一下数字是否大于16,不大于16的时候需要补0。

    法一:

    function rgb2hex(sRGB) {
        var reg = /^rgb((d+),s*(d+)s*,s*(d+))/;
        var res = "#";
        if(reg.test(sRGB)){
            //用(分割字符串并去除所有空格
            var rgb = sRGB.split('(')[1].replace(/s+/g,""); 
            //删除)
            var numSrt = rgb.replace(')','');
          //用,分割字符串
            var num = numSrt.split(',');
            for(var i=0;i<num.length;i++){
                var numInt = parseInt(num[i]);
                if(num[i] >= 0 && num[i] <= 255){
                    res += numInt<16? ('0'+numInt).toString(16):numInt.toString(16);
    
                }else{
                    return sRGB;
                    break;
                }
            }
            return res;
        }else{
            return sRGB;
        }
    }    
    

      

    法二:使用match

    function rgb2hex(sRGB) {
       var reg = /rgb((d+),s*(d+),s*(d+))/
        var num = sRGB.match(reg);  // 数组长度为4,第一个元素为完整匹配,后三个元素为匹配的子表达式
        var res = '#'
        if(num){
            for(var i=1;i<num.length;i++){
                 var numInt = parseInt(num[i]);
                if(num[i] >= 0 && num[i] <= 255){
                    res += numInt<16? ('0'+numInt).toString(16):numInt.toString(16);
                    
                }else{
                    return sRGB;
                }
            }
            return res;
        }else{
            return sRGB;
        }
    }
    
  • 相关阅读:
    css3简易实现图标动画由小到大逐个显现
    下拉图标呼吸效果制作
    设置图片从页面四周渐入效果的锚点方法
    关于导航宽度高度自适应的小栗子
    Odd-e CSD Course Day 5
    Odd-e CSD Course Day 2
    Odd-e CSD Course Day 3
    Odd-e CSD Course Day 1
    Odd-e CSD Course Day 4
    [心得] SQL Server Partition(表分區) 資料分佈探討
  • 原文地址:https://www.cnblogs.com/liu-xin1995/p/12375042.html
Copyright © 2011-2022 走看看