43 lines
1.1 KiB
Vue
43 lines
1.1 KiB
Vue
<template>
|
|
<span class="time-zone">{{serverNow}}</span>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { addMilliseconds } from 'date-fns';
|
|
import { defineProps, type PropType, ref, onMounted, watch } from 'vue';
|
|
import { formatTime } from '@/util/formatTime';
|
|
const props = defineProps({
|
|
serverTime: {
|
|
type: Object as PropType<Date>,
|
|
required: false,
|
|
default: new Date(),
|
|
},
|
|
timeFormat: {
|
|
type: String,
|
|
required: false,
|
|
default: 'HH:mm:ss'
|
|
}
|
|
})
|
|
|
|
const timeDiff = ref(0);
|
|
const serverNow = ref('');
|
|
|
|
watch(()=>props.serverTime, (newValue)=>{
|
|
const clientNow = new Date();
|
|
timeDiff.value = newValue.getTime() - clientNow.getTime();
|
|
});
|
|
|
|
function updateNow() {
|
|
const serverNowObj = addMilliseconds(new Date(), timeDiff.value);
|
|
serverNow.value = formatTime(serverNowObj, props.timeFormat);
|
|
setTimeout(() => {
|
|
updateNow();
|
|
}, 1000 - serverNowObj.getMilliseconds());
|
|
}
|
|
|
|
onMounted(() => {
|
|
const clientNow = new Date();
|
|
timeDiff.value = props.serverTime.getTime() - clientNow.getTime();
|
|
updateNow();
|
|
});
|
|
</script> |