S'enregistrer
Ptite_PerleFondatriceA les clefs du forumJe tiens le trousseau de clefs du forum- Messages : 5835
Venue : 27/06/2009 Je suis :
Age : 61
Je vie à : Lyon
Humeur : Bonne humeur
Mes Points : 124446
Code Horloge Analogique
Sam 1 Fév 2020 - 11:32
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 HTML
Insérer ce code:
Ensuite tu créer un iframe que tu installera ou tu le souhaite
Le résultat d'une horloge faite pour le forum La gazette de la pub.
FRAME
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 HTML
Insé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
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum
