Toto je starší verze dokumentu!
- Seznam se se setTimeout a setInterval pro načasování běhu funkce v javascriptu
- Napiš program, který za pět sekund od otevření stránky vypíše zprávu/aktuální čas:
- jako alert (message)
- do input nebo textarea
- do divu nebo nadpisu
- Modifikuj program, aby aktuální čas vypisoval opakovaně
- Vytvoř program, který bude počítat (a vypisovat) sekundy od načtení stránky. Jsou dvě možnosti:
Rekurze
Čistokrevná na výpočet faktoriálu
function faktorial(n){ if(n==1){ return 1; }else{ return n*faktorial(n-1) } } console.log(faktorial(15))
Plánovací rekurze
function X(){ console.log(new Date()) setTimeout(X,1000) } X()
Plánování jiné
function X(){ console.log(new Date()) } //setInterval naplánuje opakování každých 1000ms setInterval(X,1000)
Minimální slideshow
//existuje <img id="slideshow"> v html // var cislo_obrazku = 1; function prepniObrazek(){ document.getElementById("slideshow").src= cislo_obrazku +".jpg" //0, 1, 2 cislo_obrazku = (cislo_obrazku+1) % 3; } //setInterval naplánuje opakování každých 1000ms setInterval(prepniObrazek,5000)
Fadein,fadeout
<!DOCTYPE html> <html> <head> <style> div { width: 100px; height: 100px; background-color: red; } .fadeout { animation-name: fadeout; animation-duration: 4s; animation-fill-mode: forwards; } .fadein { animation-name: fadein; animation-duration: 4s; animation-fill-mode: forwards; } @keyframes fadeout { from {opacity:1;} to {opacity:0;} } @keyframes fadein { from {opacity:0;} to {opacity:1;} } </style> </head> <body> <div class="fadein" id="ctverec"></div> <script> setTimeout(function(){ document.getElementById('ctverec').classList.remove("fadein"); document.getElementById('ctverec').classList.add("fadeout"); },5000) </script> </body> </html>