jQuery timer conto alla rovescia

Attualmente ho questo codice

setTimeout(function() { $('#hideMsg').fadeOut('fast'); }, 2000); 

è ansible per me mettere il conto alla rovescia per 2 secondi?

Piace

 
The entry you posted not valid. This Box will Close In 2 Seconds

“Questa casella si chiuderà in 2 secondi” passerà automaticamente a 2 secondi 1 sec

usa setInterval invece di setTimeout , quindi con la combinazione di clearInterval

 var sec = 2 var timer = setInterval(function() { $('#hideMsg span').text(sec--); if (sec == -1) { $('#hideMsg').fadeOut('fast'); clearInterval(timer); } }, 1000); 

html

 
The entry you posted not valid. This Box will Close In 2 Seconds

demo pazzesca


Renderlo migliore.

 var sec = $('#hideMsg span').text() || 0; var timer = setInterval(function() { $('#hideMsg span').text(--sec); if (sec == 0) { $('#hideMsg').fadeOut('fast'); clearInterval(timer); } }, 1000);​ 

in modo che il tempo dipenda da cosa c’è dentro . Ad esempio, 2 è 2 secondi, 5 è 5 secondi e 60 è 1 minuto.

un’altra demo pazzesca

Nota:

Non mi rendevo conto di quanto questo fosse simile alla risposta di Reigel finché non ho letto la sua risposta. Fondamentalmente, l’unica differenza è che uso .delay() per hide il div posto dell’intervallo. Diverse opzioni …


Se metti il ​​numero iniziale in un questo conterà a zero fino a zero da qualunque sia quel numero:

 $(function() { // Number of seconds counter starts at is what's in the span var timer, counter = $("#hideMsg span").text(); // Delay the fadeout counter seconds $('#hideMsg').delay(counter * 1000).fadeOut('fast'); // Update countdown number every second... and count down timer = setInterval(function() { $("#hideMsg span").html(--counter); if (counter == 0) { clearInterval(timer)}; }, 1000); });​ 

esempio jsFiddle

Questo fa uso del .delay() nativo di jQuery, e usa un setInterval() che si ferma quando arriva a zero.

Fai un altro timeout impostato dopo un secondo e imposta il .html () del div in questo modo:

 setTimeout(function() { $('#hideMsg').html('The entry you posted not valid. 
This Box will Close In 1 Second'); }, 1000);

Mettili in una funzione ed esegui la funzione onload in questo modo:

  

spero che questo ti aiuti.