javascript实现的web安全色

Question

​

​

我想通过使用javascript显示一个带有所有web安全颜色及其值的表格。我的函数不能很好地工作。首先，它会跳转到另一个页面，而我不知道如何显示颜色值

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“

该示例增加了文本颜色测试的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;
}

​