feat: date component updates in realtime
This commit is contained in:
parent
827b7ef98a
commit
26103814ac
@ -1,13 +1,19 @@
|
||||
<script lang="ts">
|
||||
const { date }: { date: Date } = $props();
|
||||
const difference = new Date().getTime() / 1000 - date.getTime() / 1000;
|
||||
const seconds = ~~(difference % 60);
|
||||
const minutes = ~~(difference / 60) % 60;
|
||||
const hours = ~~(difference / 3600) % 24;
|
||||
const days = ~~(difference / 86400);
|
||||
|
||||
let currentDate = $state(Date.now());
|
||||
let difference = $derived(currentDate / 1000 - date.getTime() / 1000);
|
||||
let seconds = $derived(~~(difference % 60));
|
||||
let minutes = $derived(~~(difference / 60) % 60);
|
||||
let hours = $derived(~~(difference / 3600) % 24);
|
||||
let days = $derived(~~(difference / 86400));
|
||||
|
||||
setInterval(() => {
|
||||
currentDate = Date.now();
|
||||
});
|
||||
</script>
|
||||
|
||||
<p class="group underline">
|
||||
<span class="group underline">
|
||||
<span class="group-hover:hidden">
|
||||
about
|
||||
{#if minutes == 0}
|
||||
@ -24,4 +30,4 @@
|
||||
<span class="hidden group-hover:block">
|
||||
{date.toLocaleString()}
|
||||
</span>
|
||||
</p>
|
||||
</span>
|
||||
|
Loading…
Reference in New Issue
Block a user