krouzek:slideshow

Obsah

Čistokrevná na výpočet faktoriálu
Plánovací rekurze
Plánování jiné
Minimální slideshow
Fadein,fadeout

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>