源码分享 | 颜色值转换
亲爱的小伙伴们，大家好
天渐渐变冷了，小伙伴们记得 加衣，多喝热水，注意保暖，特别是早晚，温差比较大，要特别注意
不要感冒了，感冒了就不舒服了，头晕、鼻塞、没胃口...
当别人问及某某是什么 颜色 吗？你会怎样回答，相信小伙伴会回答大致的颜色，如”红色”、“绿色”等
在编程中，如何表示某一种颜色呢？
在安卓中，颜色用 16进制颜色值，如#00a4ff
在网页中，使用“16进制颜色值”、“颜色英文名称”和“RGB颜色值”
16进制值
RGB颜色值
颜色英文名称
一个颜色有多种表示方式，例如以下3种都表示纯黑色
颜色英文名称：black
16进制颜色值：#000000
RGB颜色值：rgb(0,0,0)
那么当我们知道一个颜色的“16进制颜色值”或“RGB颜色值”中的一种时，怎样把它转换成另一种（“16进制颜色值”或“RGB颜色值”）
如知道“16进制颜色值”要转换成“RGB颜色值”，或知道“RGB颜色值”要转换成“16进制颜色值”
在网络上，有很多在线的工具就可以完成，其实原理就是 进制转换（16进制与10进制）
今天给大家分享 静态网页源码 ，让大家可以 离线 进行 RGB与16进制 互转
演示：
源码如下：<!--#名称：颜色值转换 | RGB与16进制互转#功能：颜色值（RGB与16进制互转）#作者：搬砖小哥#时间：19/11/29--><html lang="en"> <head> <meta charset="UTF-8"> <meta name="Author" content="搬砖小哥"> <title>颜色值转换 | RGB与16进制互转</title> <style type="text/css"> *{ padding:0; margin:0; font-family:"微软雅黑"; } #father{ width:400px; border:solid 1px; position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); -moz-transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -o-transform:translate(-50%,-50%); } a{ font-size:13px; color:blue; } header{ text-align:center; letter-spacing:0.1em; width:300px; height:60px; /* line-height:60px; */ margin:30px auto; border:solid 1px; } article{ width:300px; height:300px; border:solid 1px; margin:10px auto; } article section:first-child div:first-child{ width:215px; height:100px; float:left; } article section:first-child div:first-child div:first-child{ height:35px; margin-bottom:5px; } .rgb{ width:50px; height:20px; margin-top:12px; margin-left:8px; border:none; border-bottom:solid 1px; } .but{ width:70px; height:35px; border-style:none; border-radius:8px; background:#00a4ff; color:#fff; letter-spacing:0.1em; margin:10px; } article section:first-child div:last-child{ width:70px; height:70px; float:left; margin-top:15px; margin-bottom:15px; } #hex{ width:100px; height:20px; margin-left:10px; border:none; border-bottom:solid 1px; } article section:last-child div:first-child{ width:215px; } article section:last-child div:last-child{ width:70px; height:70px; margin:5px 10px; } span{ color:red; } footer{ color:#808080; font-size:14px; text-align:center; line-height:26px; height:105px; margin-bottom:30px; letter-spacing:0.1em; }</style> </head> <body> <div id=father> <header> <h2>颜色值转换</h2> <a href="https://i.loli.net/2019/12/17/M2fkoFZPYHUSKRC.gif" target="_blank">使用</a> </header> <article> <section> <div> <div> <input class="rgb" type="text" maxLength="3" value="0"/> <input class="rgb" type="text" maxLength="3" value="164"/> <input class="rgb" type="text" maxLength="3" value="255"/> </div> <input class="but" onclick="showHex()" type="button" value="转换"/> <span></span> </div> <div id="color1"></div> </section> <div style="display:block;clear:both;"></div> <section> <div> <input id="hex" type="text" maxLength="7" value="#00a4ff"/> <input class="but" onclick="showRgb()" type="button" value="转换"/> </div> <span style="width:100px;margin:5px 20px;"></span> <div id="color2"></div> </section> </article> <footer> <p>颜色值转换 | RGB与16进制互转<br/>by 搬砖小哥 ㉢19/11/29<br/>使用方法:<br/>输入值，点击“转换”按钮<br/>之后点击颜色值或颜色块即可复制颜色值</p> </footer> </div> <script type="text/javascript"> var all=document.getElementsByTagName("article"); var i; //显示颜色 var color1=document.getElementById("color1"); var color2=document.getElementById("color2"); //转换后的颜色值 var text=document.getElementsByTagName("span"); //RGB var rgb=document.getElementsByClassName("rgb"); //16进制 var hex=document.getElementById("hex"); function showHex(){ var list=[]; var a,b,c; var hex="#"; var code="0123456789abcdef"; list.push(rgb[0].value); list.push(rgb[1].value); list.push(rgb[2].value); for(i=0;i<3;i++){ if(list[0]!=parseInt(list[0])){ alert("请输入数字0~255"); rgb[i].value=""; return; }else if(parseInt(list[0])<0 || parseInt(list[0])>=256){ alert("请输入数字0~255"); rgb[i].value=""; return; }else{ a=parseInt(list[0]); } } for(i=0;i<3;i++){ a=parseInt(list[i]); //末位 b=a%16; //前位 c=(a-b)/16; hex+=code.substr(c,1)+code.substr(b,1); } //设置文字、颜色 color1.style.background=hex; text[0].innerText=hex; } function showRgb(){ var rgbCode=""; var count=0; var code="0123456789abcdef"; var a; if(hex.value.indexOf("#")==-1){ alert("请输入16进制值#0~f\n如：#00a4ff"); return; } a=hex.value.substring(1).toLowerCase(); if(a.length!=6){ alert("位数为7位\n如：#00a4ff"); return; } for(i=0;i<a.length;i++){ if(code.indexOf(a[i])!=-1) { count++; } } if(count<6){ alert("输入字符为#0~f\n如：#00a4ff"); return; } for(i=0;i<3;i++){ //每次取两位 //前一位赋给b //后一位赋给c b=a.substr(i*2,1); c=a.substr(i*2+1,1); rgbCode+=(code.indexOf(b)*16+code.indexOf(c)).toString(); if(i<=1){ rgbCode+=","; } } //设置文字、颜色 color2.style.background=hex.value; text[1].innerText=rgbCode; } text[0].onclick=function(){ if(text[0].innerHTML!=""){ copy(text[0].innerHTML); } } color1.onclick=function(){ if(text[0].innerHTML!=""){ copy(text[0].innerHTML); } } text[1].onclick=function(){ if(text[1].innerHTML!=""){ copy(text[1].innerHTML); } } color2.onclick=function(){ if(text[1].innerHTML!=""){ copy(text[1].innerHTML); } } //复制 function copy(str){ var textArea=document.createElement("textarea"); textArea.innerHTML=str; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); toast('颜色值复制成功^_^'); document.body.removeChild(textArea); } //吐司 function toast(msg){ var time=2300; var m=document.createElement('div'); m.innerHTML=msg; m.style.cssText="max-width:60%;letter-spacing:0.15em;min-width:200px;height:60px;color:white;line-height:60px;text-align:center;border-radius:6px;position:fixed;left:50%;top:50%;background:#D3D3D3;font-size:15px;transform:translate(-50%,-50%);-webkit-transform:translate(-50%,-50%);-moz-transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);-o-transform:translate(-50%,-50%);z-index:9999;"; all[0].style.opacity=0.1; document.body.appendChild(m); setTimeout(function(){ document.body.removeChild(m); all[0].style.opacity=1; },time); }</script> </body></html>
适用：电脑
使用方法：复制源码，右键-新建文本文档，打开文本文档，粘贴源码，文件-另存为，选择编码为UTF-8，命名为 xx.html,保存，双击“xx.html”运行
微信扫一扫
关注该公众号