Esercizi Intervalli Javascript

Codegrind Team•Jul 22 2023

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);