Codifica JavaScript per un conto alla rovescia da 10 a 0

JavaScript è un linguaggio di scripting ben noto e ampiamente utilizzato utilizzato principalmente per scrivere applicazioni per pagine Web. Puoi creare centinaia di app utili utilizzando JavaScript, incluso un timer per il conto alla rovescia. Puoi codificare uno script JavaScript per visualizzare un conto alla rovescia da 10 a zero sulla tua pagina Web e visualizzare un messaggio quando raggiunge lo zero. Gli script JavaScript possono essere creati in qualsiasi editor di testo, come Blocco note e WordPad, ma devono essere salvati con un'estensione ".js" per essere funzionali.

1

Crea un nuovo file di testo e chiamalo "timer.js". L'estensione ".js" indica che si tratta di un file JavaScript. Apri il file in un editor di testo, come Blocco note o WordPad.

2

Definisci due variabili (Timer e TotalSeconds) inserendo queste due righe:

var Timer; var TotalSeconds;

3

Crea una nuova funzione (CreateTimer) che visualizzi il timer sulla tua pagina Web inserendo questo codice:

funzione CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); Secondi Totali = Tempo; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

Il "window.setTimeout("Tick()", 1000);" la funzione fa scattare il timer ogni secondo. Il tuo script ora ha questo aspetto:

var Timer; var TotalSeconds;

funzione CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSeconds = Tempo; UpdateTimer() window.setTimeout("Tick()", 1000); }

4

Aggiungi una funzione che costringa il timer a diminuire di un secondo ogni tick:

funzione Tick () {if (TotalSeconds <= 0) {alert ("Time's up!") return; } TotalSeconds - = 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

L'argomento "if (TotalSeconds <= 0)" assicura che il conto alla rovescia si fermi a zero e visualizzi il messaggio "Tempo scaduto!" Messaggio. Il "window.setTimeout (" Tick () ", 1000);" la funzione assicura che il conto alla rovescia continui fino a raggiungere lo zero.

5

Inserisci una funzione per aggiornare il timer ogni tick in modo da poter vedere il conto alla rovescia:

function UpdateTimer() { Timer.innerHTML = TotalSeconds; }

6

Il tuo script ora ha questo aspetto:

var Timer; var TotalSeconds;

function CreateTimer(TimerID) { Timer = document.getElementById(TimerID); Secondi totali = 10; UpdateTimer() window.setTimeout("Tick()", 1000); }

function Tick() { if (TotalSeconds <= 0) { alert("Tempo scaduto!") return; } Secondi Totali -= 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

function UpdateTimer() { Timer.innerHTML = TotalSeconds; }

7

Salva il file. Per utilizzare lo script su una pagina Web, utilizza questo codice HTML:


$config[zx-auto] not found$config[zx-overlay] not found