Accueil > > > UN CHRONOMETRE EN SVG+JAVASCRIPT
UN CHRONOMETRE EN SVG+JAVASCRIPT
Information sur la source
Description
c'est une modification de ma source : http://www.javascriptfr.com/codes/DOM-SVG-HORLOG E-ANALOGIQUE_43173.aspx pour pouvoir afficher un cronometre et repondre a la question : http://www.javascriptfr.com/infomsg.aspx?ID=1068 108
Source
- <?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>
<?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>
Historique
- 30 janvier 2008 11:47:31 :
- orthographe
Sources du même auteur
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Calcul de DATE avec JavaScript [ par Dzeus ]
Salut, G besoin d'ecrire une fonction qui renvoie le nombre de jour exact écoulé entre deux dates ; exemple..20/02/2001 et 5/03/2001...ATTENTION : Il
Microsoft][ODBC Microsoft Access Driver] Data type mismatch in criteria expression [ par lise ]
Voici mon prb:je récupère 1 champs issue de ma base access à l'aide d'1 requête sql en asp, ce champs c 1 date je la stock dans une variable: "dat(j)"
Microsoft][ODBC Microsoft Access Driver] Data type mismatch in criteria expression [ par lise ]
Voici mon prb:je récupère 1 champs issue de ma base access à l'aide d'1 requête sql en asp, ce champs c 1 date je la stock dans une variable: "dat(j)"
Afficher la date de dernière modification [ par PsyCaDi ]
Bonjour,Comment fait-on pour afficher la date de dernière modification sur une page HTML? (peu importe le langage)Merci
Saisie de date en asp [ par breakdancer971 ]
Bonjour,j'utilise dreamweaverMxj'ai créé un formulaire ou l'on doit saisir des dates et lorsque je les enregistre quelque soit le format soit access o
HORLOGE À AIGUILLES QUI TOURNENT AVEC LA DATE [ par profnaimbus ]
Bonjour,j'ai un problème avec le script HORLOGE À AIGUILLES QUI TOURNENT AVEC LA DATE, je n'arrive pas à le faire fonctionner pouvez vous m'aider???
calcul d'un nombre de jours entre deux dates [ par borisV ]
Bonjour, je cherche à calculer (et afficher...) un nombre de jours en tapant une date d'arrivée et une date de départ.En fait, il faudrait peut-être s
date [ par Cristalline ]
Comment comparer la date d'une base de données avec celle d'aujourd'hui en javascript?Et comment faire pour l'afficher que si elle est supérieur à cel
date [ par natnat ]
bonjor,je suis en stage et ds une panade complete, si qq'1 pouvait m'aider, ce serait super coolje passe à suivre la fonction que j'ai copié et adapté
Afficher Date Heure en cours sur page web [ par charlybegood46 ]
Bonjour,Je cherche à afficher la date et l'heure actuelle dans une page web!Merci pour votre aide. Tout est pour le mieux dans le meilleur des mondes
|
Derniers Blogs
PRATIQUE DE SILVERLIGHT PAR ERIC AMBROSIPRATIQUE DE SILVERLIGHT PAR ERIC AMBROSI par MPOWARE
Je viens de finir la lecture du dernier livre d'
Eric Ambrosi
éditions PEARSON
Son livre donne une approche pratique de Silverlight qui sera aussi bien comprise par le développeur que par le designeur.
Tous les aspects du développement RIA sont abor...
Cliquez pour lire la suite de l'article par MPOWARE APPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NETAPPRENDRE à DéVELOPPER POUR LES MOBILES AVEC LA NOUVELLE GéNéRATION .NET par odewit
2 déclinaisons de Silverlight et 2 déclinaisons de Mono permettent dorénavant (ou permettront prochainement) de développer des applications .NET mobiles pour les principales plates-formes du marché :
Silverlight pour Symbian, basé sur Silverlight 2...
Cliquez pour lire la suite de l'article par odewit ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2ZUNE : NOUVELLE VERSION DU ZUNE SOFTWARE - V 4.2 par ROMELARD Fabrice
Avec la dernière génération du lecteur MP3 de Microsoft, le ZUNE HD, Microsoft a publié une nouvelle version du logiciel pour PC. Ainsi, je me suis décidé à installer celle-ci sur mon Tablet PC ACER, comme toujours le logiciel est donc tél...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice L'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIESL'INTERFACE NATURELLE DE WINDOWS PHONE 7 SERIES par odewit
La tendance est aux interfaces naturelles (NUI), et le keynote de Bill Buxton au MIX l'a bien souligné.
La charte graphique et ergonomique de Windows Phone 7 a donc été entièrement repensée en vue d'obtenir un maximum d'efficacité sur ce point. En re...
Cliquez pour lire la suite de l'article par odewit
Forum
RE : CONVERSIONRE : CONVERSION par peter2010
Cliquez pour lire la suite par peter2010
Logiciels
Academy System (10.9.4.0)ACADEMY SYSTEM (10.9.4.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods
|