RGB

RGB

关注
发信
关注(28)粉丝(399)

通过javascript RAL到RGB / HEX

本文介绍了通过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信息：

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进行更改。

  • 你可以浏览，了解我使用的各种功能/属性的文档。

  • 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&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>

这篇关于通过javascript RAL到RGB / HEX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

10-22 01:57
Powered by LMLPHP ©2024 RGB 0.004385