Un chronometre en svg+javascript

Télécharger le projet
Commenter

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

Du même auteur (coucou747)