Chronomètre amélioré

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.