Chronomètre amélioré

Soyez le premier à donner votre avis sur cette source.

Vue 10 250 fois - Téléchargée 782 fois

Description

Voici un chronomètre effectué en Javascript.
En plus du play/pause, il y a une remise à zéro possible.
Ce chronomètre permet également d'enregistrer 5 temps intermédiaires que vous pouvez effacer par la suite sans stopper le chrono.
Les boutons sont désactivés lorsque l'on ne peux effectuer l'action.

Source / Exemple :


<!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>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
		<title>Temps</title>
		
		<style type="text/css">
		#time
		{
			color:white;
			font-size: 75px;
			background-image:url('http://nsa10.casimages.com/img/2010/01/04/100104100036575158.png');
			text-align: center;
			background-repeat: no-repeat;
			background-position: center;
		}
		#presenter
		{
			list-style-type: decimal;
			font-size: 17px;
			visibility: hidden;
		}
		
		dt
		{
			font-size: 20px;
			text-decoration: underline;
		}
			</style>
<script type="text/javascript">	
	var centi = 0;
	var sec = 0;
	var min = 0;
	var h = 0;
	var loc;
	var compt = 0;
	
	function chrono()
		{
			centi++;
			centi*10;//=======pour passer en dixièmes de sec
			//=== on remet à zéro quand on passe à 1seconde, 1min, 1heure, 1jour
			if (centi > 9) {
				centi = 0;
				sec++;
			}
								
			if (sec > 59) {
				sec = 0;
				min++;
			}
								
			if (min > 59) {
				min = 0;
				h++;
			}
								
			//======
			
			//================ On ajoute un zero pour avoir 1h01:05sec
			
			if (sec < 10) {
				var sec_ = "0" + sec;
			}
			else {
				var sec_ = sec;
			}
				
			if (min < 10) {
				var min_ = "0" + min;
			}
			else {
				var min_ = min;
			}
			//===============
								
			var loc = h + ":" + min_ + ":" + sec_ + ":" + centi;
			//================= Pour que cela s'affiche dans l'élément "time"
			document.getElementById("time").innerHTML = loc;
			//=================lancement du chrono
			reglage = window.setTimeout("chrono();",100);
		} 
	
	
	function debut()  //== Activation et désactivation des boutons
		{
				document.parametre.lance.disabled = "disabled";
				document.parametre.pause.disabled = "";
				document.parametre.zero.disabled = "";
				document.parametre.interme.disabled = "";
		}
	function arret() 
		{	
				window.clearTimeout(reglage); // arrêter le temps
				document.parametre.lance.disabled = "";
				document.parametre.pause.disabled = "disabled";
				document.parametre.zero.disabled = "";
				document.parametre.interme.disabled = "";
		}
		//=============
	function raz() //====pour remettre à zéro
		{ 
				document.parametre.zero.disabled = "disabled";
				document.parametre.interme.disabled = "disabled";
				centi =0;
				sec = 0;
				min = 0;
				h = 0; 
				loc = h + ":" + min+ "0:" + sec + "0:" + centi;	
				document.getElementById("time").innerHTML = loc;
				document.getElementById('presenter').style.visibility='hidden';
		}
		
		function inter() //====Pour afficher les temps intermédiaires
		{
			centi;
			sec ;
			min ;
			h ;
			loc;
			//======on reprend la condition pour que ily ait 1h01 et 05 sec
			if (sec < 10) {
				var sec_ = "0" + sec;
			}
			else {
				var sec_ = sec;
			}
				
			if (min < 10) {
				var min_ = "0" + min;
			}
			else {
				var min_ = min;
			}
			
			///=====================
			 loc = h + ":" + min_ + ":" + sec_ + ":" + centi;
			 //=====================
			document.getElementById('presenter').style.visibility='visible';
			// pour afficher les temps intermédiaire si on clique dessus
			if(compt == 0)
			document.getElementById("interm1").innerHTML = loc ;
			else if(compt == 1)
			document.getElementById("interm2").innerHTML = loc ;
			else if(compt == 2)
			document.getElementById("interm3").innerHTML = loc ;
			else if(compt == 3)
			document.getElementById("interm4").innerHTML = loc ;
			else if(compt == 4)
			document.getElementById("interm5").innerHTML = loc ;

			compt++;
			//=====================
		}
		
		function effacer()
		{
			document.getElementById("interm1").innerHTML = "" ;
			document.getElementById("interm2").innerHTML = "" ;
			document.getElementById("interm3").innerHTML = "" ;
			document.getElementById("interm4").innerHTML = "" ;
			document.getElementById("interm5").innerHTML = "" ;
			compt= 0
		}
			
</script>
</head>
	 
	<body> 
	<h2  name="affi" id="time"></h2>
	<form name="parametre">
	<input type="button" name="lance"  value="Lancer" onclick="chrono();debut();">
	<input type="button" name="pause"  value="Pause" onclick="arret();" disabled="disabled">
	<input type="button" name="zero"  value="Remettre &#224; z&#233;ro" onclick="arret();raz();effacer();" disabled="disabled">
	<input type="button" name="interme"  value="Temps interm&#233;diaire" onclick="inter();" disabled="disabled">
	</form>
	<div id="presenter">
	<dl>
	<dt> Temps 1</dt>
	<dd id="interm1"> </dd>
	<dt > Temps 2</dt>
	<dd id="interm2"> </dd>
	<dt> Temps 3</dt>
	<dd id="interm3"> </dd>
	<dt> Temps 4</dt>
	<dd id="interm4"> </dd>
	<dt> Temps 5</dt>
	<dd id="interm5"> </dd>
	</dl>
	<input type="button" name="Effacer"  value="Effacer les temps interm&#233;diaire" onclick="effacer();debut();">

	</div>
	</body>
</html>

Conclusion :


Voila, vous n'avez besoin de rien modifier pour le faire fonctionner.
J'ai rajouté une touche de style que vous pouvez supprimer/modifier en modifiant le corps de la balise <style>.
Si vous voyez des erreurs ou avez des idées d'améliorations, vous pouvez les poser en commentaire

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Comme dit précédemment sur d'autre chrono, se baser sur un setTimeOut n'est pas précis puisque cela dépend de l'activité de l'ordinateur et du browser. Ce baser sur l'heure est beaucoup plus juste. Sinon bon code. Petite suggestion : lorsque l'on ajoute un temps, cela serait plus pratique de le mettre au début et de décaller le reste plutôt que de le rajouter à la fin. Tu pourrais faire pareil pour pouvoir en ajouter plus. Ceux à la fin seraient supprimé.
Kolosta
Messages postés
2
Date d'inscription
dimanche 10 janvier 2010
Statut
Membre
Dernière intervention
14 janvier 2010
-
Pour ce qui est de se baser sur setTimeout:
Je ne savais pas que cela pouvais être imprécis et ne voit pas pourquoi. Cependant je ne vois pas comment comment on se base sur l'heure pour un chrono et si tu arrive à me l'expliquer, je le modifierai volontier.
Pour les temps intermédiaires:
N'importe qui ayant des connaissances (minimes) est capable d'en ajouter d'autre. Cependant, si plusieurs personnes le demandes j'en rajouterait 5 autres.
Quant à les placer avant le chrono: Pourquoi pas mais en ce cas, avec un style affichant le chronomètre en assez gros, on ne pourrait plus accéder au chrono et au boutons avec 7 - 8 temps intermédiaires.

Si vous avez d'autres suggestions....
jdmcreator
Messages postés
656
Date d'inscription
samedi 30 décembre 2000
Statut
Membre
Dernière intervention
20 juillet 2012
3 -
Justement, vous pourriez supprimer ceux de trop.

Pour sa baser sur l'heure, il suffit d'utiliser un setTimeOut plus rapide pour récupérer la date à plus d'intervalle et la comparer avec l'heure prise au début. Ainsi, même si l'ordi gêlerait, le chronomètre continuerait de fonctionner. Si vous voyez de quoi je veux parler
Kolosta
Messages postés
2
Date d'inscription
dimanche 10 janvier 2010
Statut
Membre
Dernière intervention
14 janvier 2010
-
J'avais fait des recherche et trouvé cela pou l'heure.
Cependant, étant sur un projet plus important en ce moment, si je le modifie sa sera plus tard.
Pour les temps intermédiaire en trop, il faut juste rajouter un "id" par temps intermédiaire et les placer en "hidden". J'essayerai de modifier.

Merci pour l'explication :)
quentinix
Messages postés
100
Date d'inscription
dimanche 15 février 2009
Statut
Membre
Dernière intervention
29 février 2016
-
c'est parfait pour se que je veux

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.