Crer une jolie Horloge

HwRZxLc4 · 22/05/2006, 16h03

Bonjour,

J'aimerais crer une jolie horloge soit a aiguille ou digital, c'est possible sa ?

**scorpking** · 22/05/2006, 16h09

en java oui en php jamais entendu parler

**SpaceFrog** · 22/05/2006, 16h14

en javascript c'est possible ...
y'a plein de possibilités ...
en digital à aiguille fantaisie ...

HwRZxLc4 · 22/05/2006, 16h24

je cherche qullque chause de designe, vous avez des sites de script ?

**SpaceFrog** · 22/05/2006, 16h27

design ??? heu tu n'as pas une description plus précise ?

HwRZxLc4 · 22/05/2006, 16h44

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

**SpaceFrog** · 22/05/2006, 17h04

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**javatwister** · 22/05/2006, 19h48

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

**SpaceFrog** · 23/05/2006, 08h36

bon javatwister ... si tu sors la grosse cavalerie ...
fallait pas me chercher ...
mais uniquement sous IE ...

**javatwister** · 23/05/2006, 09h33

comme quoi js a vraiment été inventé pour déconner

**Auteur** · 23/05/2006, 10h18

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

Crer une jolie Horloge

JavaScript

Discussions similaires

Partager

Partager