Как раскрасить 6 рандомных квадратов из таблицы
Мне нужно что-бы у меня в таблице (10 на 10) разукрасились n рандомных квадратов. Помогите пожалуйста, буду очень благодарен:) :)
<div id="table"></div> function generateTable(row, column){ var table = '<table>'; for(var i=1;i<=row;i++){ table += '<tr>'; for(var j=1;j<=column; j++){ table += '<td>' + i + ':' + j + '</td>'; } table += '</tr>'; } table += '</table>'; document.getElementById('table').innerHTML = table; } generateTable(10,10); |
Роман1479,
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> </head> <body> <div id="table"></div> <script> function generateTable(row, column){ var table = '<table>'; for(var i=1;i<=row;i++){ table += '<tr>'; for(var j=1;j<=column; j++){ table += '<td>' + i + ':' + j + '</td>'; } table += '</tr>'; } table += '</table>'; document.getElementById('table').innerHTML = table; } generateTable(10,10); function getColor() { return "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6); } var td=[].slice.call(document.querySelectorAll('td'),0), n = 6; for (var i = 0; i < n; i++) { var k = Math.random() * td.length|0; k = td.splice(k,1)[0]; k.style.backgroundColor = getColor(); } </script> </body> </html> |
table += '<td style="background-color:hsl(' + 360 * Math.random() + ',100%,50%)">' + i + ':' + j + '</td>'; |
<!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> </head> <body> <div id="table"></div> <script> function generateTable(row, column){ var table = '<table>'; for(var i=1;i<=row;i++){ table += '<tr>'; for(var j=1;j<=column; j++){ table += '<td>' + i + ':' + j + '</td>'; } table += '</tr>'; } table += '</table>'; document.getElementById('table').innerHTML = table; } generateTable(10,10); [...document.querySelectorAll('td')].sort(_=>Math.random() - 0.5).slice(0,6).forEach(el=>el.style.backgroundColor='red'); </script> </body> </html> |
Работает, спасибо большое:dance:
|
Роман1479,
var td=[].slice.call(document.querySelectorAll('td'),0),//создали массив из ячеек n = 6; for (var i = 0; i < n; i++) {//цикл n раз var k = Math.random() * td.length|0; // сгенерировали случайный индекс, td.length всегда разная, меньше чем была k = td.splice(k,1)[0];// выкусили из массива одну ячейку по индексу, массив td стал меньше на один элемент, мы физическки не можем выбрать одну и туже ячейку второй раз k.style.backgroundColor = "#000000"; //установили стиль выбранной ячейке } |
рони,
splice перемещает все элементы массива после удаляемого. Лучше перекидывать последний элемент на его место, и уменьшать длину массива на 1 |
Alexandroppolus,
так? <!DOCTYPE html> <html> <head> <title>Untitled</title> <meta charset="utf-8"> <style type="text/css"> </style> </head> <body> <div id="table"></div> <script> function generateTable(row, column){ var table = '<table>'; for(var i=1;i<=row;i++){ table += '<tr>'; for(var j=1;j<=column; j++){ table += '<td>' + i + ':' + j + '</td>'; } table += '</tr>'; } table += '</table>'; document.getElementById('table').innerHTML = table; } generateTable(10,10); function getColor() { return "#" + ("000000" + (Math.random() * 16777215 | 0).toString(16)).slice(-6); } var td=[].slice.call(document.querySelectorAll('td'),0), n = 6; for (var i = 0; i < n; i++) { var k = Math.random() * td.length|0, el = td[k]; td[k] = td.pop(); td[k] == el && td.length--; el.style.backgroundColor = getColor(); } </script> </body> </html> |
Часовой пояс GMT +3, время: 09:11. |