blob: dc0ea0f60853bd00d24556a7e19b0e09d9cfba10 (
plain)
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
|
---
Template post
Title
---
<style>
@font-face {
font-family: 'Dosis';
font-weight: 200;
src: url('/Dosis-ExtraLight.otf');
}
#counter {
margin: 96px auto;
width: 15rem;
font-weight: normal;
font-family: 'Dosis', sans-serif;
}
#days {
width: min-content;
font-weight: 200;
font-size: 5rem;
font-family: inherit;
}
#time {
width: min-content;
font-weight: 200;
font-size: 4rem;
font-family: inherit;
}
#dates {
display: none !important;
}
</style>
<!-- Dosis: https://github.com/impallari/Dosis -->
<section id="counter">
<h1 id="days"></h1>
<h2 id="time"><span id="hours"></span>:<span id="minutes"></span>:<span id="seconds"></span></h2>
</section>
<script>
const BIRTH = Date.parse("2001-04-13T02:56:00-05:00");
const SEC_DAY = 60 * 60 * 24;
function calculate() {
let now = Date.now();
let lif = Math.floor((now - BIRTH) / 1000);
let day = Math.floor(lif / SEC_DAY);
let sub_day = lif % (60 * 60 * 24);
let hou = Math.floor(sub_day / (60 * 60));
let min = Math.floor( (sub_day % (60 * 60)) / 60 );
let sec = sub_day % 60;
return {
days: day,
hours: hou,
minutes: min,
seconds: sec
}
}
let days_reposition = 0;
function display() {
let time = calculate();
let day = document.getElementById('days');
let hour = document.getElementById('hours');
let minute = document.getElementById('minutes');
let second = document.getElementById('seconds');
day.innerText = time.days;
hour.innerText = human(time.hours);
minute.innerText = human(time.minutes);
second.innerText = human(time.seconds);
if (days_reposition % 60 == 0) {
let time_width = document.getElementById('time').clientWidth;
let days = document.getElementById('days');
// Perfect half looks weird? Cheat left
let pad = (time_width - days.clientWidth) / 2.5;
days.style.paddingLeft = `${pad}px`;
}
days_reposition++;
}
function human(n) {
if (n < 10) {
return '0' + n;
} else {
return n;
}
}
setInterval(display, 1000);
display();
</script>
|
