веб-безопасный цвет по 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"]*, 1014 *

Чтобы добавить цвет как текст в ячейки таблицы, вы просто устанавливаете свойство ячейки 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;
}