使用javascript创建10*10表，并使用从黑色到白色的颜色填充单元格

Create 10*10 table using javascript and populate cells with colors from black to white

本文关键字：白色 黑色 颜色 单元格 填充 创建 javascript 使用      更新时间：2023-09-26

我使用JavaScript制作了10*10表。我想用颜色填充单元格。

在第一个单元格中应为黑色，在最后一个单元格中按顺序应为白色。如何做到这一点。单击一个单元格时，该单元格的颜色应填充在一个不同的框（div）中。我写了一些代码。它用颜色填充单元格，但颜色不是按顺序排列的。

这是代码

function Generate() {
  var row = document.getElementById('txtrow').value;
  var col = document.getElementById('txtcolumn').value;
  var divTable = document.getElementById('divTable');
  var str;
  var i, j;
  str = '<table border="1" width="100%">';
  var clr = 0x000000;
  for (i = 0; i < row; i++) {
    str += '<tr>';
    for (j = 0; j < col; j++) {
      str += '<td style="background-color:#' + clr + ';" onclick=change("#' + clr + '");>&nbsp;</td>';
      clr = clr + 0x28f5;;
    }
    str += '</tr>';
  }
  str += '</table>';
  divTable.innerHTML = str;
}
function change(v) {
  var div1 = document.getElementById('divText');
  div1.style.backgroundColor = v;
}
rows
<input type="text" id="txtrow" value="10" />
<br />
<br />colms
<input type="text" id="txtcolumn" value="10" />
<br />
<br />
<input type="button" value="Generate" onclick="Generate();">
<br />
<div style="width: 500px; height: 300px;" id="divTable"></div>
<div id="divText" style="border: solid 1px #000; width: 300px; height: 200px;">

颜色由3个组件组成，分别是红色、绿色和蓝色，它们在十六进制代码版本中各占一个字节（两个十六进制数字）。

要使灰度梯度从黑色变为白色，需要添加相同数量的红色、绿色和蓝色。此外，您需要提供正确格式的颜色。

我更改了您的代码，只增加灰色值。增量是根据行数和列数计算的。（浮点）灰度值将转换为一个整数，用于创建rgb颜色。

function Generate() {
     var row = document.getElementById('txtrow').value;
     var col = document.getElementById('txtcolumn').value;
     var divTable = document.getElementById('divTable');
     var str;
     var i, j;
     str = '<table border="1" width="100%">';
     var grey = 0;
     var increment = 255/(row * col);
     var greyInt;
     var color;
     for (i = 0; i < row; i++) {
       str += '<tr>';
       for (j = 0; j < col; j++) {
         greyInt = Math.floor(grey);
         color = 'rgb(' + greyInt + ',' + greyInt + ',' + greyInt +')';
         str += '<td style="background-color:' + color + ';" onclick=change(' + color + '");>&nbsp;</td>';
         grey += increment;
       }
       str += '</tr>';
     }
     str += '</table>';
     divTable.innerHTML = str;
   }
   function change(v) {
     var div1 = document.getElementById('divText');
     div1.style.backgroundColor = v;
   }

这是您需要的示例！（我不确定颜色随机算法。）

    function Generate()
{
    var row = document.getElementById('txtrow').value;
    var col = document.getElementById('txtcolumn').value;
    var divTable = document.getElementById('divTable');
    var str;
    var i, j;
    str = '<table border="1" width="100%">';
    for(i = 0; i < row; i++)
    {
        str += '<tr>';
        for (j = 0; j < col; j++){
            str += '<td style="background-color:'+coloralogoritm()+';");>&nbsp;</td>';
        }
        str += '</tr>';
    }
    str += '</table>';
    divTable.innerHTML = str;
}
  var r = 0;
  var g = 0;
  var b= 0;
function coloralogoritm(){
            r += parseInt(Math.random() * 10); 
            g += parseInt(Math.random() * 10); 
            b += parseInt(Math.random() * 10);
  return 'rgb('+r+','+g+','+b+')';
  }
<html>
<head>
</head>
<body>
rows <input type="text" id="txtrow" value="10"/><br /><br />
colms <input type="text" id="txtcolumn" value="10" /><br /><br />
<input type="button" value="Genrate" onclick="Generate();"><br />
<div style="width: 500px; height: 300px;" id="divTable"></div>
<div id="divText" style="border: solid 1px #000; width: 300px; height: 200px;">
  
</body>
</html>

代码中的问题似乎是变量"clr"使用数字。在计算下一种颜色时，它被视为一个数字。

基本上，您从0x000000开始，并在循环中添加0x28f5。0x000000+0x28f5=0x28f5（正在转换为基数10=10485，这是您为背景色分配提供的值）在使用背景色分配时，您希望使用"6"（六）位数字。

你可以写一个小函数来计算，也可以填充最后的clr，它被指定为背景色。

如果要使用十六进制颜色代码，应首先将数字转换为十六进制颜色模型字符串。

试试这个：

   function Generate() {
     var row = document.getElementById('txtrow').value;
     var col = document.getElementById('txtcolumn').value;
     var divTable = document.getElementById('divTable');
     //to work with any random col and row, we should compute the diffrence between 2 numbers.
     //this diffrence variable and clc number will keep just one number for green or blue or red
     //then we multiply it to 0x10101 for other colors.
     var diffrence = 0xFF / (row*col - 1);
     var str;
     var i, j;
     str = '<table border="1" width="100%">';
     var clr = 0x000000;
     for (i = 0; i < row; i++) {
       str += '<tr>';
       for (j = 0; j < col; j++) {
         //Convert number to hex color code(with defined function).
         //we will round the number here to avoid disordering the sequence
         var color = convertNummberToHexaColor(Math.round(clr) * 0x10101);
         str += '<td style="background-color:#' + color + ';" onclick=change("#' + color + '");>&nbsp;</td>';
         //your gap number was not what you want
         clr = clr + diffrence;
       }
       str += '</tr>';
     }
     str += '</table>';
     divTable.innerHTML = str;
   }
   function change(v) {
     var div1 = document.getElementById('divText');
     div1.style.backgroundColor = v;
   }
   //defining a function to convert our number
   function convertNummberToHexaColor(number){
     return ("000000"+number.toString(16)).substr(-6);  
   }
rows
<input type="text" id="txtrow" value="10" />
<br />
<br />colms
<input type="text" id="txtcolumn" value="10" />
<br />
<br />
<input type="button" value="Genrate" onclick="Generate();">
<br />
<div style="width: 500px; height: 300px;" id="divTable"></div>
<div id="divText" style="border: solid 1px #000; width: 300px; height: 200px;">

相关文章：