Esercizi Intervalli Javascript
Ecco degli esercizi semplici con soluzione per praticare le basi sull’uso degli intervalli setInterval()
in Javascript.
Esercizio 1
Eseguire una funzione ogni secondo utilizzando setInterval:
setInterval(function () { console.log("Esecuzione ogni secondo");}, 1000);
Esercizio 2
Creare un timer che conta fino a 10 utilizzando setInterval:
let contatore = 1;
const intervallo = setInterval(function () { console.log(contatore);
if (contatore === 10) { clearInterval(intervallo); }
contatore++;}, 1000);
Esercizio 3
Cambiare il colore di un elemento del DOM ogni 2 secondi utilizzando setInterval:
const elemento = document.getElementById("elemento");
const intervallo = setInterval(function () { elemento.style.color = elemento.style.color === "red" ? "blue" : "red";}, 2000);
Esercizio 4
Simulare un countdown da 5 a 0 utilizzando setInterval:
let contatore = 5;
const intervallo = setInterval(function () { console.log(contatore);
if (contatore === 0) { clearInterval(intervallo); console.log("Countdown terminato"); }
contatore--;}, 1000);
Esercizio 5
Creare una presentazione di slide che cambiano automaticamente ogni 3 secondi utilizzando setInterval:
const slides = ["Slide 1", "Slide 2", "Slide 3"];let indice = 0;
function cambiaSlide() { console.log(slides[indice]);
indice++;
if (indice === slides.length) { indice = 0; }}
setInterval(cambiaSlide, 3000);
Esercizio 6
Creare un pulsante che aumenta di 1 ogni volta che viene cliccato utilizzando setInterval:
const pulsante = document.getElementById("pulsante");let contatore = 0;
pulsante.addEventListener("click", function () { contatore++;});
setInterval(function () { console.log(contatore);}, 1000);
Esercizio 7
Creare un effetto di animazione che sposta un elemento gradualmente orizzontalmente utilizzando setInterval:
const elemento = document.getElementById("elemento");let posizione = 0;
const intervallo = setInterval(function () { posizione += 10; elemento.style.transform = `translateX(${posizione}px)`;
if (posizione >= 200) { clearInterval(intervallo); }}, 100);
Esercizio 8
Creare un timer che mostra il tempo trascorso dall'inizio in secondi utilizzando setInterval:
let tempo = 0;
const intervallo = setInterval(function () { tempo++; console.log("Tempo trascorso:", tempo, "secondi");}, 1000);
Esercizio 9
Creare un cronometro che registra il tempo trascorso e lo mostra in formato "mm:ss" utilizzando setInterval:
let minuti = 0;let secondi = 0;
const intervallo = setInterval(function () { secondi++;
if (secondi === 60) { minuti++; secondi = 0; }
console.log( `${minuti.toString().padStart(2, "0")}:${secondi .toString() .padStart(2, "0")}` );}, 1000);
Esercizio 10
Cambiare lo sfondo della pagina ogni 5 secondi utilizzando setInterval:
const colori = ["red", "green", "blue"];let indice = 0;
const intervallo = setInterval(function () { document.body.style.backgroundColor = colori[indice];
indice++;
if (indice === colori.length) { indice = 0; }}, 5000);