Rozdíly
Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.
Obě strany předchozí revize Předchozí verze | |||
krouzek:uloha:barevna_cisla2 [2024/04/24 15:48] – admin | krouzek:uloha:barevna_cisla2 [2024/04/24 16:37] (aktuální) – admin | ||
---|---|---|---|
Řádek 95: | Řádek 95: | ||
// | // | ||
} | } | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | </ | ||
+ | |||
+ | === Formulář na změnu === | ||
+ | |||
+ | <code html> | ||
+ | < | ||
+ | <html lang=" | ||
+ | |||
+ | < | ||
+ | <meta charset=" | ||
+ | < | ||
+ | < | ||
+ | .cislo { | ||
+ | border: 1px solid black; | ||
+ | padding: 1rem; | ||
+ | display: inline-block; | ||
+ | margin: 2rem; | ||
+ | color: purple; | ||
+ | background-color: | ||
+ | font-size: 40pt; | ||
+ | font-weight: | ||
+ | font-family: | ||
+ | font-weight: | ||
+ | letter-spacing: | ||
+ | line-height: | ||
+ | text-shadow: | ||
+ | word-spacing: | ||
+ | text-transform: | ||
+ | -webkit-text-stroke-width: | ||
+ | -webkit-text-stroke-color: | ||
+ | } | ||
+ | |||
+ | .cislo2 { | ||
+ | color: blue; | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | .cislo3 { | ||
+ | color: rgb(200, 100, 255); | ||
+ | background-color: | ||
+ | } | ||
+ | |||
+ | .cislo4 { | ||
+ | color: rgb(200, 100, 255); | ||
+ | background-color: | ||
+ | -webkit-text-stroke-color: | ||
+ | } | ||
+ | |||
+ | .cislo5 { | ||
+ | color: rgb(30, 205, 30); | ||
+ | background-color: | ||
+ | -webkit-text-stroke-color: | ||
+ | } | ||
+ | </ | ||
+ | </ | ||
+ | < | ||
+ | <button onclick=" | ||
+ | |||
+ | <div> | ||
+ | < | ||
+ | <input id=" | ||
+ | < | ||
+ | <input id=" | ||
+ | < | ||
+ | <input id=" | ||
+ | |||
+ | <button onclick=" | ||
+ | </ | ||
+ | <div id=" | ||
+ | |||
+ | | ||
+ | < | ||
+ | const barvyPozadiCisel = [] | ||
+ | const barvyCisel = [] | ||
+ | |||
+ | barvyPozadiCisel[15] = ' | ||
+ | barvyPozadiCisel[16] = ' | ||
+ | |||
+ | barvyCisel[15] = ' | ||
+ | barvyCisel[16] = ' | ||
+ | |||
+ | |||
+ | function randomColor(){ | ||
+ | const red = Math.floor(Math.random()*256) | ||
+ | const green = Math.floor(Math.random()*256) | ||
+ | const blue = Math.floor(Math.random()*256) | ||
+ | |||
+ | return " | ||
+ | } | ||
+ | |||
+ | function uloz(){ | ||
+ | // Načti hodnoty z formuláře | ||
+ | const cislo = parseInt(document.getElementById(" | ||
+ | const barva = document.getElementById(" | ||
+ | const barvaPozadi = document.getElementById(" | ||
+ | |||
+ | console.log(`${cislo} bude ${barva} a pozadi ${barvaPozadi}`) | ||
+ | | ||
+ | barvyCisel[cislo] = barva | ||
+ | barvyPozadiCisel[cislo] = barvaPozadi | ||
+ | } | ||
+ | |||
+ | function vygeneruj() { | ||
+ | // Smaz co tam je | ||
+ | document.getElementById(" | ||
+ | |||
+ | const HORNI_MEZ = 20 | ||
+ | for (let cislo = 1; cislo <= HORNI_MEZ; cislo++) { | ||
+ | const obalkaCisla = document.createElement(" | ||
+ | obalkaCisla.innerHTML = cislo | ||
+ | obalkaCisla.classList.add(" | ||
+ | obalkaCisla.classList.add(" | ||
+ | |||
+ | if(barvyPozadiCisel[cislo]) { | ||
+ | obalkaCisla.style.color = barvyCisel[cislo] | ||
+ | } else { | ||
+ | obalkaCisla.style.color = randomColor() | ||
+ | } | ||
+ | |||
+ | if(barvyPozadiCisel[cislo]) { | ||
+ | obalkaCisla.style.backgroundColor = barvyPozadiCisel[cislo] | ||
+ | } else { | ||
+ | obalkaCisla.style.backgroundColor = randomColor() | ||
+ | } | ||
+ | document.getElementById(" | ||
+ | |||
+ | // | ||
+ | } | ||
+ | } | ||
+ | |||
+ | vygeneruj() | ||
</ | </ | ||
</ | </ |