Codage JavaScript pour un compte à rebours de 10 à 0

JavaScript est un langage de script bien connu et largement utilisé, utilisé principalement pour écrire des applications pour des pages Web. Vous pouvez créer des centaines d'applications utiles à l'aide de JavaScript, y compris un compte à rebours. Vous pouvez coder un script JavaScript pour afficher un compte à rebours de 10 à zéro sur votre page Web et afficher un message lorsqu'il atteint zéro. Les scripts JavaScript peuvent être créés dans n'importe quel éditeur de texte, comme le Bloc-notes et WordPad, mais doivent être enregistrés avec une extension ".js" pour être fonctionnels.

1

Créez un nouveau fichier texte et nommez-le "timer.js". L'extension ".js" indique qu'il s'agit d'un fichier JavaScript. Ouvrez le fichier dans un éditeur de texte, tel que le Bloc-notes ou WordPad.

2

Définissez deux variables (Timer et TotalSeconds) en insérant ces deux lignes:

var Minuterie; var TotalSeconds;

3

Créez une nouvelle fonction (CreateTimer) qui affiche le minuteur sur votre page Web en insérant ce code:

function CreateTimer (TimerID, Time) {Timer = document.getElementById (TimerID); TotalSecondes = Temps ; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

Le "window.setTimeout("Tick()", 1000);" La fonction fait tourner la minuterie toutes les secondes. Votre script ressemble maintenant à ceci :

var Timer; var TotalSeconds;

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

4

Ajoutez une fonction qui oblige la minuterie à diminuer d'une seconde à chaque tick:

function Tick() { if (TotalSeconds <= 0) { alert("Le temps est écoulé !") return ; } TotalSecondes -= 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

L'argument "if (TotalSeconds <= 0)" garantit que le compte à rebours s'arrête à zéro et affiche le "Time's up!" un message. Le "window.setTimeout("Tick()", 1000);" La fonction garantit que le compte à rebours continue jusqu'à ce qu'il atteigne zéro.

5

Insérez une fonction pour mettre à jour le minuteur à chaque tick afin que vous puissiez voir le compte à rebours:

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

6

Votre script ressemble maintenant à ceci:

var Timer; var TotalSeconds;

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

function Tick() { if (TotalSeconds <= 0) { alert("Le temps est écoulé !") return ; } TotalSecondes -= 1; UpdateTimer () window.setTimeout ("Tick ()", 1000); }

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

7

Enregistrez le fichier. Pour utiliser le script sur une page Web, utilisez ce code HTML:


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