Chronomètre dynamique

4/5 (7 avis)

Vue 36 660 fois - Téléchargée 2 253 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
mikymaxxx Messages postés 25 Date d'inscription jeudi 25 décembre 2008 Statut Membre Dernière intervention 17 mars 2009
24 févr. 2009 à 20:05
ca ne remet pas à 0 biloutte

:)
spaide_98 Messages postés 7 Date d'inscription dimanche 23 avril 2006 Statut Membre Dernière intervention 17 juin 2006
28 mai 2006 à 15:47
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?
sparklegamer Messages postés 8 Date d'inscription dimanche 15 janvier 2006 Statut Membre Dernière intervention 16 janvier 2006
16 janv. 2006 à 18:11
excellent code, un petit 10/10
randriandry1 Messages postés 2 Date d'inscription lundi 10 janvier 2005 Statut Membre Dernière intervention 12 janvier 2005
11 janv. 2005 à 14:45
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
cs_marte59 Messages postés 18 Date d'inscription mercredi 18 février 2004 Statut Membre Dernière intervention 8 janvier 2008
11 déc. 2004 à 13:38
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

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.