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
|
<!DOCTYPE html>
<html>
<head>
<title>horloge</title>
<style>
html, body {margin: 0;padding: 0;background: #87CEEB;}
#horloge{
position:absolute;
top:50%;
left:50%;
width:40%;
height:auto;
transform:translate(-50%, -50%);
}
</style>
<script src="snap.svg-min.js"></script>
</head>
<body>
<svg viewBox="0 0 100 100" id="horloge"></svg>
<script>
var paper= Snap("#horloge");
var seconde,minute,heure;
var s,mn,h;
function now(){
let date = new Date();
s = date.getSeconds();
mn = date.getMinutes();
h = date.getHours()%12;
}
function calage_h_min(){
minute.transform(`r${6*mn+s/10},50,50`);
heure.transform(`r${30*h+mn/2+s/120},50,50`);
}
function initHorloge(){
let attribute={'stroke-width' :2,stroke: 'white'};
paper.circle(50,50,45).attr({
'stroke-width' :3,
stroke: 'white',
fill:'none'
});
minute= paper.line(50,20,50,50).attr(attribute);
heure=paper.line(50,26,50,50).attr(attribute);
now();
calage_h_min();
paper.circle(50,50,3).attr('fill','white');
seconde=paper.line(50,15,50,50).attr({
'stroke-width' :1,
stroke: 'red'
}).transform(`r${6*s},50,50`);
paper.circle(50,50,1.5).attr('fill','red');
let grad=paper.g();
for (let i=0 ; i<4 ;i++){
grad.add( paper.circle(50,10,2).transform(`r${90*i},50,50`) );
}
for (let j=0 ; j<14 ;j++){
grad.add( paper.circle(50,10,1).transform(`r${30*j},50,50`) );
}
grad.attr('fill','white');
anime();
}
function anime(){
now();
calage_h_min();
seconde.animate({transform:`r${6*s},50,50`},1000,mina.bounce,anime);//Pour 270°, ça plante
}
window.addEventListener('load',initHorloge);
</script>
</body>
</html> |
