javascript - RAL 到 RGB/HEX 通过 javascript

标签 javascript

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

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

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

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

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

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

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

最好的问候， 愚蠢的

最佳答案

这是一个解析表格本身的简短示例。这是我的标准模板 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>

关于javascript - RAL 到 RGB/HEX 通过 javascript，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21476457/

上一篇：javascript - Dart 中的镜子不适用于所有元素

下一篇：javascript - Angular : Add ngClick from js

相关文章：

javascript - 在 ejs 中有两个选项卡，当我返回到原始选项卡时它停留在第二个选项卡上，任何建议表示赞赏

javascript - XML header 导致服务器错误 500(即使被注释掉!)

javascript - typescript for 循环不执行

javascript - 从 html 中剥离邮件正文，并使用 Javascript 保留格式

javascript - 无法正确地将图像副本从一个 Canvas 复制到另一 Canvas

JavaScript 未按要求工作

javascript - 使用函数内检索和更新的数据更新数组

javascript - 序列化事务批量更新，然后批量创建

javascript - 是否可以动态编码/解码上传的文件？

php - 将 $.post 到 Google 电子表格是个好主意吗？

©2024 IT工具网  联系我们