Crer une jolie Horloge

Version imprimable

22/05/2006, 16h03
HwRZxLc4

Crer une jolie Horloge

Bonjour,

J'aimerais crer une jolie horloge soit a aiguille ou digital, c'est possible sa ?
22/05/2006, 16h09
scorpking

en java oui en php jamais entendu parler
22/05/2006, 16h14
SpaceFrog

en javascript c'est possible ...
y'a plein de possibilités ...
en digital à aiguille fantaisie ...
22/05/2006, 16h24
HwRZxLc4

je cherche qullque chause de designe, vous avez des sites de script ?
22/05/2006, 16h27
SpaceFrog

design ??? heu tu n'as pas une description plus précise ?
22/05/2006, 16h44
HwRZxLc4

ben moderne, quelque chaise de pas courrant, pro.....:D

tu risque vite de te heurter à un problème de polices de caractères ...
pour que l'horloge s'affiche sur le poste du client il faut que la police soit installée ...

Je te propose plutot de passer par des images ...
il te suffit juste d'avoir une collection d'images de 0 à 9
et puis un fond en image également ...
ensuite il te suffit de gerer le src des images ...

sinon un script très simple de pendule:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<SCRIPT LANGUAGE="JavaScript"> 
function clock() { 
if (!document.layers && !document.all) return;
var ticktock = new Date();
var hours = ticktock.getHours();
var minutes = ticktock.getMinutes();
 
 
var apm = "am";
switch (true){
    case (hours > 11): apm = "pm";
    case (hours > 12): hours = hours - 12;
                       if(hours == 0){ hours = 12;};
                       if (hours.toString().length<2){hours="0"+hours;};
    case (minutes.toString().length < 2): minutes = "0" + minutes;
 
    }
 
var clockValue = hours + ":" + minutes + " " + apm;
          document.clock.clockface.value = clockValue; 
          setTimeout("clock()", 100); }  </script>
 
 
</head>
 
<BODY onLoad="clock()">
 
<FORM NAME="clock" enctype="text/plain" onSubmit="0"> <input type="text" NAME="clockface" SIZE="6" VALUE="Clock"><BR> </FORM>
 
 
</body>

22/05/2006, 19h48
javatwister

ah ah! qui aurait cru que je ressortirais ce truc pas fini un jour!

http://javatwist.imingo.net/pendule.php

me demande même pas comment j'ai tenté de positionner correctement tous les éléments, je m'en souviens plus :mouarf:
23/05/2006, 08h36
SpaceFrog

bon javatwister ... si tu sors la grosse cavalerie ...
fallait pas me chercher ...
mais uniquement sous IE ...:aie:
23/05/2006, 09h33
javatwister

:mouarf: :lol: comme quoi js a vraiment été inventé pour déconner :mrgreen:

Il suffit de peu de chose pour que le script de SpaceFrog fonctionne sous Firefox. En voici une variante (fonctionne sous IE et Firefox). Certes elle a moins d'allure.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#Div1{
position: absolute;
left: 0px;
top: 0px;
text-align: left;
}
 
//-->
</style>
 
<script type="text/javascript">
<!--
var x0, y0;
var d = 50;
var fctS, minPrec=0;
 
function Start()
{
 var elmt, i;
 
 y0 = document.body.clientHeight / 2;
 x0 = document.body.clientWidth / 2;
 
 elmt = document.getElementById("Div1")
 elmt.style.top = Math.round(y0);
 elmt.style.left = Math.round(x0);
 
 for (i=1; i<=12; i++)
 {
   x1 = (d+20) * Math.cos( i*Math.PI/6-Math.PI/2 );
   y1 = (d+20) * Math.sin( i*Math.PI/6-Math.PI/2 );
 
   x1 = Math.round(x1);
   y1 = Math.round(y1);
 
   elmt.innerHTML += "<div style=\"left: "+x1+"; top: "+y1+"; position: absolute; text-align: center;\">"+i+"</div>";
 }
 
 fctS = window.setInterval("Rotation()",1000);
}
 
function Rotation()
{
 var elmt, x1, y1, i;
 var MDate = new Date();
 var heure = MDate.getHours();
 var min = MDate.getMinutes();
 
 var sec = MDate.getSeconds();
 
 var aHeure = heure * Math.PI / 6 + min * Math.PI / 360 - Math.PI/2;
 var aMin = min * Math.PI / 30 - Math.PI/2;
 var aSec = sec * Math.PI / 30 - Math.PI/2;
 
 elmt = document.getElementById("Div2");
 elmt.innerHTML="";
 
 for (i=0; i<=10; i++)
 {
   x1 = x0 + (5*i) * Math.cos(aSec);          //Math.cos(angle*Math.PI/180);
   y1 = y0 + (5*i) * Math.sin(aSec);          //Math.sin(angle*Math.PI/180);
 
   x1 = Math.round(x1);
   y1 = Math.round(y1);
 
   elmt.innerHTML += "<div style=\"left: "+x1+"; top: "+y1+"; position: absolute; text-align: left;\">.</div>";
 }
 
 if (minPrec!=min)
 {
 elmt = document.getElementById("Div3");
 elmt.innerHTML="";
 
 for (i=0; i<=5; i++)
 {
   x1 = x0 + (10*i) * Math.cos(aMin);
   y1 = y0 + (10*i) * Math.sin(aMin);
 
   x1 = Math.round(x1);
   y1 = Math.round(y1);
 
   elmt.innerHTML += "<div style=\"font-weight: bold; color: #FF0000; left: "+x1+"; top: "+y1+"; position: absolute; text-align: left;\">.</div>";
 }
 
 elmt = document.getElementById("Div4");
 elmt.innerHTML="";
 
 for (i=0; i<=3; i++)
 {
   x1 = x0 + (10*i) * Math.cos(aHeure);
   y1 = y0 + (10*i) * Math.sin(aHeure);
 
   x1 = Math.round(x1);
   y1 = Math.round(y1);
 
   elmt.innerHTML += "<div style=\"font-weight: bold; color: #0000FF;left: "+x1+"; top: "+y1+"; position: absolute; text-align: left;\">.</div>";
 }
 
 }
 minPrec = min;
}
 
function Stop()
{
 window.clearInterval(fctS);
}
//-->
</script>
 
 
</head>
 
<body onload="Start()" onbeforeunload="Stop()">
<input type="button" value="Stop" name="BNom" onclick="Stop()">
 
<div id="Div1">.</div>
<div id="Div2">&nbsp;</div>
<div id="Div3">&nbsp;</div>
<div id="Div4">&nbsp;</div>
 
</body>
 
</html>