chronomètre en java script, avec redirection de lien

Comme le dit le titre de cet article, je vais vous montrer comment effectuer un chronomètre en java script qui va vous permettre de rediriger un utilisateur sur une nouvelle page au bout d’un certain temps. Le but de cette manip est d’afficher à l’utilisateur dans combien de temps l’action de redirection sera être effectuée.

Dans mon exemple je vais utiliser deux fichiers. Un premier que nous allons nommer « index.html » qui contiendra l’affichage (le fait de l’appeler ainsi permet que quand on arrivera dans le dossier le navigateur ira directement chercher ce fichier). En effet, quand un navigateur rentre dans un dossier, il va chercher un fichier dont l’intitulé sera « index.html » ou « index.php ». Et pour terminer un second fichiers que nous nommerons « chronometre.js ».

Notre fichier « index.html » contient le code suivant:

et le fichier « chronometre.js » contient lui le code suivant:

 

Quelques explications sur le code, et comment s’en servir.

Ce chronomètre est très simple à mettre en place. Dans le fichier « index.html » nous avons mit une ligne de code qui est « <script src= »chrono.js »></script> ». Cette ligne permet d’importer le fichier java script dans le fichier html. Vous devez remplacer « chrono.js » par « chemin/chrono.js ».

Le second point à voir est lors de l’appel de la méthode qui est « chrono(60); ». Quand le navigateur va rencontrer cette méthode c’est a partir de ce moment là que le chronomètre va être déclenché. Vous pouvez aussi remarquer que l’on passe en paramètre un chiffre qui ici est 60. Ce chiffre correspond au temps restant avant la redirection vers une autre page.

Pour afficher la valeur du chronomètre vous devez créer un conteneur qui comportera un id « chronoContent ». Vous pouvez le changer de nom mais il ne faudra pas oublier de le changer dans le fichier « chrono.js ».

Le dernier point est la redirection de page. En bas du fichier  » chrono.js » nous avons la fonction « parent.location.replace(‘http://www.bcprog.fr’); ». Pour rediriger vers votre page, il suffit de changer l’adresse actuel qui est « http://www.bcprog.fr » par votre adresse souhaité.

 

Voici le lien vers une page exemple de ce code mit en place:
www.exemples.bcprog.fr/compte_a_rebour/

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.