42 lines
1.1 KiB
Vue
42 lines
1.1 KiB
Vue
<script setup lang="ts">
|
|
const showTime = ref<Date>(new Date())
|
|
const renewTime = ()=>{
|
|
console.log("正在更新时间")
|
|
showTime.value = new Date()
|
|
|
|
}
|
|
let st: string | number | NodeJS.Timeout | undefined
|
|
onMounted(()=>{
|
|
st = setInterval(renewTime,1000)
|
|
})
|
|
onBeforeUnmount(()=>{
|
|
clearInterval(st)
|
|
})
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<Title>大屏时钟</Title>
|
|
<client-only>
|
|
<div>
|
|
<el-text>{{(showTime.getHours()%12)/10<1?`0${showTime.getHours()%12}`:showTime.getHours()%12}}</el-text>
|
|
<el-text style="font-size: 5vw" type="primary">{{(showTime.getHours()/12>1?"PM":"AM")}}</el-text>
|
|
<el-text>:</el-text>
|
|
<el-text>{{(showTime.getMinutes())/10<1?`0${showTime.getMinutes()}`:showTime.getMinutes()}}</el-text>
|
|
<el-text style="font-size: 5vw">:</el-text>
|
|
<el-text style="font-size: 5vw">{{(showTime.getSeconds())/10<1?`0${showTime.getSeconds()}`:showTime.getSeconds()}}</el-text>
|
|
</div>
|
|
</client-only>
|
|
</template>
|
|
|
|
<style scoped>
|
|
div{
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
div *{
|
|
font-size: 20vw;
|
|
}
|
|
</style> |