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. (výchozí html soubor najdeš níže) === Úkoly === * Změň 5s po načtení stránky barvu písma nadpisu h1 (Vítejte) na modrou (blue) * Rozšiř hodiny: ať zobrazují i milisekundy - hodnotu získáš pomocí funkce ''%%aktualniCas.getMilliseconds()%%''. Experimentuj se změnou intervalu aktualizace. * Přidej do políčka formuláře každou sekundu nějaké písmenko * Změň zdroj (atribut ''%%src%%'') obrázku po 4 sekundách na https://placehold.co/1200x200 (větší obrázek) * Zvyšuj postupně velikost textu (''%%prvek.style.fontSize = promennaVelikost%%'') odstavce. === Rady === * 5s je 5000ms * Když chceš pracovat s nějakým prvkem na stránce, můžeš jej pojmenovat (atribut id, např: ''%%<a id="unikatni_jmeno">%%'') a přistoupit k němu ''%%document.getElementById("unikatni_jmeno")%%''. Jsou i jiné možnosti (hledat dle názvu tagu, třídy či css selektorem), ale vrací pole a tak je to složitější * Prvku můžeš: * Zjistit jeho hodnotu v css stylu, například: ''%%const barvaPozadi = prvek.style.backgroundColor%%'' * Změnit hodnotu v css stylu, například: ''%%prvek.style.color = "red"%%'' * Zjistit či změnit jeho obsah (html kód uvnitř), ''%%prvek.innerHTML = "<em>Test</em>" %%'' * Zjistit hodnotu jeho atributu, například: ''%%const adresa = obrazek.getAttribute("src") %%'' * Nastavit hodnotu jeho atributu, například: ''%%link.setAttribute("href") = "https://example.com/"%%'' * A [[https://developer.mozilla.org/en-US/docs/Web/API/Element|spoustu dalších věcí]] * Formulářový prvek input má navíc atribut ''%%.value%%'' který určuje hodnotu v políčku. Dá se přečíst/zapsat podobně jako innerHTML * Můžeš si vytvořit proměnnou pomocí ''%%let nejakaPromenna = 100%%'' a s tou nějak pracovat, například ji měnit a nastavovat jako hodnotu atributu/stylu/obsahu html elementu * Spojování řetězců, příklad: ''%%element.style.fontSize = cislo + "%" %%'' ---- <code html> <!DOCTYPE html> <html lang="cs"> <head> <meta charset="utf-8" /> <title>setTimeout a setInterval</title> <style> </style> <script> /* setTimeout = vykona se jednou */ setTimeout( function(){ document.body.style.backgroundColor = 'green' }, 2000 /* 2000ms jsou 2 sekundy */ ) /* setInterval = vykona se opakovane, vzdy po zadanem poctu milisekund Prikladova hodnota 100ms = vykona se 10krat za sekundu */ setInterval( function(){ const aktualniCas = new Date() document.getElementById('hodiny').innerHTML = aktualniCas.getHours() + ":" + aktualniCas.getMinutes() + ":" + aktualniCas.getSeconds() }, 100 ) </script> </head> <body> <div id="hodiny">...</div> <h1 id="nadpis">Vítejte na mé webové stránce</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. Praesent libero. Sed cursus ante dapibus diam.</p> <h2>Obrázek:</h2> <img src="https://placehold.co/300x200" alt="Vzorový obrázek" id="obrazek"> <h2>Odkaz:</h2> <a href="https://adasek.cz" target="_blank">Navštivte adasek.cz</a> <h2>Formulář:</h2> <form action="#" method="post"> <label for="name">Jméno:</label> <input type="text" id="name" name="name"> </form> </div> </body> </html> </code> krouzek/settimeout_setinterval_dom.txt Poslední úprava: 2023/11/28 23:03autor: admin