ExamAware/ExamShowboard-Legacy
3
0
Fork 0
mirror of https://hub.gitmirror.com/https://github.com/ExamAware/ExamShowboard-Legacy.git synced 2025-04-29 13:46:32 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Update Clock.vue

Browse Source
This commit is contained in:
Jursin 2024-12-01 09:37:18 +08:00 committed by GitHub
parent 5cdc7803d2
commit 821e735de1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
src/renderer/src/components/Clock.vue
View File

@ -1,7 +1,11 @@
<template> <template>
<v-card class="mx-auto" max-width="750"> <v-card class="mx-auto" max-width="750">
<v-card-text class="text-center"> <v-card-text class="text-center">
<div class="display-1 font-weight-bold" @click="cycleFontSize"> <div
:style="{ fontSize: fontSizes[fontSizeIndex] }"
class="display-1 font-weight-bold"
@click="cycleFontSize"
>
{{ formattedTime }} {{ formattedTime }}
</div> </div>
</v-card-text> </v-card-text>
@ -13,28 +17,23 @@ import { ref, onMounted } from 'vue';
import { useIntervalFn } from '@vueuse/core'; import { useIntervalFn } from '@vueuse/core';
import moment from 'moment'; import moment from 'moment';
// 使用ref来存储当前时间
const formattedTime = ref(''); const formattedTime = ref('');
const fontSizeIndex = ref(2); // 默认字体大小为7rem const fontSizeIndex = ref(2);
const fontSizes = ['3rem', '5rem', '7rem']; //不同分辨率适合使用不同大小的字体 const fontSizes = ['4rem', '6rem', '8rem'];
// 在页面加载完成后初始化时间
onMounted(() => { onMounted(() => {
updateTime(); updateTime();
}); });
const formatDateTime = (isoString: moment.MomentInput) => moment(isoString).format('HH:mm:ss'); const formatDateTime = (isoString: moment.MomentInput) => moment(isoString).format('HH:mm:ss');
// 更新时间的函数
function updateTime() { function updateTime() {
const now = new Date(); const now = new Date();
formattedTime.value = formatDateTime(now); formattedTime.value = formatDateTime(now);
} }
// 每隔一分钟更新一次时间
useIntervalFn(updateTime, 250); useIntervalFn(updateTime, 250);
// 切换字体大小的函数
function cycleFontSize() { function cycleFontSize() {
fontSizeIndex.value = (fontSizeIndex.value + 1) % fontSizes.length; fontSizeIndex.value = (fontSizeIndex.value + 1) % fontSizes.length;
} }
@ -42,6 +41,7 @@ function cycleFontSize() {
<style scoped> <style scoped>
.display-1 { .display-1 {
font-size: v-bind(fontSizes[fontSizeIndex]); /* 动态绑定字体大小 */ margin-top: 30px;
margin-bottom: 30px;
} }
</style> </style>