堆栈内存溢出
  繁体   English   中英

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

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

 原文  2015-12-09 02:21:58  2   4    javascript/ html/ css

问题描述

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

第一个单元格应为黑色，最后一个单元格应为白色。 怎么做。 单击一个单元格时，该单元格的颜色应填充到一个不同的Box（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;">

4 个解决方案

解决方案1
 1 已采纳  2015-12-09 02:46:51

颜色由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; }

解决方案2
 0  

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

  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>

解决方案3
 0  2015-12-09 02:55:35

您的代码中的问题似乎是变量'clr'缺少数字。 在计算下一种颜色时，将其视为数字。

基本上，您从0x000000开始，并在循环中添加0x28f5。 0x000000 + 0x28f5 = 0x28f5（将转换为以10为基数= 10485，这是您为背景色分配提供的值），当您要使用背景色分配时，您想使用'6'（六个）数字。

您可以编写一个小函数来计算并填充最终被分配为背景色的'clr'。

解决方案4
 0  2015-12-09 04:00:41

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

尝试这个 ： 

  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;">

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 创建一个10x10的单元格字段 制作具有 10x10 单元格的表格，每个单元格的内部编号从 1 到 100 对表格单元格中的颜色进行动画处理 将 base 10 colors 或 hex colors 转换为 JavaScript 中的 ANSI colors？ 使用jQuery，每次点击时div的Divs颜色为黑色和白色 根据条件分配表格单元格颜色 - JavaScript 使用JavaScript将彩色图像转换为黑白图像 javascript中的乘法表应该显示一个从10到19开始的表 使用 DOM 结合 For 循环来创建表； 用数组填充表？ - JavaScript 如何找到 5-10 colors 与给定颜色的阴影，它们在视觉上都是不同的（在 JavaScript 中）？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM