vue3实现电子实时时钟(动态时钟)
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,
}
更多推荐
已为社区贡献1条内容
所有评论(0)