Un chronometre en svg+javascript

Soyez le premier à donner votre avis sur cette source.

Vue 15 171 fois - Téléchargée 538 fois

Description

c'est une modification de ma source :
http://www.javascriptfr.com/codes/DOM-SVG-HORLOGE-ANALOGIQUE_43173.aspx
pour pouvoir afficher un cronometre et repondre a la question :
http://www.javascriptfr.com/infomsg.aspx?ID=1068108

Source / Exemple :


<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" >
	
	<g stroke="black">
		<line x1="50" x2="50" y1="50" y2="5" stroke-width=".5" id="secondes" />
		<line x1="50" x2="50" y1="50" y2="15" stroke-width="1" id="minutes" />
	</g>
	<g stroke="black" id="marques">
		<circle cx="50" cy="50" r="3" stroke-width="1" fill="white" id="small"/>
	</g>
	<circle cx="5" cy="5" r="5" stroke-width="1" fill="blue" onclick="bouton_start_end()"/>
	<circle cx="9" cy="9" r="5" stroke-width="1" fill="red" onclick="bouton_clear()"/>
	<script type="text/javascript">
		<![CDATA[
			var SVG_NS ="http://www.w3.org/2000/svg";
			const pi=3.141592754
			function getMilis(){
				var a=new Date();
				return (a.getHours()*24+a.getMinutes()) * 60+a.getSeconds();
			}
			var base=getMilis();
			var stop=base;
			var vargo=false;
			var timeout;
			function bouton_start_end(){
				if (vargo){
					vargo=false;
					stop=getMilis();
					clearTimeout(timeout);
				}else{
					base+=getMilis()-stop;
					vargo=true;
					ANIM();
				}
			}
			function bouton_clear(){
				if (!vargo){
					stop=base;
				}
			}
			function ANIM(){
				var d=getMilis()-base;
				s=d%60;
				m=d/60;
				document.getElementById("minutes").setAttribute("x2", Math.cos((m-15)/30*pi)*35+50);
				document.getElementById("minutes").setAttribute("y2", Math.sin((m-15)/30*pi)*35+50);
				document.getElementById("secondes").setAttribute("x2", Math.cos((s-15)/30*pi)*45+50);
				document.getElementById("secondes").setAttribute("y2", Math.sin((s-15)/30*pi)*45+50);
				if (vargo)
					timeout=setTimeout("ANIM()", 1000);
			}
			ANIM();	// appel de l\'animation
			var p=document.getElementById("marques");
			var b=document.getElementById("small");
			for (i=0;i<60;i++){
				a=document.createElementNS(SVG_NS, "circle");
				a.setAttribute("cx", Math.cos((i-15)/30*pi)*47+50);
				a.setAttribute("cy", Math.sin((i-15)/30*pi)*47+50);
				a.setAttribute("r", "2");
				if (i%15==0){
					a.setAttribute("fill", "black");
				}else if (i%5==0){
					a.setAttribute("fill", "gray");
				}else{
					a.setAttribute("fill", "white");
				}
				a.setAttribute("stroke-width", "0.3");
				p.appendChild(a);
			}
		]]>
	</script>
</svg>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
153
Date d'inscription
mardi 17 août 2004
Statut
Membre
Dernière intervention
23 décembre 2010

merci coucou, je trouverai mon chrono en SVG
j'aime bien le côté simple du SVG pour ce genre d'application
kiki
Messages postés
153
Date d'inscription
mardi 17 août 2004
Statut
Membre
Dernière intervention
23 décembre 2010

salut coucou,
juste pour dire que chronometre prend un petit h ;-)

le pov' gars qui recherche un chronomètre sur phpcs, il se retrouve comme un âne devant une carotte trop haute pour lui

kiki

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.