本篇内容主要讲解“vue如何实现电子时钟效果”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue如何实现电子时钟效果”吧!
html
计算
安全
数据库
网络和加速
企业服务
<div class="dateBox">
<div class="time">{{ time }}</div>
<div class="date">{{ date }}</div>
</div>css
.dateBox {
background: #121747;
background-image: url("~@/assets/images/时间.png");
background-repeat: no-repeat;
display: flex;
align-items: flex-end;
justify-content: flex-end;
position: absolute;
top: 70px;
right: 50px;
width: 400px;
height: 88px;
}
.date {
font-size: 28px;
color: #8ac9ff;
margin-left: 15px;
}
.time {
font-size: 48px;
color: #ffffff;
}背景图片素材
js
以vue为例
data() {
return {
date: null,
time: null,
};
},mounted() {
const clock = setInterval(() => {
this.date = getToday().date;
this.time = getToday().time;
}, 1000);
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once("hook:beforeDestroy", () => {
clearInterval(clock);
});
},// 日期时间格式化——获取当前日期时间，格式化为 2021/08/30 和 15:35:06
function getToday() {
var datas = new Date();
var on1 = "/";
var on2 = ":";
var onY = datas.getFullYear(); //年
var onM = datas.getMonth() + 1; //月
var onD = datas.getDate(); //日
var onS = datas.getHours(); //时
var onF = datas.getMinutes(); //分
var onN = datas.getSeconds(); //秒
if (onM >= 1 && onM <= 9) {
//月
onM = "0" + onM;
}
if (onD >= 1 && onD <= 9) {
//日
onD = "0" + onD;
}
if (onS >= 0 && onS <= 9) {
//时
onS = "0" + onS;
}
if (onF >= 0 && onF <= 9) {
//分
onF = "0" + onF;
}
if (onN >= 0 && onN <= 9) {
//秒
onN = "0" + onN;
}
return {
date: onY + on1 + onM + on1 + onD,
time: onS + on2 + onF + on2 + onN,
};
}到此，相信大家对“vue如何实现电子时钟效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
