您好,登录后才能下订单哦!
密码登录
登录注册
点击 登录注册 即表示同意《亿速云用户服务条款》
这篇文章主要介绍了怎么用Vue编写炫酷的时钟插件的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用Vue编写炫酷的时钟插件文章都会有所收获,下面我们一起来看看吧。
效果图
代码奉上:
<template> <div class="clock"> <div class="flip"> <div class="digital front" :data-number="nextTimes[0]"></div> <div class="digital back" :data-number="nowTimes[0]"></div> </div> <div class="flip"> <div class="digital front" :data-number="nextTimes[1]"></div> <div class="digital back" :data-number="nowTimes[1]"></div> </div> <em class="divider">:</em> <div class="flip"> <div class="digital front" :data-number="nextTimes[2]"></div> <div class="digital back" :data-number="nowTimes[2]"></div> </div> <div class="flip"> <div class="digital front" :data-number="nextTimes[3]"></div> <div class="digital back" :data-number="nowTimes[3]"></div> </div> <em class="divider">:</em> <div class="flip"> <div class="digital front" :data-number="nextTimes[4]"></div> <div class="digital back" :data-number="nowTimes[4]"></div> </div> <div class="flip"> <div class="digital front" :data-number="nextTimes[5]"></div> <div class="digital back" :data-number="nowTimes[5]"></div> </div> </div> </template> <script> export default { name: "ClockData", data () { return { duration: 650, nowTimes: [], nextTimes: [], timer: {}, } }, mounted() { this.initDate(); this.timer = setInterval(() => { this.updateTime(); }, 1000) }, methods: { initDate() { let now = new Date(); this.nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000)); this.nextTimes = this.getTimeFromDate(now); }, updateTime() { let now = new Date(); let nowTimes = this.getTimeFromDate(new Date(now.getTime() - 1000)); let nextTimes = this.getTimeFromDate(now);; for (let i = 0; i < 6; i++) { if (nowTimes[i] !== nextTimes[i]) { this.setSpin(i, nowTimes[i], nextTimes[i]); } } }, setSpin(index, nowTime, nextTime) { let nodes = document.querySelectorAll(".flip"); nodes[index].classList.add('running'); this.nowTimes.splice(index, 1, nowTime); this.nextTimes.splice(index, 1, nextTime); setTimeout(() => { nodes[index].classList.remove('running'); this.nowTimes.splice(index, 1, nextTime); }, this.duration) }, getTimeFromDate(date) { let numTime = []; let timeStr = date .toTimeString() .slice(0, 8) .split(":") .join(""); for (let i = 0; i < timeStr.length; i++) { numTime.push(parseInt(timeStr[i])); } return numTime; } }, destroyed() { // 销毁定时器 clearInterval(this.timer); } } </script> <style scoped> .clock { display: flex; } .clock .divider { font-size: 66px; line-height: 102px; font-style: normal; } .clock .flip { position: relative; width: 60px; height: 100px; margin: 2px; font-size: 66px; line-height: 100px; text-align: center; background: white; border: 1px solid black; border-radius: 12px; } .clock .flip .digital::before, .clock .flip .digital::after { position: absolute; content: attr(data-number); left: 0; right: 0; color: white; background: black; overflow: hidden; -webkit-perspective: 160px; perspective: 160px; } .clock .flip .digital::before { top: 0; bottom: 50%; border-bottom: 1px solid #666; border-radius: 10px 10px 0 0; } .clock .flip .digital::after { top: 50%; bottom: 0; line-height: 0; border-radius: 0 0 10px 10px; } .clock .flip .back::before, .clock .flip .front::after { z-index: 1; } .clock .flip .back::after { z-index: 2; } .clock .flip .front::before { z-index: 3; } .clock .flip .back::after { -webkit-transform-origin: center top; transform-origin: center top; -webkit-transform: rotateX(0.5turn); transform: rotateX(0.5turn); } .clock .flip.running .front::before { -webkit-transform-origin: center bottom; transform-origin: center bottom; -webkit-animation: frontFlipDown 0.6s ease-in-out; animation: frontFlipDown 0.6s ease-in-out; -webkit-backface-visibility: hidden; backface-visibility: hidden; } .clock .flip.running .back::after { -webkit-animation: backFlipDown 0.6s ease-in-out; animation: backFlipDown 0.6s ease-in-out; } @-webkit-keyframes frontFlipDown { to { -webkit-transform: rotateX(0.5turn); transform: rotateX(0.5turn); } } @keyframes frontFlipDown { to { -webkit-transform: rotateX(0.5turn); transform: rotateX(0.5turn); } } @-webkit-keyframes backFlipDown { to { -webkit-transform: rotateX(0); transform: rotateX(0); } } @keyframes backFlipDown { to { -webkit-transform: rotateX(0); transform: rotateX(0); } } </style>
关于“怎么用Vue编写炫酷的时钟插件”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“怎么用Vue编写炫酷的时钟插件”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。