UN CHRONOMETRE EN SVG+JAVASCRIPT

<?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 zip

30 janvier 2008 11:47:31 :

orthographe