JS PŘÍKLADY

Seznam příkladů














GENERÁTOR ČÍSEL V JS

Zadání:
Vygenerujte sadu náhodných čísel od 1 do 10, která vykreslíte s náhodnými styly.


Řešení využívá pokročilejší koncept - funkci!

Prvně vždy vytvoříme HTML div, kterému dáme id. Do divu budeme později vypisovat výstup.

JavaScriptový kód vždy začínáme otevíracím tagem scriptu(<script>), ukončujeme ho uzavíracím tagem scriptu (</script>).

Prvně vytvoříme funkci nahoda, které dáme atributy minimum a maximum. Do funkce potom dáme náhodný generátor, který bude pracovat s těmtito zatím neurčenými čísly (minimum, maximum).

Dále pak vytvoříme proměnnou zprava, do které vložíme prázdné uvozovky.

Vytvoříme cyklus FOR(). Cyklus nastavíme od jedničky a jeho počet opakování na 500. V cyklu vygenerujeme náhodné číslo pomocí funkce nahoda, která umí generovat náhodné číslo mezi čísly v závorce. Vytváříme HTML element <span> s tímto číslem. V CSS stylování tohoto čísla znovu použijeme funkci nahoda pro náhodnou velikost, pozici, průhlednost a rotaci čísla.

Toto vložíme do zprava.

Nakonec zprávu vložíme do HTML divu.


<div id="generator"></div>

<script>
    function nahoda(minimum, maximum){
        let nahodnecislo = Math.floor(Math.random() * (maximum - minimum + 1)) + minimum;
        return nahodnecislo;
    }
    let zprava = "";
    for (let i = 1; i <= 500; i++){
        zprava += `<span style=\"
            position: absolute; top: ` + nahoda(0,100) + "%; left: " + nahoda(0,100) + `%;
            font-size: ` + nahoda(10,70) + `px;
            color: rgba(107,6,15,` + 1/nahoda(1,10) + `);
            rotate: `+ nahoda(0,360) + `deg;
            \">` + nahoda(0,9) + `</span>`;
    }
    document.getElementById("generator").innerHTML = zprava;
</script>