【JavaScript】颜色的RGB和HEX格式转换

RGB 到 HEX , 重点是要用到 toString 进行16进制转换

// 方法一: 链式调用
// 效  果: 简洁明了
// 解  释: 1. match匹配数字; 2. map循环转换16进制; 3. 连接数组
// 注  意: 匹配结果默认字符串,(+d)显示类型转换
function rgb2hex(rgb){
    return "#" + rgb
        .match(/\d+/g)
        .map(d => (+d).toString(16))
        .join("");
}

// 方法二: 位操作符
// 效  果: 装逼
// 解  释: 1. match匹配数字; 2. << 左移 | 按位或; 3. 整体转换成16进制
// 注  意: 按位或|可以理解成位运算中的加法
function rgb2hex(rgb){
    var [r,g,b] = rgb.match(/\d+/g);
    return '#' + (r << 16 | g << 8 | b).toString(16);
}

HEX 到 RGB ,注意处理简写“#abc”为“#aabbcc”

function hex2rgb(hex){
    var hexNum = hex.substring(1);
    hexNum = '0x' + (hexNum.length < 6 ? repeatLetter(hexNum, 2) : hexNum);
    var r = hexNum >> 16;
    var g = hexNum >> 8 & '0xff';
    var b = hexNum & '0xff';
    return `rgb(${r},${g},${b})`;
    
    function repeatWord(word, num){
        var result = '';
        for(let i = 0; i < num; i ++){
            result += word;
        }
        return result;
    }
    
    function repeatLetter(word, num){
        var result = '';
        for(let letter of word){
            result += repeatWord(letter, num);
        }
        return result;
    }
}

 

全部评论

相关推荐

昨天 15:45
辽宁大学 golang
咱就是说&nbsp;你不主动&nbsp;我也不会主动下一步hhh,急死了
恶龙战士:不建议把这种帖子发到牛客上,建议去小红书发
点赞 评论 收藏
分享
咦哟,从去年八月份开始长跑,两处实习转正都失败了,风雨飘摇,终于拿到offer了更新一下面试记录:秋招:多部门反复面试然后挂掉然后复活,具体问了啥已经忘了,只是被反复煎炸,直至焦香😋春招:base北京抖音hr打来电话说再次复活,准备面试,gogogo北京抖音一面:六道笔试题:1.promise顺序2.定义域问题3.flat展开4.并发请求5.岛屿数量算法(力扣)深度,广度都写6.忘记了,好像也是算法,难度中等其他问题多是框架底层设计,实习项目重难点~~~秒过😇北京抖音二面:三道笔试题:(为什么只有三道是因为第三道没做出来,卡住了)1.中等难度算法(忘记啥题了,应该是个数组的)2.认识js的继承本质(手写继承模式,深入js的面相对象开发)3.手写vue的响应式(卡在了watch,导致挂掉)---后知后觉是我的注册副作用函数写得有问题,有点紧张了其他题目多是项目拷打,项目亮点,对实习项目的贡献~~~第二天,挂,but立马复活转战深圳客服当天约面深圳客服一面:六道笔试题,由于面过太多次字节,面试官叫我直接写,不用讲,快些写完😋,具体都是些继承,深拷贝(注意对数组对象分开处理,深层次对象,循环引用),加中等难度算法题~~~秒过深圳客服二面:口诉八股大战:大概囊括网络,浏览器渲染原理,动画优化,时间循环,任务队列等等(你能想到的简单八股通通拉出来鞭尸😋)算法题:笔试题6道:1:找出数组内重复的数,arr[0]-arr[n]内的数大小为[1-n],例如[1,2,2,3,3]返回[2,3],要求o(n),且不使用任何额外空间(做到了o(n),空间方面欠佳,给面试官说进入下一题,做不来了)2:原滋原味的继承(所以继承真滴很重要)3:力扣股票购买时机难度中等其他滴也忘记了,因为拿到offer后鼠鼠一下子就落地了,脑子自动过滤掉可能会攻击鼠鼠的记忆😷~~~秒过深圳客服三面:项目大战参与战斗的人员有:成员1:表单封装及其底层原理,使用成本的优化,声明式表单成员2:公司内部库生命周期管理成员3:第三方库和内部库冲突如何源码断点调试并打补丁解决成员4:埋点的艺术成员5:线上项目捷报频传如何查出内鬼成员6:大文件分片的风流趣事成员7:设计模式对对碰成员8:我构建hooks应对经理的新增的小需求的故事可能项目回答的比较流利,笔试题3道,都很简单,相信大家应该都可以手拿把掐😇~~~过过过无hr面后续煎熬等待几天直接hr打电话发offer了,希望大家也可以拿到自己心仪的offer
法力无边年:牛哇,你真是准备得充分,我对你没有嫉妒,都是实打实付出
查看19道真题和解析
点赞 评论 收藏
分享
评论
点赞
收藏
分享

创作者周榜

更多
牛客网
牛客网在线编程
牛客网题解
牛客企业服务