Vue编写炫酷的时钟插件
作者:lucky.麒麟 发布时间:2023-07-02 16:32:27
标签: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>
来源:https://blog.csdn.net/yhflyl/article/details/107488909
0
投稿
猜你喜欢
- 本文实例讲述了CI操作cookie的方法。分享给大家供大家参考,具体如下:CI 操作cookie 有三种方法,2中Ci自带的,其
- Django在做url设置时,如果有两个APP,那么再import时会出错解决的方法有两种:方法一:在每个APP里设置单独的url.py文件
- 一旦获得MySQL服务器的连接,需要选择一个特定的数据库工作。这是因为MySQL服务器可能有一个以上的数据库。从命令提示符,选择MySQL数
- python判断一个变量是否已经设置的方法:可以使用locals()函数来进行判断。locals()函数会以字典类型返回当前位置的全部局部变
- python清空命令行 !有时我们在命令行上运行一些代码时,觉得有些冗余了,可以通过以下代码进行清除命令行上的代码。import osdef
- 列表与元组列表用大括号[]表示,元组用圆括号()表示。列表可以修改,字符串与元组不可修改。元组的分片还是元组,列表的分片还是列表。1.列表方
- 每个 batch 前清空梯度,否则会将不同 batch 的梯度累加在一块,导致模型参数错误。然后我们将输入和目标张量都移动到所需的设备上,并
- 导语每年的节假日一到,大家头疼的总时同一个问题:你买到回家的票了吗?尤其是大型的节日:”比如国庆、春节......&am
- 写在之前在我们的现实生活中,「日志记录」其实是一件非常重要的事情,比如银行的转账记录,汽车的行车记录仪记录行驶过程中的一切,如果出现了什么问
- 在爬虫百度地图的期间,就为它做了一个界面,运用的是PyQt5。得到意想不到的结果:# -*- coding: utf-8 -*-# Form
- Python自动化脚本登录校园网所需工具:python编译环境(博主使用的pycharm作演示,其实在cmd也可以操作!)selenium自
- 我最近在参与Python字节码相关的工作,想与大家分享一些这方面的经验。更准确的说,我正在参与2.6到2.7版本的CPython解释器字节码
- demo.py(装饰器,带参数的装饰器):def set_level(level_num): def set_func(func
- 本文实例为大家分享了python实现微信每日一句自动发送的具体代码,供大家参考,具体内容如下参考了一篇博客:教你使用python实现微信每天
- 一、在Yii中实现乐观锁乐观锁(optimistic locking)表现出大胆、务实的态度。使用乐观锁的前提是, 实际应用当中,发生冲突的
- 前言最近在试着研究飞浆平台的许多功能,看到了许多有意思的功能。其中可以将照片美化以及年龄调整这个功能让我想到了之前抖音的一个功能,所以特别感
- 一、前言写这篇文章的灵感来源于我玩游戏的时候(为了避免过不了审就不说是啥游戏了),看见一个大佬在游戏里面建造了“还原方阵
- 对于当前数据库的监控方式有很多,分为数据库自带、商用、开源三大类,每一种都有各自的特色;而对于 mysql 数据库由于其有很高的社区活跃度,
- 使方法一、用IP138数据库查询域名或IP地址对应的地理位置。#-*- coding:gbk -*-import urllib2import
- 爬虫库使用简单的requests库,这是一个阻塞的库,速度比较慢。解析使用XPATH表达式总体采用类的形式多线程使用concurrent.f