自己开发经常用到颜色转化,就写了一个颜色相互转换的小工具

tech2023-05-29  49

新建txt文本,复制粘贴代码,修改文件名为.html,打开即可使用。

<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Color Change</title> </head> <body> <script> function showRGB() { hexcode = "#"; color = document.getElementsByName("r1e")[0].value.split(', ') for (x = 0; x < 3; x++) { var n = Number(color[x]); if (n == "") n = "0" if (parseInt(n) != n) return alert("请输入数字!"); if (n > 255) return alert("数字在0-255之间!"); var c = "0123456789ABCDEF", b = "", a = n % 16; b = c.substr(a, 1); a = (n - a) / 16; hexcode += c.substr(a, 1) + b } document.getElementById("color1").bgColor = a_mo2.innerHTML = hexcode } function showRGB2() { var a = document.getElementsByName("rgb2")[0].value; if (a.substr(0, 1) == "#") a = a.substring(1); var len = a.length; if (len != 6 && len != 3) return alert("十六进制颜色码为六位或三位!"); else if (/[^0-9a-f]/i.test(a)) return; document.getElementById("color2").bgColor = "#" + a; a = a.toLowerCase(); b = new Array(); for (x = 0; x < 3; x++) { b[0] = len == 6 ? a.substr(x * 2, 2) : a.substr(x * 1, 1) + a.substr(x * 1, 1); b[3] = "0123456789abcdef"; b[1] = b[0].substr(0, 1); b[2] = b[0].substr(1, 1); b[20 + x] = b[3].indexOf(b[1]) * 16 + b[3].indexOf(b[2]) } a_mo3.innerHTML = b[20] + ", " + b[21] + ", " + b[22]; } function getkey(e, n) { var keynum; if (window.event) keynum = e.keyCode; else if (e.which) keynum = e.which; if (keynum == 13) { if (n == 0) showRGB(); else showRGB2(); } } </script> <td valign="top" class="area"> <table style="border-collapse: collapse" bordercolor=#d9d9d9 cellspacing=0 cellpadding=8 width=100% bgcolor=#fcfcfc border=1> <tbody> <tr> <td> <div>RGB颜色值转换成十六进制颜色码:</div> <table border="0" cellpadding="0" cellspacing="4"> <tbody> <tr> <td width="200"> <input style="width: 93px;" name="r1e" value="24, 0, 255" class="rle" onKeyDown="getkey(event,0)"> <input onclick="showRGB()" type="button" value="转换" name="button"> </td> <td id="color1" width="50"></td> </tr> </tbody> </table> <div id="a_mo2"> </div> </td> </tr> <tr> <td> <div>十六进制颜色码转换成RGB颜色值:</div> <table border="0" cellpadding="0" cellspacing="4"> <tbody> <tr> <td width="200"> <input style="width: 93px;" name="rgb2" value="#CC00FF" size="8" maxlength="7" onKeyDown="getkey(event,1);"> <input onclick="showRGB2()" type="button" value="转换" name="button"> </td> <td id="color2" width="50"></td> </tr> </tbody> </table> <div id="a_mo3"> </div> </td> </tr> </tbody> </table> </body> </html>
最新回复(0)