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
106
107
108
109
110
111
112
113
114
115
116
|
<html lang="en">
<head>
<title>Bennet</title>
<link rel="stylesheet" href="odometer.css">
<link rel="stylesheet" href="bennet.css">
<script src="odometer.js" defer></script>
</head>
<body>
<table>
<thead>
<tr>
<td colspan="2"><span class="label">How old is Bennet?</span></td>
</tr>
</thead>
<tbody>
<tr>
<td>
<div id="year" class="odometer">0</div>
</td>
<td><span class="label">Years, or...</span></td>
</tr>
<tr>
<td>
<div id="month" class="odometer">0</div>
</td>
<td><span class="label">Months, or...</span></td>
</tr>
<tr>
<td>
<div id="week" class="odometer">0</div>
</td>
<td><span class="label">Weeks, or...</span></td>
</tr>
<tr>
<td>
<div id="day" class="odometer">0</div>
</td>
<td><span class="label">Days, or...</span></td>
</tr>
<tr>
<td>
<div id="hour" class="odometer">0</div>
</td>
<td><span class="label">Hours, or...</span></td>
</tr>
<tr>
<td>
<div id="minute" class="odometer">0</div>
</td>
<td><span class="label">Minutes, or...</span></td>
</tr>
<tr>
<td>
<div id="second" class="odometer">0</div>
</td>
<td><span class="label">Seconds, or...</span></td>
</tr>
<tr>
<td colspan="2">
<span id="total" class="label"></span>
</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
const birth = new Date("11/01/2017 06:13:00");
const now = new Date();
let diff = Math.round((now.getTime() - birth.getTime()) / 1000);
const $year = document.getElementById("year");
const $month = document.getElementById("month");
const $week = document.getElementById("week");
const $day = document.getElementById("day");
const $hour = document.getElementById("hour");
const $minute = document.getElementById("minute");
const $second = document.getElementById("second");
const $total = document.getElementById("total");
setInterval(() => {
$year.innerHTML = Math.floor(diff / 31536000).toString();
$month.innerHTML = Math.floor(diff / 2592000).toString();
$week.innerHTML = Math.floor(diff / 604800).toString();
$day.innerHTML = Math.floor(diff / 86400).toString();
$hour.innerHTML = Math.floor(diff / 3600).toString();
$minute.innerHTML = Math.floor(diff / 60).toString();
$second.innerHTML = diff.toString();
let total = diff;
const years = Math.floor(diff / 31536000);
total -= years * 31536000;
const months = Math.floor(total / 2592000);
total -= months * 2592000;
const days = Math.floor(total / 86400);
total -= days * 86400;
const hours = Math.floor(total / 3600);
total -= hours * 3600;
const minutes = Math.floor(total / 60);
total -= minutes * 60;
const seconds = total;
$total.innerHTML = `${years} Year${trn(years)}, ${months} Month${trn(months)}, ${days} Day${trn(days)}, ${hours} Hour${trn(hours)}, ${minutes} Minute${trn(minutes)}, and ${seconds} Second${trn(seconds)} old`;
diff++;
}, 1000);
function trn(num) {
return num === 1 ? "" : "s";
}
</script>
</body>
</html>
|