-
Notifications
You must be signed in to change notification settings - Fork 0
/
script.js
67 lines (60 loc) · 2.16 KB
/
script.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
const face = document.querySelector(".face");
const hourHand = document.querySelector(".hour");
const minuteHand = document.querySelector(".minute");
const secondHand = document.querySelector(".second");
function createRotationElement(degrees, content, className, rotate) {
const div = document.createElement("div");
const fixedRotation = document.createElement("div");
fixedRotation.style.transform = `rotate(${rotate ? -degrees : 90}deg)`;
fixedRotation.innerHTML = content;
div.appendChild(fixedRotation);
div.classList.add(className);
div.style.transform = `rotate(${degrees}deg)`;
face.appendChild(div);
}
function createFace() {
for (let num = 1; num < 13; num++) {
createRotationElement((num + 3) * 30 % 360, num, "number", true);
createRotationElement((num + 3) * 30 % 360, num + 12, "small-number", true);
createRotationElement(num * 30 % 360, "", "dot", true);
}
for (let num = 0; num < 60; num++) {
if (num % 5 != 0) {
createRotationElement(num * 6 % 360, "", "line", false);
}
}
}
function getTime() {
const date = new Date();
return {
hours: date.getHours(),
minutes: date.getMinutes(),
seconds: date.getSeconds(),
timeString: date.toTimeString(),
};
}
function animateHands() {
const date = getTime();
const hours = date.hours;
const minutes = date.minutes;
const seconds = date.seconds;
document.title = date.timeString;
hourHand.style.transform = `rotate(${(hours * 30 + minutes / 2) - 90}deg)`;
minuteHand.style.transform = `rotate(${(minutes * 6 + seconds / 12) - 90}deg)`;
secondHand.style.transform = `rotate(${(seconds * 6) - 90}deg)`;
}
function setAccentColor() {
const params = new URLSearchParams(window.location.search);
if (!params.has("color")) {
return;
}
let color = params.get("color");
if (/^[0-9A-F]{6}$/i.test(color)) {
color = `#${color}`;
}
document.documentElement.style.setProperty("--accent", color);
}
setAccentColor();
createFace();
animateHands(); // called once here so hands update immediately on pageload
setInterval(animateHands, 1000);