-
-
Notifications
You must be signed in to change notification settings - Fork 14
/
index.html
51 lines (50 loc) · 3.66 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Decimal Clock</title>
<style>*{font-family:sans-serif}h1,h2{text-align:center}#clock-face{position:relative;width:70vh;height:70vh;border:solid 2vh #888;border-radius:37vh;margin:0 auto}#clock-face:before{content:'TEKNUM';display:block;position:absolute;font-size:2.5vh;color:#bbb;font-weight:500;letter-spacing:.3vh;text-align:center;width:100%;top:28%}#clock-face:after{content:'';display:block;position:absolute;width:4%;height:4%;left:50%;top:50%;margin:-2% 0 0 -2%;background:#000;border-radius:50%}.digit{position:absolute;font-size:6vh;height:7vh;width:7vh;margin-left:-3.5vh;margin-top:-3.5vh;text-align:center;user-select:none}.tick{position:absolute;width:.3%;left:50%;margin-left:-.15%;background:#888;height:2%;transform-origin:50% 2500%}.large.tick{height:4%;transform-origin:50% 1250%}#short-hand{position:absolute;width:1%;left:50%;top:27%;margin-left:-.5%;background:#000;height:23%;transform-origin:50% 100%}#long-hand{position:absolute;width:1%;left:50%;top:20%;margin-left:-.5%;background:#000;height:30%;transform-origin:50% 100%}#second-hand{position:absolute;width:.3%;left:50%;top:18%;margin-left:-.15%;background:#000;height:32%;transform-origin:50% 100%}</style>
<script type="module">
import { createApp } from "https://unpkg.com/petite-vue?module";
function DecimalClock() {
return {
$template: "#decimal-clock",
fractionOfDay: null,
timeString: null,
start() {
this.frameRequest = window.requestAnimationFrame(this.update.bind(this));
},
update() {
const date = new Date();
const timeOfDay = (date.getHours() * 3600 + date.getMinutes() * 60 + date.getSeconds()) * 1000 + date.getMilliseconds();
this.fractionOfDay = timeOfDay / 86400_000;
this.timeString = `${Math.floor(this.fractionOfDay * 10)}:${Math.floor((this.fractionOfDay * 1_000) % 100).toString().padStart(2, "0")}:${Math.floor((this.fractionOfDay * 100_000) % 100).toString().padStart(2, "0")}`;
this.frameRequest = window.requestAnimationFrame(this.update.bind(this));
},
stop() {
window.cancelAnimationFrame(this.frameRequest);
}
};
}
createApp({
DecimalClock
}).mount();
</script>
</head>
<body>
<template id="decimal-clock">
<h2>Decimal Clock</h2>
<div id="clock-face">
<div class="digit" v-for="(n, i) in 10" v-bind:style="{ left: (50 - Math.sin(Math.PI * i / 5) * 40) + '%', top: (50 + Math.cos(Math.PI * i / 5) * 40) + '%' }">{{ i }}</div>
<div v-bind:class="i % 10 === 0 ? 'large tick' : 'tick'" v-for="(n, i) in 100" v-bind:style="{ transform: `rotate(${i * 3.6}deg)` }"></div>
<div id="short-hand" v-if="fractionOfDay !== null" v-bind:style="{ transform: `rotate(${fractionOfDay * 360 + 180}deg)` }"></div>
<div id="long-hand" v-if="fractionOfDay !== null" v-bind:style="{ transform: `rotate(${fractionOfDay * 10 % 1 * 360 + 180}deg)` }"></div>
<div id="second-hand" v-if="fractionOfDay !== null" v-bind:style="{ transform: `rotate(${fractionOfDay * 1000 % 1 * 360 + 180}deg)` }"></div>
</div>
<h1 id="clock-time" v-if="timeString !== null">{{ timeString }}</h1>
</template>
<div v-scope="DecimalClock()" @mounted="start" @unmounted="stop"></div>
</body>
</html>