01.07.2018, 21:31
|
|
Интересующийся
|
|
Регистрация: 06.10.2017
Сообщений: 24
|
|
|
Как раскрасить 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);
|
|
01.07.2018, 21:44
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,071
|
|
Роман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>
|
|
01.07.2018, 21:47
|
|
Профессор
|
|
Регистрация: 07.11.2013
Сообщений: 4,662
|
|
table += '<td style="background-color:hsl(' + 360 * Math.random() + ',100%,50%)">' + i + ':' + j + '</td>';
|
|
01.07.2018, 22:11
|
 |
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
<!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>
|
|
01.07.2018, 22:22
|
|
Интересующийся
|
|
Регистрация: 06.10.2017
Сообщений: 24
|
|
Работает, спасибо большое  |
|
02.07.2018, 00:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,071
|
|
Роман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"; //установили стиль выбранной ячейке
}
|
|
02.07.2018, 01:00
|
 |
Профессор
|
|
Регистрация: 25.10.2016
Сообщений: 1,005
|
|
|
рони,
splice перемещает все элементы массива после удаляемого. Лучше перекидывать последний элемент на его место, и уменьшать длину массива на 1
|
|
02.07.2018, 01:11
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,071
|
|
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>
Последний раз редактировалось рони, 02.07.2018 в 01:14.
|
|
|
|
