66 lines
2.2 KiB
Vue
66 lines
2.2 KiB
Vue
<script setup lang="ts">
|
|
const showTime = ref<Date>(new Date())
|
|
// const testDate = new Date()
|
|
// testDate.setHours(24)
|
|
// const showTime = ref<Date>(testDate)
|
|
|
|
const zkTime = new Date("2024-06-26 09:00:00")
|
|
|
|
var nowDate =new Date()
|
|
const toZkTime = ref<string>("")
|
|
const getToZkTime = ()=>{
|
|
nowDate = new Date()
|
|
var subtime = (zkTime - nowDate) / 1000; //计算时间差,并将毫秒转化为秒
|
|
var days = parseInt(subtime / 86400); //天 24*60*60*1000
|
|
var hours = parseInt(subtime / 3600) - 24 * days; //小时 60*60 总小时数-过去小时数=现在小时数
|
|
var mins = parseInt(subtime % 3600 / 60); //分钟 - (day*24) 以60秒为一整份 取余 剩下秒数 秒数/60就是分钟数
|
|
var secs = parseInt(subtime % 60); //以60秒为一整份 取余 剩下秒数
|
|
return days + "天 " + hours + "小时 " + mins + "分钟 ";
|
|
|
|
}
|
|
|
|
|
|
const renewTime = ()=>{
|
|
console.log("正在更新时间")
|
|
showTime.value = new Date()
|
|
toZkTime.value = getToZkTime()
|
|
}
|
|
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>{{showTime.getHours()>12?(showTime.getHours()%12)/10<1?`0${showTime.getHours()%12}`:showTime.getHours()%12:(showTime.getHours())/10<1?`0${showTime.getHours()}`:showTime.getHours()}}</el-text>
|
|
<el-text style="font-size: 5vw" type="primary">{{(showTime.getHours()>=12?"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>
|
|
<div>
|
|
<el-text style="font-size: 2vw">距离中考还有 {{toZkTime}}</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> |