javascript - RAL 到 RGB/HEX 通过 javascript

Question

我是 javascript 的初学者...我有一个项目需要以下内容:

从 RAL 颜色代码到 RGB/HEX (javascript) 的转换。

我想多了，想到了一些想法:

1.) 制作一个继承所有 RAL 代码(大约 213+)的复杂列表

2.) 干燥 - 从以下位置获取 RAL 到 RGB/HEX 信息:http://www.ralcolor.com/

嗯 - 正如我所说:我是 javascript 的初学者......

如果你能给我一些开始编码的提示，那就太好了，因为我是一名媒体设计师，而不是程序员:(

最好的问候，愚蠢的

Answer 1

这是一个解析表格本身的简短示例。这是我的标准模板 blank.html 文件，添加了 4 行表格和 mInit 中的一些代码。

需要考虑的几件事，排名不分先后:

• 似乎每第二个表格行都是空的
• rgb 值使用- 作为分隔符，而不是,
• 您似乎不太可能需要十六进制代码和 rgb 代码。如果您给(某些？)浏览器一个#代码，它会在内部将其转换为 rgb() 代码。 (Chrome 32.0.1700.102 m)如果合适，只需获取十六进制代码，因为它不需要像 rgb 值那样使用 RegEx 进行更改。
• 你可以四处看看http://w3schools.com用于记录我使用过的各种函数/属性。

输出:(摘录)

There are 4 rows in the table
RAL 7046: rgb: 130,137,143 - hex: #82898F
RAL 7047: rgb: 208,208,208 - hex: #D0D0D0

/////////////////////////////////////////////////////////////
////    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;
}

<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&nbsp;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>