使用javascript的网页安全色

Question

我想通过使用javascript显示带有所有网络安全色及其值的表格。我的功能无法正常运行。首先，它跳转到另一页，我不知道如何显示颜色值

function display() {

    document.write("<table><tr>");   

var hexarr = new Array("00", "33", "66", "99", "CC", "FF"); 
var currcolor = "#";  

for(red=0; red<6; red++){ 
  for(green=0; green<6; green++){ 
    for(blue=0; blue<6; blue++){ 
      currcolor = "#" + hexarr[red] + hexarr[blue] + hexarr[green]; 
      document.write("<td bgcolor=" + currcolor + " title=" + currcolor + " 
height=100></td>"); 
    } 
    document.write("</tr><tr>"); 
  } 
} 

document.write("</tr></table>");



}

Answer 1

哇老派。

请勿使用document.write。它的设计旨在即时创建标记，而且效率很低。

您可以使用table = document.createElement("table")创建表，并使用row = table.insertRow()添加行，并使用cell = row.insertCell()将单元格添加到行。表格完成后，使用document.body.appendChild(table)将其添加到文档中，或者将其添加到包含元素的tableContainer.appendChild(table)

中。

要创建数组，请使用数组文字。例如hex = ["00", "33", "66", "99", "Cc", "Ff"]

要将颜色作为文本添加到表格单元格中，只需设置单元格textContent属性。但是，由于颜色范围很广，因此需要确保文本的颜色与背景的颜色不匹配。

您可以通过添加红色绿色和蓝色值来实现。如果它们添加到阈值以下，则将文本颜色设置为白色，否则设置为黑色。最好使用粗体。例如“ arial black”

该示例增加了文本颜色测试的rgb值，以说明人类感知的颜色敏感性（粗略估计）

function webSaveColorTable() {    
    const table = document.createElement("table");
    const hex = [0, 0x33, 0x66, 0x99, 0xCC, 0xFF];
    const toHex = val => val.toString(16).toUpperCase().padStart(2,"0");
    const width = 100, height = 55;
    for (const red of hex) {
       for (const green of hex) {
           const row = table.insertRow();
           for (const blue of hex) {
               const colBg = "#" + toHex(red) + toHex(green) + toHex(blue);
               const c = Object.assign(row.insertCell(), {textContent: colBg, width, height});
               Object.assign(c.style, {
                   backgroundColor: colBg,
                   color: red * 0.2 + green * 0.7 + blue * 0.1 > 128 ? "#000" : "#fff"
               });
           }
        }
     }
    document.body.appendChild(table);
} 

webSaveColorTable();

body {
   font-family: arial black;
}
td {
   text-align: center;
}