CodeS-SourceS est hébergé par Frontier.fr

Ce site au démarrage

begin process at 2012 05 28 12:57:49

Accueil Codes Tutoriels Forum Livres Emploi Services Connexion

Trouver un code source :

dans

[ Dernières recherches ]

Accueil >

CHRONOMÈTRE AMÉLIORÉ

Information sur la source

Note :

8,33 / 10

Catégorie :Date & Heure Classé sous :chronometre, temps, intermédiaire, RAZ, pause Niveau :Initié Date de création :10/01/2010 Date de mise à jour :10/01/2010 20:50:36 Vu / téléchargé :4 846 / 277

Auteur : Kolosta

Ecrire un message privé

Commentaire sur cette source (7)

Ajouter un commentaire et/ou une note

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

<!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 à zéro" onclick="arret();raz();effacer();" disabled="disabled">
<input type="button" name="interme" value="Temps intermé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édiaire" onclick="effacer();debut();">
</div>
</body>
</html>

<!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

Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

tt5.html 5 092 octets

Télécharger le zip

Historique

10 janvier 2010 20:50:37 :: ..

Sources de la même categorie

NOMBRE DE JOURS, MOIS ET ANNÉES DEPUIS LA NAISSANCE par marcenana

CALENDRIER ANNUEL UNIVERSEL AVEC SAINTS DU CALENDRIER ET FÊT... par 007Julien

OBTENIR LE NOMBRE DE JOURS D'UN MOIS SUIVANT SON ANNÉE par hugolegrand

SAINT DU JOUR par tefa24600

NIPCLOCK 1.2 par neep

Toutes les sources de la catégorie Date & Heure

Sources en rapport avec celle ci

SLEEP() SANS BOUCLE D'ATTENTE CONSOMMATRICE par Phildepantin

UN CHRONOMETRE EN SVG+JAVASCRIPT par coucou747

CHRONOMÈTRE MESURANT LA DURÉE D'UNE FONCTION par jesusonline

PHP ET JAVASCRIPT : AFFICHER UNE HORLOGE BASÉE SUR L'HEURE D... par darkweaver87

AFFICHER DATE ET HEURE ACTUELLE (SCRIPT TRES LÉGER ET SIMPL... par lelougarou

Commentaires et avis

Commentaire de jdmcreator le 13/01/2010 02:15:49

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é.

Commentaire de Kolosta le 13/01/2010 17:20:14

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....

Commentaire de jdmcreator le 14/01/2010 01:01:08

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

Commentaire de Kolosta le 14/01/2010 17:45:26

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 :)

Commentaire de quentinix le 18/01/2010 17:40:57 10/10

c'est parfait pour se que je veux

Commentaire de Criquet1 le 06/02/2010 18:24:19 10/10

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

a+

Commentaire de Jewth le 23/04/2010 11:30:49 5/10

Trop coooool !!! Chapeau bas

Ajouter un commentaire

Discussions en rapport avec ce code source dans le forum

Aide sur un chronometre avezc pause [ par Equinoxe5 ] Bonsoir,Je ne suis pas hyper calé en javascript, je cherche pour les besoins d'un quizz, un script avec un comptage du temps passé pour répondre à la Ecriture et lecture d'un cookie [ par zemele ] Bonjour,J'ai réalisé un script permettant de compter le temps passé sur une page. Un Cookie initial est créée deux niveaux au dessus de la page lançan [DEPLACE]définir un temps entre chaque post ? [ par Loser ] Bonsoir,est ce que c'est possible de faire un système de temps entre chaque post ? (l'utilisateur devra attendre temps de minute avant de poster)le to Définir un temps de chargement d'une page [ par Anthotill ] Salut à tousJ'ai une demande particulière à faire, puisque je souhaiterais connaître une solution pour définir un temps avant de charger une page..En Descente/Monter ScrollBar en meme temps [ par Sannazzarotiti ] Bonjour, j'ai 2 bloc div qui affiche un scrollbar grace a la proprieter css overflow. J'aimerait que si l'on descende une scrollbar, sa fasse la meme Quels sont les moyens pour encoder plusieurs éléments en même temps [ par way2web ] Quels sont les moyens mis à la disposition du programmeur pour encoder plusieurs éléments en même temps en javascript? Quels sont les avantages et inc Perte de fenêtre parent lors de superposition [ par cousinlol ] Bonsoir,J'ai un script A qui ouvre une fenêtre B avec "window.open" La fenêtre B ouvre la fenêtre C De façon aléatoire C faisait disparaître B. C'est Simuler l'effet de pause d'un alert [ par josh666 ] Bonjour a tous,Je ne savais pas vraiment dans quel section poster ceci, donc je le fais ici. Bon voici ma problématique... je suis en train de dévelop Problème de redirection [ par reecob ] Bonjour à tous, voilà, je suis encore un noob en JS. Ca fait environ 2h que je galère à faire une redirection temporelle, je ne comprends pas mon erre [DEPLACE]Images qui défile avec pause [ par twinsen60 ] BonjourJe sais que c'est possible d'avoir des images qui se chargent aléatoirement dans un dossier.Donc, j'ai 4 images (même taille, collé a coté)Mais

Nos sponsors

Derniers Blogs

IMAGINE CUP 2012, MAKE A SIGN EN FINALE par junarnoalg

KINECT 1.5 IS OUT ! par Vko

LES ACTUALITéS DE LA SEMAINE SUR C2I.FR (14 MAI - 20 MAI) par richardc

REACTIVE EXTENSIONS : CONSOMMER DES SERVICES AVEC RX PARTIE 3, LES PIèGES à éVITER par Groc

SHAREPOINT BLOG SITE, PROBLèME D'ARCHIVES par junarnoalg

Forum

MULTI SLIDER UNE SEUL PAGE par karouani

RE : CODE POUR FAIRE APPARAîTRE UN TEXTE EN DESSOUS D'UN LIEN par emuleed2k

RE : RéCUPERATION D'UNE VARIABLE DE JAVASCRIPT VIA PHP par smahaneAAI

POPUP OUVERT à PARTIR D'UN IFRAME par mrassaa

UTILISER UN .JS par zaikoe

Côté IT

Offres d'emploi

Formations Video

Appels d'offres

Recheche Web Master pour MAJ de plateformes Musical
Budget : 500€
Realisation d-une version 2 d-un site e-commerce existant sous prestashop-REPUBLICATION
Budget : 5 000€
Recherche Infogerance Serveur Debian Linux
Budget : 1 800€

Logiciels

sDEVIS-FACTURES vlPRO (8.1.0.3)
SDEVIS-FACTURES VLPRO (8.1.0.3)

sDEVIS-FACTURES vlPRO a été mis au point pour les particuliers, créateurs, entrepreneurs, artisa...

Cliquez pour télécharger sDEVIS-FACTURES vlPRO
974 Application Server (12.2.4.6)
974 APPLICATION SERVER (12.2.4.6)

Développez de puissantes applications dans un environnement de 'cloud computing', clusterisé, séc...

Cliquez pour télécharger 974 Application Server
vPicture (1.4.2.1)
VPICTURE (1.4.2.1)

Avec vPicture, hébergez vos images facilement et rapidement. vPicture est un utilitaire simple, ...

Cliquez pour télécharger vPicture
Easy-Planning (2.2.1.6)
EASY-PLANNING (2.2.1.6)

Easy-Planning permet de créer des plannings sous la représentation de diagrammes et est adapté au...

Cliquez pour télécharger Easy-Planning
COM-BACKUP (2.0)
COM-BACKUP (2.0)

COM-BACKUP est un logiciel de sauvegarde qui permet de planifier les sauvegardes de vos dossiers ...

Cliquez pour télécharger COM-BACKUP