<< Retour au sommaire

 

 

La méthode « setTimeout »

 

 

Le sommaire :

  1. Présentation.
  2. Une horloge avec trotteuse.

 

 

Présentation

 

La méthode « setTimeout » est une méthode de l’objet « window ».

 

Son objectif est d’exécuter une fonction de façon cyclique dont le temps est spécifié en paramètre.

 

La syntaxe :

window.setTimeout("fonction ou instruction",temps); 

 

La description :

« fonction ou instruction » est la commande à répéter, elle doit être placée entre guillemets.

« temps » est la durée qui doit s’écouler entre deux exécutions.

le temps est exprimé en millième de seconde. Donc, pour exécuter une fonction toutes les secondes, la valeur à écrire est 1000.

 

 

Une horloge avec trotteuse

 

Je vous propose de réaliser la fabrication d’une horloge !

La fonction « afficher » récupère l’heure système et l’affiche dans le formulaire intitulé « horloge », dans le champ intitulé « ici ».

 

Pour que la fonction soit exécutée dès l’ouverture de la page, l’attribut « OnLoad » est placé dans la balise « body ».

 

La méthode « setTimeout » exécute la fonction « afficher » toutes les secondes !

 

Afficher l’horloge >>

 

Voici le code :

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >

<head>

<title>Horloge</title>

<!-- exécution d'un son en arrière-plan -->

<bgsound src="horloge.mp3" loop="infinite" />

<script type="text/javascript">

function afficher () {

var heure = new Date().getHours(); 

// gestion du singulier-pluriel

// concaténation de "heures" si 'lheure courante est supérieure à 1

// sinon concaténation de "heure"

if (heure>1) {

 heure = heure+" heures "; }

else {

 heure = heure +" heure "; }

// concaténation des minutes dans la variable "heure"

heure = heure +new Date().getMinutes();

// maintenant les secondes !

heure = heure+" et "+new Date().getSeconds()+" secondes";

// affichage de l'heure dans le formulaire

document.horloge.ici.value=heure;

setTimeout("afficher()",1000); }

</script>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

</head>

<body OnLoad="afficher()">

<table border="1">

<caption>

Super horloge !

</caption>

<tr><td>

<form name="horloge">

<input type="text" name="ici" />

</form>

</td></tr>

<tr><td>

<a href="../JavaScript/17_javascript_setTimeout.html">

Revenir au manuel</a>

</td></tr>

</table>

</body>

</html>

 

Philippe BOULANGER