RAL到RGB/HEX通過javascript

我是初學者，當涉及到的JavaScript ...我得到它需要以下項目：從RAL色碼爲RGB/HEXRAL到RGB/HEX通過javascript

轉換（JavaScript的）。

我overthought是和整個一些想法來：

1）做一個複雜的列表，它繼承了所有RAL-碼（約213+）

2）待幹 - 獲得RAL-到-RGB/HEX-信息來源：http://www.ralcolor.com/

嗯 - 我說：我在javascript初學者...

這將是非常好的，如果你能給我一些提示，開始編碼，因爲我是媒體設計師，而不是程序員:(

最好的問候， daft

來源

2014-01-31 daftpanda

你可以做最簡單的事情是從ralcolor.com網站分析表，並獲得價值的td's，它會給你ral-color十六進制和rgb值 –

好吧，謝謝你的幫助=）我會嘗試找出如何解析網頁的html代碼ite;） - 你會推薦一個教程來源或類似的東西？ – daftpanda

下面是解析表本身的一個簡短的例子。這是我的標準模板blank.html文件，增加了4行表和mInit中的一些代碼。

考慮，在沒有特定的順序有幾件事情：

似乎每第二個錶行是空
RGB值使用-作爲分隔符，而不是,
它似乎不太可能你想要十六進制代碼和rgb代碼。如果你給（some？）瀏覽器一個＃代碼，它將它內部轉換爲一個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

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

：咧嘴笑：一種快樂，daftpanda。情感超過了如果代碼可以幫助你，我已經成功了！ – enhzflep

謝謝enhzflep！我不能想當然地認爲有人像你一樣幫助我做出這樣的努力！=） – daftpanda

RAL到RGB/HEX通過javascript

回答

相關問題