krouzek:slideshow

  • 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

function faktorial(n){
 if(n==1){
  return 1;
 }else{
 return n*faktorial(n-1)
 }
}
 
console.log(faktorial(15))
function X(){
    console.log(new Date())
    setTimeout(X,1000)
}
 
X()
function X(){
    console.log(new Date())
}
 
//setInterval naplánuje opakování každých 1000ms
setInterval(X,1000)
//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)
<!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>
  • krouzek/slideshow.txt
  • Poslední úprava: 2023/11/15 20:54
  • autor: 127.0.0.1