Esercizi Timeout Javascript

Codegrind Team•Jul 22 2023

Ecco degli esercizi semplici con soluzione per praticare le basi dell’uso di setTimeout() in Javascript.

Esercizio 1

Eseguire una funzione dopo 3 secondi utilizzando setTimeout:

setTimeout(function () {
  console.log("Esecuzione dopo 3 secondi");
}, 3000);

Esercizio 2

Creare un timer che mostra un messaggio dopo un certo numero di secondi utilizzando setTimeout:

const tempo = 5;

setTimeout(function () {
  console.log(`È passato ${tempo} secondi`);
}, tempo * 1000);

Esercizio 3

Nascondere un elemento dopo 2 secondi utilizzando setTimeout:

const elemento = document.getElementById("elemento");

setTimeout(function () {
  elemento.style.display = "none";
}, 2000);

Esercizio 4

Creare un effetto di animazione che fa apparire gradualmente un elemento dopo 1 secondo utilizzando setTimeout:

const elemento = document.getElementById("elemento");
elemento.style.opacity = "0";

setTimeout(function () {
  elemento.style.opacity = "1";
}, 1000);

Esercizio 5

Mostrare un messaggio di avviso dopo 4 secondi utilizzando setTimeout:

const messaggio = document.getElementById("messaggio");

setTimeout(function () {
  messaggio.style.display = "block";
}, 4000);

Esercizio 6

Simulare un dialogo con un utente che si chiude automaticamente dopo 3 secondi utilizzando setTimeout:

const dialogo = document.getElementById("dialogo");
dialogo.style.display = "block";

setTimeout(function () {
  dialogo.style.display = "none";
}, 3000);

Esercizio 7

Aggiornare dinamicamente il contenuto di una pagina dopo 5 secondi utilizzando setTimeout:

setTimeout(function () {
  document.getElementById("contenuto").innerHTML = "Nuovo contenuto";
}, 5000);

Esercizio 8

Creare un effetto di dissolvenza che cambia gradualmente lo sfondo della pagina dopo 2 secondi utilizzando setTimeout:

setTimeout(function () {
  document.body.style.transition = "background-color 1s ease";
  document.body.style.backgroundColor = "blue";
}, 2000);

Esercizio 9

Visualizzare un messaggio di notifica per 3 secondi utilizzando setTimeout:

const notifica = document.getElementById("notifica");
notifica.style.display = "block";

setTimeout(function () {
  notifica.style.display = "none";
}, 3000);

Esercizio 10

Cambiare lo stile di un pulsante dopo 1 secondo utilizzando setTimeout:

const pulsante = document.getElementById("pulsante");

setTimeout(function () {
  pulsante.style.backgroundColor = "green";
  pulsante.style.color = "white";
}, 1000);