Ptite_Perle
A les clefs du forum
Je tiens le trousseau de clefs du forum
Fondatrice Messages : 5857 Venue : 27/06/2009 Je suis : Age : 60 Je vie à : Lyon Humeur : Bonne humeur Mes Points : 120037 Code Horloge Analogique | | Coucou Voici comme réaliser une Horloge analogique. En premier lieu, il te faut créer le fond de ton horloge ; ensuite les trois aiguilles,( Heure, minute et seconde) Ensuite il faudra insérer dans le code les adresses de l'image de l'horloge, et des trois aiguilles. Créer une page HTMLInsérer ce code: - Code:
-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" > <head> <title>Horloge Crea illusion fantasy</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <style type="text/css"> .aig { position: absolute; bottom: 170px; -moz-transform-origin: bottom center; -webkit-transform-origin: bottom center; -o-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; } #horloge { position: relative; height: 350px; width: 350px; } </style> <script type="text/javascript"> window.onload = function() { if(document.getElementsByTagName('body')[0].style.MozTransform == '' || document.getElementsByTagName('body')[0].style.WebkitTransform == '' || document.getElementsByTagName('body')[0].style.OTransform == '' || document.getElementsByTagName('body')[0].style.OTransform || document.getElementsByTagName('body')[0].style.msTransform == '' || document.getElementsByTagName('body')[0].style.transform == '') { var aigS = document.createElement('img'); aigS.setAttribute('src' , 'URL IMAGE SECONDE'); aigS.setAttribute('class', 'aig'); aigS.setAttribute('alt' , 'aiguille des secondes'); aigS.setAttribute('style', 'left: 170px;');
var aigM = document.createElement('img'); aigM.setAttribute('src' , 'URL IMAGE MINUTE'); aigM.setAttribute('class', 'aig'); aigM.setAttribute('alt' , 'aiguille des minutes'); aigM.setAttribute('style', 'left: 170px;');
var aigH = document.createElement('img'); aigH.setAttribute('src' , 'URL IMAGE HEURE'); aigH.setAttribute('class', 'aig'); aigH.setAttribute('alt' , 'aiguille des heures'); aigH.setAttribute('style', 'left: 170px;');
var horloge = document.getElementById('horloge'); horloge.appendChild(aigS); horloge.appendChild(aigM); horloge.appendChild(aigH); horloge.setAttribute('style', 'background: url(IMAGE DE FOND DE TON HORLOGE);');
var d = new Date(); var time = d.getSeconds() + 60 * d.getMinutes() + 3600 * d.getHours();
aigS.style.MozTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.OTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.msTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.transform = 'rotate(' + (time * 6) + 'deg)'; aigM.style.MozTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.OTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.msTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.transform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigH.style.MozTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.OTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.msTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.transform = 'rotate(' + Math.round(time / 120) + 'deg)';
setInterval(function() { time++; aigS.style.MozTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.WebkitTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.OTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.msTransform = 'rotate(' + (time * 6) + 'deg)'; aigS.style.transform = 'rotate(' + (time * 6) + 'deg)'; aigM.style.MozTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.WebkitTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.OTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.msTransform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigM.style.transform = 'rotate(' + Math.round(time / 10) + 'deg)'; aigH.style.MozTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.WebkitTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.OTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.msTransform = 'rotate(' + Math.round(time / 120) + 'deg)'; aigH.style.transform = 'rotate(' + Math.round(time / 120) + 'deg)'; }, 1000); } }; </script> <div id="horloge"> </div> </body> </html> Ensuite tu créer un iframe que tu installera ou tu le souhaite - Code:
-
<iframe src="URL DE TA PAGE HTML" height="350" width="350" frameborder="0" scrolling="no"></iframe> Le résultat d'une horloge faite pour le forum La gazette de la pub. FRAME |
| |