通过javascript RAL到RGB / HEX [英] RAL to RGB/HEX via javascript
本文介绍了通过javascript RAL到RGB / HEX的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是javascript初学者...我有一个项目需要以下内容：
I'm a beginner when it comes to javascript...I got a project which requires the following:
从RAL-Color-Codes转换为RGB / HEX（javascript）。
Conversion from RAL-Color-Codes to RGB/HEX (javascript).
我推翻了这个并且遇到了一些想法：
I overthought that and came across some ideas:
1。）复杂化继承所有RAL代码（大约213 +）
1.) Make a complex list which inherits all RAL-Codes (around 213+)
2。）的列表是干的 - 从以下方式获取RAL到RGB / HEX信息： http://www.ralcolor.com/
2.) to be DRY - get RAL-to-RGB/HEX-Information from: http://www.ralcolor.com/
嗯 - 如同我说：我是javascript初学者...
Well - as I said: I'm a beginner in javascript...
如果你能给我一些提示来开始编码，那将是非常好的，因为我是一个媒体设计师，而不是程序员:(
It would be very nice if you could give me some hints to start the coding, as I'm a media-designer, not a programmer :(
祝你好运，
daft
Best regards, daft
推荐答案
这是一个解析表本身的简短示例。这是我的标准模板 blank.html 文件，增加了4行表和一些mInit中的代码。
Here's a short example of parsing the table itself. This is my standard template blank.html file with the addition of 4 rows of the table and some code in mInit.
要考虑的一些事项，在n o特定订单：
A few things to consider, in no particular order:
- 似乎每个第二个表行都是空的
- rgb值使用
-作为分隔符，而不是， - 似乎不太可能你想要十六进制代码和rgb代码。如果你给（某些？）浏览器一个#code，它会在内部将它转换为rgb（）代码。 （Chrome 32.0.1700.102 m）如果这是合适的，只需抓取十六进制代码，因为它不需要像rgb值一样使用RegEx进行更改。
- 你可以浏览 http://w3schools.com ，了解我使用的各种功能/属性的文档。
- It seems that every 2nd table row is empty
- The rgb values use the
-as a separator, rather than, - It seems unlikely that you'd want the hex code and the rgb code. If you give the(some?) browser a # code, it converts it internally to an rgb() code. (Chrome 32.0.1700.102 m) If this is suitable, just grab the hex-code, since it doesn't need to be altered with a RegEx like the rgb value does.
- you can have a look around http://w3schools.com for documentation of the various functions/attributes I've used.
输出：（摘录）
There are 4 rows in the table
RAL 7046: rgb: 130,137,143 - hex: #82898F
RAL 7047: rgb: 208,208,208 - hex: #D0D0D0
HTML：
<!DOCTYPE html>
<html>
<head>
<script>
/////////////////////////////////////////////////////////////
//// U n u s e d i n t h i s s a m p l e
/////////////////////////////////////////////////////////////
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
function toggleClass(element, newStr)
{
var index=element.className.indexOf(newStr);
if ( index == -1)
element.className += ' '+newStr;
else
{
if (index != 0)
newStr = ' '+newStr;
element.className = element.className.replace(newStr, '');
}
}
function forEachNode(nodeList, func)
{
var i, n = nodeList.length;
for (i=0; i<n; i++)
{
func(nodeList[i], i, nodeList);
}
}
/////////////////////////////////////////////////////////////
//// R e q u i r e d b y t h i s s a m p l e
/////////////////////////////////////////////////////////////
function byId(e){return document.getElementById(e);}
window.addEventListener('load', mInit, false);
function mInit()
{
var tbl = byId('colTable');
var rows = tbl.rows
var output = '';
var i, n, curRowNum, curRowOfCells;
output = "There are " + rows.length + " rows in the table" + "<br>";
for (i=0; i<rows.length; i++)
{
curRowOfCells = rows[i].cells;
if (rows[i].cells[0].childNodes.length != 0)
{
var curRalCode, curRgb, curHex;
curRalCode = rows[i].cells[0].querySelectorAll('p span')[0].innerHTML;
curRgb = rows[i].cells[1].childNodes[0].innerHTML;
// change 130-137-143 into 130,137,143
curRgb = curRgb.replace(/-/g, ',');
curHex = rows[i].cells[2].childNodes[0].innerHTML;
output += curRalCode + ": " + "rgb: "+curRgb+" - hex: " + curHex + "<br>";
}
}
byId('output').innerHTML = output;
}
</script>
<style>
</style>
</head>
<body>
<div id='output'></div>
<table id='colTable'>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td></tr>
<tr>
<td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL
7046</span></p></td>
<td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">130-137-143</span></td>
<td style="BACKGROUND-COLOR: rgb(130,137,143)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#82898F</span></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 2</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 2</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 2</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris tele 2</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele
grigio 2</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(130,137,143)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 2</span></p></td></tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td></tr>
<tr>
<td style="HEIGHT: 50px; PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">RAL
7047</span></p></td>
<td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">208-208-208</span></td>
<td style="BACKGROUND-COLOR: rgb(208,208,208)" align="center"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">#D0D0D0</span></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrau 4</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrey 4</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegris 4</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Gris
tele 4</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Tele
grigio 4</span></p></td>
<td style="PADDING-BOTTOM: 0.75pt; TEXT-ALIGN: center; PADDING-TOP: 0.75pt; PADDING-LEFT: 0.75pt; PADDING-RIGHT: 0.75pt; BACKGROUND-COLOR: rgb(208,208,208)">
<p class="MsoNormal"><span style="FONT-SIZE: 10pt; FONT-FAMILY: Arial">Telegrijs 4</span></p></td></tr>
</table>
</body>
</html>
这篇关于通过javascript RAL到RGB / HEX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
