Задать вопрос
@Whynotia
javascript

Как сделать цвет и размер цифр в таблице случайными?

Приветствую. Мне нужно, чтоб цвет и размер цифр в ячейках всплывающей таблицы были случайными, как это сделать?
<!DOCTYPE html>
    <html lang="uk">
        <head>
            <meta charset="UTF-8">
            <title>JS Игра</title>
            
                <style>
                    #game td {
                    width: 50px; 
                    height: 50px; 
                    border: 1px solid rgb(0, 0, 0); 
                    text-align: center; 
                    cursor: pointer; 
                    }
                   .active {
                    background-color: lightgreen;
                    }

                </style>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>        
        </head>
        <body>
            <div id="game">
                <table class="field">
                </table>
            </div>
            <script>
 

                function drawGameFields(size) {
                    var field = $('.field');
                    var from = 1;
                    var to = Math.pow(size, 2);
                    var arr = [];;
                    arr = createArr(from, to);
                    createCells(arr, size, field);
                }
 
                function createArr(from, to) { 
                    var arr = [];
                    for (var i = from; i <= to; i++) {
                    arr.push(i); 
                    }
                    arr.sort(function compareRandom(a, b) { 
                    return Math.random() - 0.5;
                    });
                    return arr; 
                }
 
                function createCells(arr, size, field) {
                    field.html(function(index, element) {
                    var content = '';
                    var e = 0; 
                    for (var i = 0; i < size; i++) {
                    content += '<tr>';
                    for (var j = 0; j < size; j++) {
                    content += '<td>' + arr[e] + '</td>'; 
                    e++; 
                    }
                    content += '</tr>';
                    }
                    return content; 
                    });
                }

                var startSize = 3;
                newGame(startSize)
 
                function newGame(size) {
                    drawGameFields(size); 
                    var counter = 1; 
                    $('td').click(function(eventObject) { 
                    if ($(this).text() == counter) { 
                    $(this).addClass("active"); 
                    if (counter == size * size) { 
                    alert("Поздравляю! Следующий уровень?");
                    size++; 
                    newGame(size); 
                    } else {
                    counter++; 
                    }
                    } else {
                    alert("Ошибка! Начать сначала?");
                    size = startSize; 
                    newGame(size); 
                    }
                    });
                }

            </script>
        </body>
    </html>
  • Вопрос задан
  • 103 просмотра
1 комментарий
Подписаться 1 Простой 1 комментарий
Пригласить эксперта
Ответы на вопрос 3
Allegro75
@Allegro75
SummaryTables.ru - сайт с футбольной статистикой
Math.random() гугли
Ответ написан
Комментировать
Комментировать
w13vitaliy
@w13vitaliy
self-taught developer since 2020
// код
вот пример при клике на document и меняется цвет

document.onclick = (e) => {
  const randomColor = () => Math.round(Math.random() * 255)
  const color = `rgb(${randomColor()}, ${randomColor()}, ${randomColor()})`
  document.body.style.backgroundColor = color
}

// код
Ответ написан
Комментировать
Комментировать
@Whynotia Автор вопроса
Получилось сделать, чтоб все цифры после нажатия меняли цвет на случайный. Но он у всех цифр одинаковый, подскажите, как сделать чтоб каждая цифра принимала разный случайный цвет?
Вот функция, с помощью которой я задаю случайный цвет:
<script>
    function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
    }
    function setRandomColor() {
    $("td").css("color", getRandomColor());
    }       
</script>


Я впервые имею дело с js, поэтому объясните, если можно, доступно.
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Анимация логотипа
24 апр. 2024, в 00:08
20000 руб./за проект
Разработка дизайна раздела «Статьи» на сайте «Мир отходов»
23 апр. 2024, в 23:01
10000 руб./за проект
Дизайн личного кабинета (клиентская часть)
23 апр. 2024, в 22:37
500 руб./в час
Ещё заказы