vue如何实现电子时钟效果

本篇内容主要讲解“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如何实现电子时钟效果”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！