Chronomètre amélioré

Soyez le premier à donner votre avis sur cette source.

Vue 10 722 fois - Téléchargée 813 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

Merciii fort ce script m'a bcp aider c'est ce que je veux exactement merciiiiiii encore plus
DarkShoka
Messages postés
75
Date d'inscription
mardi 6 octobre 2015
Statut
Membre
Dernière intervention
2 mai 2017

Truc de malade :)
sartoz
Messages postés
27
Date d'inscription
vendredi 15 octobre 2010
Statut
Membre
Dernière intervention
12 août 2012

Excellent , sauf que ya quelques améliorations à faire dans le code
font-size: 75px;

que j'ai remplacé par font-size: 55px;
car les chiffres sont hors cadre

et aussi le fichiers png , ne pas le faire pointé chez ton hébergeur le mettre direct dans le zip ça évitera un truc vide quand l'url aura changé
Jewth
Messages postés
1
Date d'inscription
mercredi 29 avril 2009
Statut
Membre
Dernière intervention
23 avril 2010

Trop coooool !!! Chapeau bas
cs_Criquet1
Messages postés
1
Date d'inscription
vendredi 5 juin 2009
Statut
Membre
Dernière intervention
6 février 2010

c'est super !!!!! je cherchais un chronometre, je n'en avait jusque la pas trouver; mais grace a toi, j'en est un !

a+

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.