Losowy kolor w js

Losowo generowany kolor, a do czego może się to przydać spytacie, a no nie wiem, tak może dla zabawy ;). Ja zrobię coś innego czyli zmiana koloru tła diva po otworzeniu strony, oraz oraz zmiana koloru podczas zmiany wielkości strony.

Najpierw style.

* {
  box-sizing: border-box;
}
html {
  height: 100%;
}
body {
  height: 100%;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-flow: column;
}
.box {
  width: 200px;
  height: 200px;
}

Mały html

<div class="box"></div>

No i oczywiście javascript. Najpierw stwórzmy funkcję do zmiany kolor.

function hexColor() {
  const box = document.querySelector('.box');
  const colorHex = `#${Math.floor(Math.random()*16777215).toString(16)}`;

  box.setAttribute('style', `background-color: ${colorHex}; border: 1px solid`);
}

Małe objaśnienie co w tej funkcji się dzieje. Najpierw dobieramy się do diva z klasą 'box'
Później tworzymy kolor, który jest heksadecymalny inaczej zwany szesnastkowym systemem liczbowym np. kolor biały to `#FFFFFF` oczywiście bez hasha na początku.
Math.floor zwraca największą liczbę całkowitą mniejszą od lub równą danej.
Math.random liczba pseudolosowa, zmiennoprzecinkowa
Później mnożymy ją przez 'magiczną liczbę' 16777215, a dla czego taka liczba, a no dla tego że jest do liczba dziesiętna reprezentująca kolor biały. Aby zamienić tą cyfrę dziesiętną na heksy używamy toString i dodajemy parametr 16, która konwertuje liczbę na heksadecymalny więcej na [ mozilla.org ]

Poniżej js włącznie z resize oraz przykład na jsfiddle

let resizeTimer;

window.addEventListener('resize', () => {
  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(() => {
    hexColor();
  }, 250);
});
window.addEventListener('DOMContentLoaded', hexColor);

function hexColor() {
  const box = document.querySelector('.box');
  const colorHex = `#${Math.floor(Math.random()*16777215).toString(16)}`;

  box.setAttribute('style', `background-color: ${colorHex}; border: 1px solid`);
}

Poniżej działający przykład.

See the Pen
random color by Greg (@Tomik23)
on CodePen.