-
Notifications
You must be signed in to change notification settings - Fork 0
/
example.js
70 lines (63 loc) · 1.32 KB
/
example.js
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
// Fixed clock
createAnalogClock({
id: 'clock1',
size: 300,
date: 'December 17, 1995 10:10:23'
});
// Clock with custom colors
createAnalogClock({
id: 'clock2',
size: 200,
color: '#d2d2aa',
visibleSecondHand: false,
backgroundColor: '#303011'
});
// Smooth moving clock with digital display
(function createClock3(){
var runnning = true;
var lastTime = null;
var clock3Button = document.getElementById('clock3-button');
clock3Button.addEventListener('click', () => {
runnning = !runnning;
});
createAnalogClock({
id: 'clock3',
size: 170,
smooth: true,
showDigital: true,
dateFunc: (now) => {
if (runnning) {
lastTime = now;
return now;
} else {
return lastTime;
}
}
});
})();
// Reverse clock
createAnalogClock({
id: 'clock4',
size: 240,
dateFunc: (now) => - now.getTime(),
smooth: true,
showDigital: true,
color: '#dd22dd',
backgroundColor: '#000000'
});
// fast clock
createAnalogClock({
id: 'clock6',
size: 250,
dateFunc: (now) => now.getTime() * 4,
nextFunc: (date) => 250,
showDigital: true,
});
// Clock with custom background image
createAnalogClock({
id: 'clock5',
size: 250,
//shadowing: false,
color: '#ffffff',
backgroundImage: 'https://images.pexels.com/photos/1095601/pexels-photo-1095601.jpeg'
});