RAL в RGB/HEX с помощью Javascript

Я новичок, когда речь идет о JavaScript ... Я получил проект, который требует следующего:RAL в RGB/HEX с помощью Javascript

Преобразование из RAL-цвета-кодов для RGB/HEX (JavaScript) ,

Я overthought что и наткнулся на некоторые идеи:

1.) Сделайте сложный список, который наследует все RAL-коды (около 213+)

2.) быть сухой - получить RAL-к -RGB/HEX-информация: http://www.ralcolor.com/

Ну - как я уже сказал: Я новичок в JavaScript ...

было бы очень хорошо, если бы вы могли бы дать мне несколько советов, чтобы начать кодирование, поскольку я медиа-дизайнер, а не программист :(

С наилучшими пожеланиями, ненормальный

источник

2014-01-31 daftpanda

Легче всего вы могли бы сделать, это разобрать таблицу с сайта ralcolor.com и получить значения из td, который даст вам значение ral-color hex и rgb –

хорошо, спасибо за помощь =) Я попытаюсь выяснить, как разобрать html-код из веб-страниц ite;) - Вы порекомендовали бы источник учебника или что-то подобное? – daftpanda

Вот краткий пример разбора саму таблицу. Это мой стандартный шаблон blank.html файл с добавлением 4 строк таблицы и кода в mInit.

Несколько вещей, чтобы рассмотреть, в частности, нет порядка:

Кажется, что каждый второй строки таблицы пуста
Значения RGB используют - в качестве разделителя, а не ,
It кажется маловероятным, что вам нужен шестнадцатеричный код и код rgb. Если вы даете (некоторому?) Браузеру код #, он преобразует его внутренне в код rgb(). (Chrome 32.0.1700.102 m) Если это подходит, просто возьмите шестнадцатеричный код, так как он не нуждается в изменении с помощью RegEx, как это делает значение 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>

источник

2014-01-31 11:58:47 enhzflep

Вау! Спасибо ОЧЕНЬ БОЛЬШЕ enhzflep для ваших усилий! Мне нужно некоторое время, чтобы проработать ваш код, чтобы понять все это;) Я бы дал вам +1, но не имеет достаточного количества баллов для этого :( – daftpanda

: grin: удовольствие, daftpanda. достаточно, если код поможет вам, я преуспел! – enhzflep

спасибо enhzflep! Я не могу считать само собой разумеющимся, что кто-то помогает мне с такими большими усилиями, как вы! =) – daftpanda

RAL в RGB/HEX с помощью Javascript

ответ

Смежные вопросы