1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > vue3实现电子实时时钟(动态时钟)

vue3实现电子实时时钟(动态时钟)

时间:2023-12-25 02:04:35

相关推荐

vue3实现电子实时时钟(动态时钟)

如图展示了周几、日期、时间(实时变化)。可以根据自己想要的格式调整

在div中:

<div>{{nowWeek}}</div>

<div>{{ nowTime}}</div>

<div>{{ nowDate}}</div>

return中:

return {

nowDate: nowDateref,

nowTime: nowTimeref,

nowWeek: nowWeekref,

}

定义初始值:

const nowDateref = ref("")

const nowTimeref = ref("")

const nowWeekref = ref("")

引入onMounted和ref

import {

ref,

onMounted,

} from 'vue'

在onMounted中调用方法:

onMounted(() => {

setInterval(getDate1, 500);

})

定义方法:

function getDate1() {var _this = this;let yy = new Date().getFullYear();let mm = new Date().getMonth() + 1;let dd = new Date().getDate();let week = new Date().getDay();let hh = new Date().getHours();let ms =new Date().getSeconds() < 10 ?"0" + new Date().getSeconds() :new Date().getSeconds();let mf =new Date().getMinutes() < 10 ?"0" + new Date().getMinutes() :new Date().getMinutes();if (week == 1) {nowWeekref.value = "周一";} else if (week == 2) {nowWeekref.value = "周二";} else if (week == 3) {nowWeekref.value = "周三";} else if (week == 4) {nowWeekref.value = "周四";} else if (week == 5) {nowWeekref.value = "周五";} else if (week == 6) {nowWeekref.value = "周六";} else {nowWeekref.value = "周日";}// nowTimeref.value = hh + ":" + mf + ":" + ms;//ms是秒,这里可以根据自己需要调整格式nowTimeref.value = hh + ":" + mf;// nowDateref.value = yy + "年" + mm + "月" + dd + "日";nowDateref.value = yy + "-" + mm + "-" + dd;}

最后别忘了在return中定义一下函数名:

return {

nowDate: nowDateref,

nowTime: nowTimeref,

nowWeek: nowWeekref,

getDate1,

}

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。