Zobrazit stránkuStarší verzeZpětné odkazyNahoru Tato stránka je pouze pro čtení. Můžete si pouze prohlédnout zdrojový kód, ale ne ho měnit. Zeptejte se správce, pokud si myslíte, že něco není v pořádku. === Úloha: Barevná čísla === 1) vypište na stránku čísla od 1 do 20. Umožněte konfiguraci horní meze (= vypisujte javascriptem) 2) čísla udělejte elegantní velikost, font, odstup od ostatních, případně i okraj (border) - CSS 3) Změňte číslům barvu 4) Změňte jen některým číslům barvu - například 7, 13 a 18 budou červeně a ostatní modře 5) nastavte sudým číslům modrou a lichým žlutou barvu 6) jak implementovat, abyste pro každé číslo měli jinou barvu? if-else-if-else je možnost, ale lze použít i pole barev kdy indexy odpovídají číslům 7) rozšíření: umožněte uživateli změnit barvu zadaného čísla - např vstup číslo+barva, tlačítko 8) rozšíření: na začátku číslům nastavte náhodnou barvu (hledejte random rgb color javascript) <code html> <!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>Čísla</title> <style> .cislo { border: 1px solid black; padding: 1rem; display: inline-block; margin: 2rem; color: purple; background-color: greenyellow; font-size: 40pt; font-weight: bold; font-family: "Times New Roman", serif; font-weight: bold; letter-spacing: 0em; line-height: 120%; text-shadow: red 0px 0px 10px, yellow 1px 1px 1px; word-spacing: 0.2em; text-transform: uppercase; -webkit-text-stroke-width: 2px; -webkit-text-stroke-color: black; } .cislo2 { color: blue; background-color: pink; } .cislo3 { color: rgb(200, 100, 255); background-color: yellow; } .cislo4 { color: rgb(200, 100, 255); background-color: red; -webkit-text-stroke-color: pink; } .cislo5 { color: rgb(30, 205, 30); background-color: rgb(38, 12, 12); -webkit-text-stroke-color: white; } </style> <script> const HORNI_MEZ = 20 setTimeout(function () { for (let cislo = 1; cislo <= HORNI_MEZ; cislo++) { const obalkaCisla = document.createElement("div") obalkaCisla.innerHTML = cislo obalkaCisla.classList.add("cislo") obalkaCisla.classList.add("cislo"+cislo) document.getElementById("output").append(obalkaCisla) //document.getElementById("output").innerHTML += "<div class='cislo cislo"+cislo+"'>" + cislo + "</div>" } }, 0) </script> </head> <body> <div id="output"></div> </body> </html> </code> krouzek/uloha/barevna_cisla.txt Poslední úprava: 2024/04/17 16:54autor: admin