RAL 到 RGB/HEX 通过 javascript

【问题标题】：RAL to RGB/HEX via javascriptRAL 到 RGB/HEX 通过 javascript
【发布时间】：2014-01-31 09:28:08
【问题描述】：

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

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

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

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

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

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

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

最好的问候， 傻逼

【问题讨论】：

  • 您可以做的最简单的事情是从 ralcolor.com 网站解析表格并获取 td 的值，这将为您提供 ral-color hex 和 rgb 值
  • 好的，感谢您的帮助 =) 我会尝试找出如何从网站解析 html 代码 ;) - 你会推荐一个教程源或类似的东西吗？

标签： javascript


【解决方案1】：

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

需要考虑的一些事情，没有特别的顺序：

  • 似乎每个第二个表格行都是空的
  • rgb 值使用- 作为分隔符，而不是,
  • 您似乎不太可能需要十六进制代码和 rgb 代码。如果你给（一些？）浏览器一个 # 代码，它会在内部将其转换为 rgb() 代码。 （Chrome 32.0.1700.102 m）如果合适，只需获取十六进制代码，因为它不需要像 rgb 值那样使用正则表达式进行更改。
  • 您可以查看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

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&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>
</body>
</html>

【讨论】：

  • 哇！非常感谢 enhzflep 的努力！我需要一些时间来处理你的代码来理解整个事情；）我会给你一个+1，但没有足够的分数来这样做:(
  • ：咧嘴笑：很高兴，愚蠢的熊猫。情怀绰绰有余。如果代码对你有帮助，我就成功了！
  • 谢谢 enhzflep！我不能想当然地认为有人像你一样努力帮助我！ =)
  • 如果您只需要找到几种颜色，只需将 RALs 放入 textarea 中，您将在输出中获得 rgb：jsfiddle.net/us325451/1/embedded/result
  • @gregmatys - 这是一个很好的解决方案。您应该考虑将其作为答案发布，因为它正确执行从 RAL 代码到 RGB 代码的转换，而我的代码仅依赖于已经存在的数据。你的方法对我来说似乎要好得多。 :)
猜你喜欢
  • 2013-03-28
  • 1970-01-01
  • 2012-04-03
  • 2020-08-22
  • 2015-06-16
  • 2012-03-02
  • 2016-01-01
  • 2011-10-04
  • 2015-09-22
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode