5

Генератор случайных цветов

21

Описание проблемы

У меня есть следующая функция, которая создает полилинию с заданным цветом. Мне нужно заменить цвет на случайно генерируемый цвет. Вот код:

document.overlay = GPolyline.fromEncoded({
    color: "#0000FF",
    weight: 10,
    points: encoded_points,
    zoomFactor: 32,
    levels: encoded_levels,
    numLevels: 4
});

Как я могу это сделать? Какие шаги необходимо предпринять для генерации случайного цвета и подстановки его в данную функцию? Какие возможные решения могли бы помочь в этой задаче?

5 ответ(ов)

12

Для замены "#0000FF" на использование функции getRandomColor(), вам нужно обновить код внутри функции setRandomColor(). В приведенном коде уже используется getRandomColor(), чтобы задать случайный цвет фона для элемента с id colorpad.

Если вы просто хотите показать, как использовать getRandomColor(), то данный код уже правильно это делает.

Вот итоговый пример кода с комментариями, чтобы было более понятно:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="colorpad" style="width:300px;height:300px;background-color:#000">
</div>
<button onclick="setRandomColor()">Random Color</button>

<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() {
  // Установка случайного цвета в качестве фона для элемента с id colorpad
  $("#colorpad").css("background-color", getRandomColor());
}
</script>

Теперь, когда вы нажмете кнопку "Random Color", фон элемента colorpad будет меняться на случайный цвет, который генерируется с помощью функции getRandomColor().

3

Сомневаюсь, что что-то будет быстрее или короче, чем этот вариант:

"#" + ((1 << 24) * Math.random() | 0).toString(16).padStart(6, "0")

Этот код генерирует случайный цвет в шестнадцатеричном формате, используя побитовые операции и функции для работы с числами. Он быстро создает строку формата #RRGGBB, где RR, GG, и BB — случайные значения. Если вы ищете более короткий синтаксис или оптимизацию, дайте знать!

0

Вы можете также использовать HSL, который поддерживается всеми хорошими браузерами (http://caniuse.com/#feat=css3-colors).

Вот пример функции для генерации случайного цвета в формате HSL:

function randomHsl() {
    return 'hsla(' + (Math.random() * 360) + ', 100%, 50%, 1)';
}

Обратите внимание, что эта функция будет генерировать только яркие цвета. Вы можете экспериментировать с яркостью, насыщенностью и альфа-каналом.

Если вы предпочитаете синтаксис ES6, вот аналогичная функция:

// es6
const randomHsl = () => `hsla(${Math.random() * 360}, 100%, 50%, 1)`

Не забудьте в дальнейшем поиграть с параметрами для разнообразия цветов!

0

Нет необходимости использовать хэш из шестнадцатеричных букв. JavaScript может сделать это сам:

function get_random_color() {
  function c() {
    var hex = Math.floor(Math.random() * 256).toString(16);
    return ("0" + String(hex)).substr(-2); // дополнение нулём
  }
  return "#" + c() + c() + c();
}

Этот код генерирует случайный цвет в формате шестнадцатеричного кода. Функция get_random_color вызывает вложенную функцию c, которая генерирует две цифры в шестнадцатеричном формате. В итоге функция собирает цвет в формате #RRGGBB, где RR, GG и BB — это случайные значения канала красного, зеленого и синего соответственно.

0

Этот код генерирует случайный шестнадцатеричный цвет в формате #RRGGBB.

Давайте разберемся, как это работает:

  1. Math.random() — генерирует случайное число от 0 до 1.
  2. toString(16) — преобразует это число в строку в шестнадцатеричном формате. Однако, поскольку результат может быть меньше 6 символов, мы добавляем "000000", чтобы обеспечить достаточную длину.
  3. substring(2, 8) — извлекает подстроку, начиная с третьего символа (индекс 2) и заканчивая на седьмом символе (индекс 8), чтобы получить только 6 символов цвета.
  4. '#' + — добавляет символ # в начале, чтобы соответствовать формату CSS для цветовых кодов.

В результате мы получаем случайный цвет в шестнадцатеричном формате, который можно использовать, например, для задания цвета фона на веб-странице.

Пример использования:

let randomColor = '#' + (Math.random().toString(16) + "000000").substring(2, 8);
console.log(randomColor); // Выведет что-то вроде: #a3c2f2

Надеюсь, это поможет разобраться!

Чтобы ответить на вопрос, пожалуйста, войдите или зарегистрируйтесь