JS文件數組javascript在html頁面中退出數據

Question

我有一個包含兩列數據的js文件。西1具有十六進制代碼的顏色和第2欄有顏色（的代碼）的名稱：

// JavaScript Document 
/*Below lists the hex and equiv colour. 
*/ 
var mycolors = { 
"000000": "Black", 
"000080": "Navy Blue", 
"0000C8": "Dark Blue", 
"0000FF": "Blue", 
"000741": "Stratos", 
"001B1C": "Swamp", 

在我的HTML網頁，我有一個生成任何顏色的十六進制值點擊一個顏色選擇器。

我希望能夠使用該十六進制數在col1中查找外部js文件並從col2返回顏色名稱。

我對網絡所有東西的體驗是有限的，谷歌和試驗和錯誤都失敗了。

任何人都可以提供一個如何做到這一點的例子嗎？

<div class="paletteandbox"> 
    <div class="palette"> 
    <canvas width="234" height="199" id="canvas_picker"></canvas> </div> 
      <script type="text/javascript"> 
       var canvas = document.getElementById('canvas_picker').getContext('2d'); 
    // create an image object and get it’s source 
       var img = new Image(); 
       img.src = 'picker3hexagon.gif'; 
    // copy the image to the canvas 
       $(img).load(function(){ 
       canvas.drawImage(img,0,0); 
       }); <!-- OK --> 

    // http://www.javascripter.net/faq/rgbtohex.htm 
       function rgbToHex(R,G,B) {return toHex(R)+toHex(G)+toHex(B)} 
       function toHex(n) { 
       n = parseInt(n,10); 
       if (isNaN(n)) return "00"; 
       n = Math.max(0,Math.min(n,255)); 
       return "ABCDEF".charAt((n-n%16)/16) + "ABCDEF".charAt(n%16); 
       } 
    $('#canvas_picker').click(function(event){ 
     // getting user coordinates 
     var x = event.pageX - this.offsetLeft; 
     var y = event.pageY - this.offsetTop; 
     // getting image data and RGB values 
     var img_data = canvas.getImageData(x, y, 1, 1).data;<!-- OK --> 
     var R = img_data[0]; 
     var G = img_data[1]; 
     var B = img_data[2]; var rgb = R + ',' + G + ',' + B; 
     // convert RGB to HEX 
     var hex = rgbToHex(R,G,B); 
     // making the color the value of the input 
     $('#rgb input').val(rgb); 
     $('#hex input').val('#' + hex); 
     $("#path3349").css("fill", "#" + hex); 
     $('#hex').val('#' + hex); 
    }); 
</script> 
</div> 
<!-- palette--> 
<div class="box"> 
<script src="colourpicker.js"> 
var colorhex = hex 
var colorname = mycolors[colorhex]; 
</script> 
    Selected Background Colour: 
    <div id="colorname"><input type="text" readonly="readonly" /></input></div> 
    Background Colour Codes: 
    <div id="hex"><input type="text" readonly="readonly" /></input>HEX</div> 
    <div id="rgb"><input type="text" readonly="readonly" /></input>RGB</div> 
</div> <!-- box--> 
</div> <!-- palette and box--> 

Answer 1

，因爲你的代碼是不工作我已經略有改變，但它會給你如何從你的對象看它和使用它的想法。

• 你需要的部分是： VAR englishColorName = mycolors [關鍵]

，其中關鍵是你的十六進制值。所以你用key值查看你的對象。

你的對象在外部js文件中定義的事實是無關緊要的，只要它在這個代碼之前加載它將運行相同。

var mycolors = { 
 
    "000000": "Black", 
 
    "000080": "Navy Blue", 
 
    "0000C8": "Dark Blue", 
 
    "0000FF": "Blue", 
 
    "000741": "Stratos", 
 
    "001B1C": "Swamp" 
 
} 
 

 
for (var key in mycolors) { 
 
    //console.log("Key: ", key); 
 
    //console.log("Color: ", mycolors[key]); 
 

 
    $('#colorsSelect') 
 
    .append($("<option></option>") 
 
     .attr("value", key) 
 
     .text(mycolors[key])); 
 
} 
 

 
var colorhex = hex 
 
var colorname = mycolors[colorhex]; 
 

 

 
// http://www.javascripter.net/faq/rgbtohex.htm 
 
function rgbToHex(R, G, B) { 
 
    return toHex(R) + toHex(G) + toHex(B) 
 
} 
 

 
function convertHex(hex){ 
 
    hex = hex.replace('#',''); 
 
    r = parseInt(hex.substring(0,2), 16); 
 
    g = parseInt(hex.substring(2,4), 16); 
 
    b = parseInt(hex.substring(4,6), 16); 
 

 
    result = 'rgba('+r+','+g+','+b+')'; 
 
    return result; 
 
} 
 

 
function toHex(n) { 
 
    n = parseInt(n, 10); 
 
    if (isNaN(n)) return "00"; 
 
    n = Math.max(0, Math.min(n, 255)); 
 
    return "ABCDEF".charAt((n - n % 16)/16) + "ABCDEF".charAt(n % 16); 
 
} 
 

 
$("#colorsSelect").change(function() { 
 
    var hex = $(this).val(); 
 
    var rgb = convertHex(hex); 
 
    $('#hex input').val('#' + hex); 
 
    $('#rgb input').val(rgb); 
 
}); 
 

 
/* 
 
$('#canvas_picker').click(function(event) { 
 
    // getting user coordinates 
 
    var x = event.pageX - this.offsetLeft; 
 
    var y = event.pageY - this.offsetTop; 
 
    // getting image data and RGB values 
 
    var img_data = canvas.getImageData(x, y, 1, 1).data; <!-- OK --> 
 
    var R = img_data[0]; 
 
    var G = img_data[1]; 
 
    var B = img_data[2]; 
 
    var rgb = R + ',' + G + ',' + B; 
 
    // convert RGB to HEX 
 
    var hex = rgbToHex(R, G, B); 
 
    // making the color the value of the input 
 
    $('#rgb input').val(rgb); 
 
    $('#hex input').val('#' + hex); 
 
    $("#path3349").css("fill", "#" + hex); 
 
    $('#hex').val('#' + hex); 
 
}); 
 
*/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="paletteandbox"> 
 
    <div class="palette"> 
 
    <canvas width="234" height="199" id="canvas_picker"></canvas> 
 
    </div> 
 
</div> 
 
<!-- palette--> 
 
<div class="box"> 
 
    Selected Background Colour: 
 

 
    <select id="colorsSelect"> 
 
    <option value="-1">--Select a color--</option> 
 
    </select> 
 

 
    <br> 
 
    <br>Converted Background Colour Codes: 
 
    <div id="hex"> 
 
    HEX: 
 
    <input type="text" readonly="readonly" /> 
 
    </div> 
 
    <div id="rgb"> 
 
    RGB: 
 
    <input type="text" readonly="readonly" /> 
 
    </div> 
 
    <!-- box--> 
 
</div> 
 
<!-- palette and box-->