Year

arbitrary-time-systems.html

@@ -14,12 +14,12 @@
 			}
 
 			table {
-				font-size: 48px;
+				font-size: 3vw;
 				margin: 0 auto;
 			}
 
 			td {
-				padding: 1rem;
+				padding: 2rem;
 			}
 		</style>
 	</head>
@@ -38,11 +38,11 @@
 						<td id="actual_time">Now</td>
 					</tr>
 					<tr>
-						<td>Base 62</td>
+						<td>Base 62 ISO</td>
 						<td id="base62_time">Now</td>
 					</tr>
 					<tr>
-						<td>Percentage of day</td>
+						<td>Percentage of year, day</td>
 						<td id="percentage_time">Now</td>
 					</tr>
 				</tbody>
@@ -50,6 +50,10 @@
 		</div>
 		<script>
 			const base62 = [];
+			const startOfYear = new Date();
+			startOfYear.setMonth(0, 1);
+			startOfYear.setHours(0, 0, 0);
+
 			const startOfDay = new Date();
 			startOfDay.setHours(0, 0, 0);
 
@@ -65,15 +69,20 @@
 
 			function getTimes() {
 				const now = new Date();
-				document.getElementById("actual_time").textContent = now.toLocaleTimeString();
+				document.getElementById("actual_time").textContent = now.toString();
 
+				const base62d = base62[now.getDate()];
+				const base62m = base62[now.getMonth()];
+				const base62y = `${base62[Math.floor(now.getFullYear() / 62)]}${base62[now.getFullYear() % 62]}`;
 				const base62h = base62[now.getHours()];
-				const base62m = base62[now.getMinutes()];
+				const base62mi = base62[now.getMinutes()];
 				const base62s = base62[now.getSeconds()];
-				document.getElementById("base62_time").textContent = `${base62h}:${base62m}:${base62s}`;
+				document.getElementById("base62_time").textContent = `${base62y}-${base62m}-${base62d} ${base62h}:${base62mi}:${base62s}`;
 
-				const per = (now.getTime() - startOfDay.getTime()) / (24 * 60 * 60 * 10);
+				const daysPerYear = now.getFullYear() % 4 == 0 ? 366 : 365;
-				document.getElementById("percentage_time").textContent = `${per.toFixed(2)}%`;
+				const pery = (now.getTime() - startOfYear.getTime()) / (daysPerYear * 24 * 60 * 60 * 10);
+				const perd = (now.getTime() - startOfDay.getTime()) / (24 * 60 * 60 * 10);
+				document.getElementById("percentage_time").textContent = `${pery.toFixed(2)}%, ${perd.toFixed(2)}%`;
 			}
 
 			getTimes();