Chronomètre dynamique

Soyez le premier à donner votre avis sur cette source.

Vue 28 536 fois - Téléchargée 1 942 fois

Description

Voici un chronomètre dynamique, avec un bouton start, pause et RAZ.
Le chrono peut vous compter normalement ( jour(s), heure(s), minute(s) et seconde(s)). Elle affiche le temps dans votre barre de status et dans un champ de texte.

Source / Exemple :


<html>
<head>
<title>Chronomètre</title>
</head>
<body bgcolor="#00CCFF">
<div align="center"><h4>Chronomètre</h4>
<script language='JavaScript'>
ss=0;
s=00;
m='0'+0;
h='0'+0;
j=0;
window.status = "Chrono "+j+" jour(s) et " +h + ' : '  + m + ' : ' + s ; 
function Chrono() {
if (m==0) {m='00'}
if(h==0) {h='00'}
if (ss<10){ss='0'+ss;}
if (s<10){s='0'+s;}
 window.status = "Chrono "+j+" jour(s) et " +h + ' : '  + m + ' : ' + s ; 
document.formu.heure.value =j+" jour(s) et "+h + ' : ' + m + ' : ' + s ;
document.formu.seco.value =ss;
s++;
ss++;
if (h==24){h='0'+0;j++;}
if (s==60){s=0;s=0; m++;if(m<10){m='0'+m;}}
if (m==60){m='0'+0;h++;if(h<10){h='0'+h;}}
chrono=window.setTimeout("Chrono();",1000);
}
</script>
</div>
<form action="" method="post" name="formu" id="formu">
  <p align="center"> 
    <input name="heure" type="text" id="heure" value="0 jour(s) et 00 : 00 : 00"> ou    <input name="seco" type="text"  value="00"> seconde(s).
  </p>
  <p align="center"> 
    <input type="button" name="Submit" value="Start!" onClick="Chrono();">
    <input type="button" name="Submit2" value="Stop!" onClick="window.clearTimeout(chrono);">
    <input type="button" name="Submit3" value="RAZ"onClick="if (confirm('Souhaitez vous mettre le compteur à zéro?')){s=0;m=0;j=0;h=0;ss=0; window.status = 'Chrono 0 jour(s) et 00 : 00 : 00' ; document.formu.heure.value ='0 jour(s) et 00 : 00 : 00';document.formu.seco.value='0'+0;}">
  </p>
  <p align="center"><br>
    La Valeur du chrono apparaît dans la zone de texte et dans la barre de navigation 
    en bas de votre fenêtre. <br>
    Cliquez sur le bouton Start pour faire partir le chrono, le bouton stop pour 
    l'arrêter et le bouton RAZ pour remettre à zéro</p>
  <p align="center">. 
    
  </p>
</form>
</body>
</html>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
25
Date d'inscription
jeudi 25 décembre 2008
Statut
Membre
Dernière intervention
17 mars 2009

ca ne remet pas à 0 biloutte

:)
Messages postés
7
Date d'inscription
dimanche 23 avril 2006
Statut
Membre
Dernière intervention
17 juin 2006

bravo excellent ton code mais il y
a une chose que je ne comprends pas
à la variable m et h tu fais '0'+0
pourquoi tu ne fais pas simplement
00?
Messages postés
8
Date d'inscription
dimanche 15 janvier 2006
Statut
Membre
Dernière intervention
16 janvier 2006

excellent code, un petit 10/10
Messages postés
2
Date d'inscription
lundi 10 janvier 2005
Statut
Membre
Dernière intervention
12 janvier 2005

salut!
c'est très bien ton code et merci de l'avoir publié. j'ai déjà essayer de faire la même chose il y a quelque temps mais c'est raté.
merci encore
Messages postés
18
Date d'inscription
mercredi 18 février 2004
Statut
Membre
Dernière intervention
8 janvier 2008

Salut !
Il est bien ton code !
Mais j'ai remarqué que lorsqu'on clique plusieurs fois sur "start!", le chrono accélère.
C'est pourquoi, j'ai ajouter un petit bout de code pour désactiver les boutons pour ne pas qu'on clique dessus.
(On ne peut cliquer qu'une fois dessus):

<html>
<head>
<title>Chronomètre</title>
</head>


Chronomètre

<script language='JavaScript'>
ss=0;
s=00;
m='0'+0;
h='0'+0;
j=0;
window.status = "Chrono "+j+" jour(s) et " +h + ' : ' + m + ' : ' + s ;
function Chrono() {
if (m==0) {m='00'}
if(h==0) {h='00'}
if (ss<10){ss='0'+ss;}
if (s<10){s='0'+s;}
window.status = "Chrono "+j+" jour(s) et " +h + ' : ' + m + ' : ' + s ;
document.formu.heure.value =j+" jour(s) et "+h + ' : ' + m + ' : ' + s ;
document.formu.seco.value =ss;
s++;
ss++;
if (h==24){h='0'+0;j++;}
if (s==60){s=0;s=0; m++;if(m<10){m='0'+m;}}
if (m==60){m='0'+0;h++;if(h<10){h='0'+h;}}
chrono=window.setTimeout("Chrono();",1000);
}
function starter() {
document.formu.commencer.disabled = "disabled";
document.formu.arreter.disabled = "";
}
function stopper() {
document.formu.commencer.disabled = "";
document.formu.arreter.disabled = "disabled";
}
</script>


<form action="" method="post" name="formu" id="formu">

ou seconde(s).












La Valeur du chrono apparaît dans la zone de texte et dans la barre de navigation
en bas de votre fenêtre.

Cliquez sur le bouton Start pour faire partir le chrono, le bouton stop pour
l'arrêter et le bouton RAZ pour remettre à zéro


.




</form>

</html>

Dis-moi ce que tu en penses !
Martin
Afficher les 7 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.