Генератор Кода JavaScript Случайный Цвет



Я сделал страницу, чтобы сгенерировать случайный цвет с JavaScript и установить, что цвет фона страницы.

//Global Variables
const hexChars = '0123456789ABCDEF';
const container = document.getElementById('container');
const hexText = document.getElementById('hex-text');

//Function to generate random hex code

function randomColor() {
 let hexCode = '#';
 for(i=0; i<=5; i++) {
   let randomNum = Math.floor(Math.random() * 16);
    hexCode += hexChars[randomNum];
  }
  return hexCode;
}

//Function to change page color & text

function applyColor() {
  let hexCode = randomColor();
 container.style.backgroundColor = hexCode;
  hexText.innerHTML = hexCode;
}

//Make random color on page load, click, and spacebar press.
window.onload = applyColor();
container.onclick = () => applyColor();
document.body.onkeyup = e => {
  if(e.keyCode == 32) {
    applyColor();
  }
}
* {
  margin: 0;
  padding: 0;
  user-select: none;
}

#container {
  position: absolute;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color .4s;
}

#hex-text {
  font-family: sans-serif;
  font-size: 2em;
  color: white;
  background-color: rgba(150, 150, 150, .6);
  padding: .4em;
  border-radius: 6px;
}
<div id="container">
  <p id="hex-text">
    #000000
  </p>
</div>

Как я могу улучшить эффективность или функциональность на JavaScript?

Редактировать: я также хотел бы знать, если это реальный генератор, или, если это более вероятно, чтобы получить один оттенок, чем другая. Я не понимаю, почему это, но вы никогда не знаете.



Комментарии
4 ответа

Выглядит очень хорошо. И, насколько я знаю, ваш генератор цвета является справедливым.

Для эффективности

вам не нужно генерировать случайное число для каждого шестнадцатиричный символ. Вы выбираете среди 256^3 (16 777 216) цвета, с маркировкой любое число от значение 0x0 (0 в десятичной системе) на 0xffffff (256^3-1 в десятичной или 16 777 215).

Так что вы можете:


  1. генерировать случайные числа let randomNum = Math.floor(Math.random() * 16777216) // 256^3

  2. использовать свойственные ему функции для JavaScript чисел, метод toString, чтобы преобразовать его в строку с произвольным основанием:
    let hextest = randomNum.toString(16)

    По дизайну randomNum это натуральные числа (неотрицательные или 0), поэтому вам не нужно код для проверки).


  3. блокнот с нуля. Этот вопрос был задан миллион раз в переполнения стека (это только пример).

    За ваш пример, где вы не нужны проверки, hextest = ('00000' + hextest).substr(-6) будем делать. (После заполнения всех нулями вы когда-нибудь понадобится, берет только последние 6 символов).


  4. преобразовать в прописные и украсить: hextest = '#' + hextest.toUppercase(). Ссылка для toUpperCase()

Таким образом, вы можете избавиться от hexChars постоянная.

Для функциональности

У меня нет хорошей идеи о том, как добавить функции. Но я могу предложить улучшение:

в коде вы должны захватить пробел нажимает, добавьте строку e.preventDefault(). Это позволит предотвратить поведение по умолчанию для клавиши "пробел" (который прокрутив экран вниз).

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

4
ответ дан 20 марта 2018 в 10:03 Источник Поделиться

Вмятие

Если вы посмотрите на видео фрагмент кода в ваш вопрос вы можете увидеть отступы не справедливо для некоторых местах, но если вы откроете редактор фрагменте он вдруг выглядит нормально. Это потому что вы не использовать последовательное вдавливание. В некоторых местах изрезана вкладку и в других места

Будьте последовательны и всегда использовать тот же отступ.

Обработка событий

Когда вы регистрируете событие, которое не принимает никаких параметров, как ваш click событие для container див:

container.onclick = () => applyColor();

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

container.onclick = applyColor;

Однако предпочтительнее по нескольким причинам для регистрации событий с addEventListener. Это позволяет:


  • Зарегистрировать несколько событий

  • Сделать имя события яснее, так как они не имеют on префикс к ним

  • Сделайте ваши намерения яснее

Так что это последний container выберите событие станет:

container.addEventListener("click", applyColor);

Сохранить динамику и изменение остальных:

window.addEventListener("load", applyColor);
container.addEventListener("click", applyColor);
document.body.addEventListener("keyup", e => {
if(e.keyCode == 32) {
applyColor();
}
});

Цвет поколения

Как уже отмечали другие ораторы, и довольно хорошо, я мог бы добавить, есть проще способы генерации случайного цвета. Большинство из этих альтернатив не нужна переменная для хранения доступные символы:

const hexChars = '0123456789ABCDEF';

Это улучшает О внесении чище код. В конце концов проще всегда лучше. Но не поймите меня неправильно, нет ничего плохого с тем, как вы делаете это.

Ключ коды

В общем, вы хотите, чтобы избежать запоминания вещей, или ищем вещи, чтобы быть в состоянии понять код. В этом случае, когда я вижу код if:

if(e.keyCode == 32) {
applyColor();
}

Если я не запомнил весь в ASCII таблице, я не знаю, какой ключ соответствует 32таким образом, это заставит меня посмотреть (я все-таки перепроверить, потому что я не уверен на 100%). Или я может думаю, что знаю, и на самом деле не правильно помню и предположить, что это другой.

Это быстро отбился от рук, если вы используете несколько ключей:

if(e.keyCode == 32 || e.keyCode == 27 || e.keyCode == 9) {
applyColor();
}

Вы можете сделать код более читаемым, создавая константы для ключей, который вы используете:

const SPACE_KEY = 32;

//rest of the code

if(e.keyCode == SPACE_KEY) {
applyColor();
}


Кроме того, что я уже заявил, Я вижу только незначительные настройки, которые можно сделать в applyColor функции, которая представляет собой двойное назначение:

function applyColor() {
container.style.backgroundColor = hexText.innerHTML = randomColor();
}

Это делает его немного шире, но это гораздо более кратким.

Что касается вашего последнего редактирования вопрос: это справедливо генератор и все цвета одинаково могут быть получены.

4
ответ дан 21 марта 2018 в 03:03 Источник Поделиться

Ответ вопрос


Я бы также хотел бы знать, если это реальный генератор, или, если это более вероятно, чтобы получить один оттенок, чем другая. Я не понимаю, почему это, но вы никогда не знаете.

Кажется справедливым для меня... случайная функция возвращает "с плавающей точкой, псевдо-случайных чисел"[1][1] таким образом, хотя последовательность может повторяться, это может быть очень маловероятно - см. Это так ответ дополнительные пояснения, что ... и подробнее об этом в ответах на этот вопрос так: будет математика.случайный повтор?

Отзывы:


  • хорошо использовать константы

  • хорошо использовать со стрелками функции - например, onclick функция, onkeyup функция

Предложения:


  • использовать const вместо let ничего это не меняет: randomNumнапример, hexCode - сослаться на этот ответ на основе

  • укоротить стрелку функцию метода onkeyup использовать закоротить вместо if заявление:

    document.body.onkeyup = e => e.keyCode == 32 && applyColor();

    Это имеет тенденцию быть быстрее, хотя это может показаться менее читабельным для некоторых (см. Тест производительности здесь)


2
ответ дан 20 марта 2018 в 10:03 Источник Поделиться

Другие ответы есть некоторые хорошие моменты, поэтому я не собираюсь повторять все это.


const container = document.getElementById('container');
const hexText = document.getElementById('hex-text');

Вы ищете элементы, не убедившись, что они даже не загружается. Это работает только здесь, потому что фрагмент стека помещает код JavaScript в нижней части тела, которая не является стандартной. Как правило, JavaScript включен с головы, в этом случае они будут null.


for(i=0; i<=5; i++)

i не объявляется, так это в глобальной области видимости. Я тоже предпочитаю i < 6 вместо i <= 5поскольку он повторяется 6 раз. Это также, как вы бы перебрать массив или строку.


hexText.innerHTML = hexCode;

Вы не парсинг любой HTML, так что нет никаких причин, чтобы использовать .innerHTML. Когда вы просто вставляете текст использовать .innerText.


window.onload = applyColor();

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

2
ответ дан 22 марта 2018 в 04:03 Источник Поделиться