Vue编写炫酷的时钟插件
作者:lucky.麒麟 时间:2023-07-02 16:32:27
本文实例为大家分享了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>
来源:https://blog.csdn.net/yhflyl/article/details/107488909
标签:Vue,时钟插件
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
用python标准库difflib比较两份文件的异同详解
2023-01-29 07:34:29
![](https://img.aspxhome.com/file/2023/7/105007_0s.jpg)
python数据结构输入输出及控制和异常
2022-08-26 10:27:47
![](https://img.aspxhome.com/file/2023/5/111945_0s.png)
人脸检测——基于Flask和PaddleHub
2022-10-09 02:01:30
![](https://img.aspxhome.com/file/2023/0/61750_0s.jpg)
实例解析Python中的__new__特殊方法
2023-01-09 22:26:19
Python实现TCP协议下的端口映射功能的脚本程序示例
2021-07-26 13:59:01
![](https://img.aspxhome.com/file/2023/2/93712_0s.png)
Python练习之操作MySQL数据库
2024-01-20 12:29:22
![](https://img.aspxhome.com/file/2023/2/135062_0s.png)
Python实现深度遍历和广度遍历的方法
2023-10-13 20:41:13
PyQt中使用QProcess运行一个进程的示例代码
2021-10-16 15:57:39
![](https://img.aspxhome.com/file/2023/9/101119_0s.png)
对pandas通过索引提取dataframe的行方法详解
2021-05-18 18:10:39
![](https://img.aspxhome.com/file/2023/7/90407_0s.jpg)
Python绘制3d螺旋曲线图实例代码
2022-12-22 01:30:23
![](https://img.aspxhome.com/file/2023/9/75209_0s.png)
python的time模块和datetime模块实例解析
2023-11-13 09:54:56
Numpy中扁平化函数ravel()和flatten()的区别详解
2022-09-23 08:52:23
python读取和保存视频文件
2023-11-14 06:10:20
Python中的__SLOTS__属性使用示例
2022-04-30 12:19:56
如何高效使用Python字典的方法详解
2021-07-26 04:29:03
python实现简单俄罗斯方块游戏
2023-04-13 03:28:05
![](https://img.aspxhome.com/file/2023/4/85044_0s.jpg)
如何免费获取 Jetbrain 全家桶使用兑换码的正确姿势(推荐)
2023-10-17 11:53:15
![](https://img.aspxhome.com/file/2023/2/117532_0s.jpg)
柳永法:vbs或asp采集文章时网页编码问题
2009-02-04 10:50:00
vue-cli开发环境实现跨域请求的方法
2024-05-13 09:14:10
Pycharm小白级简单使用教程
2022-05-12 23:26:32
![](https://img.aspxhome.com/file/2023/7/82827_0s.jpg)