vue3实现电子实时时钟(动态时钟)
vue
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
项目地址:https://gitcode.com/gh_mirrors/vu/vue
免费下载资源
·
如图展示了周几、日期、时间(实时变化)。可以根据自己想要的格式调整
在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,
}
GitHub 加速计划 / vu / vue
82
16
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 个月前 )
9e887079
[skip ci] 2 个月前
73486cb5
* chore: fix link broken
Signed-off-by: snoppy <michaleli@foxmail.com>
* Update packages/template-compiler/README.md [skip ci]
---------
Signed-off-by: snoppy <michaleli@foxmail.com>
Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 6 个月前
更多推荐
已为社区贡献1条内容
所有评论(0)