vue写一个翻页的时间插件

读秒效果有一个从上向下的翻页效果
效果图

clock

代码

<template><div class="dateClock"><div class="todayClass"><p class="datep">{{dateToday}}</p><span style="float:right;font-size:16px">{{$t(weekDay)}}</span></div><div class="clock"><div :class="timeLab==='AM'?'labelTip amstyle':'labelTip pmstyle'"><span>{{timeLab}}</span></div><div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'"><span class="rightline"></span><span class="leftline"></span><div class="digital front":data-number="nextTimes[0]"></div><div class="digital back":data-number="nowTimes[0]"></div></div><div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'"><span class="rightline"></span><span class="leftline"></span><div class="digital front":data-number="nextTimes[1]"></div><div class="digital back":data-number="nowTimes[1]"></div></div><em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em><div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'"><span class="rightline"></span><span class="leftline"></span><div class="digital front":data-number="nextTimes[2]"></div><div class="digital back":data-number="nowTimes[2]"></div></div><div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'"><span class="rightline"></span><span class="leftline"></span><div class="digital front":data-number="nextTimes[3]"></div><div class="digital back":data-number="nowTimes[3]"></div></div><em :class="timeLab==='AM'?'divider amcolor':'divider pmcolor'"> <i class="iconfont icon-dian"></i></em><div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'"><span class="rightline"></span><span class="leftline"></span><div class="digital front":data-number="nextTimes[4]"></div><div class="digital back":data-number="nowTimes[4]"></div></div><div :class="timeLab==='AM'?'flip amcolor':'flip pmcolor'"><span class="rightline"></span><span class="leftline"></span><div class="digital front":data-number="nextTimes[5]"></div><div class="digital back":data-number="nowTimes[5]"></div></div></div></div>
</template><script>import {defineAsyncComponent,defineComponent,getCurrentInstance,onMounted,reactive,toRefs,
} from "vue";
import DateUtil from "@/utils/dateUtil";
export default {setup() {const { proxy } = getCurrentInstance();const data = reactive({nowTimes: [],nextTimes: [],timer: {},timeLab: 'AM',dateToday: '',weekDay: '',timeKey: 0});onMounted(() => {initDate();data.timer = setInterval(() => {updateTime();}, 1000)});const initDate = async () => {let now = new Date();data.dateToday = proxy.$moment(now).format('MMM D, YYYY')let nowWeek = now.getDay()data.weekDay = DateUtil.returnWeek()[nowWeek]data.nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));data.nextTimes = getTimeFromDate(now)}const updateTime = () => {let now = new Date();data.timeKey = nowlet nowTimes = getTimeFromDate(new Date(now.getTime() - 1000));let nextTimes = getTimeFromDate(now);data.nowTimes = nowTimes// console.log('nowTimes', nowTimes)for (let i = 0; i < 6; i++) {if (nowTimes[i] !== nextTimes[i]) {//  setSpin(i, nowTimes[i], nextTimes[i]);setSpin(i, nowTimes, nextTimes);}}}// 执行翻页操作const setSpin = (index, nowTime, nextTime) => {let nodes = document.querySelectorAll(".flip");if (nodes.length) {nodes[index].classList.add('running');//   data.nowTimes.splice(index, 1, nowTime);data.nowTimes = nowTimesetTimeout(() => {nodes[index].classList.remove('running');//  data.nowTimes.splice(index, 1, nextTime);//  data.nextTimes.splice(index, 1, nextTime);data.nowTimes = nextTimedata.nextTimes = nextTime}, 800)} else {clearInterval(data.timer);data.timer = null}}// 获取时间显示参数const getTimeFromDate = (date) => {let numTime = [];let timeStr = proxy.$moment(date).format("hh:mm:ss A")// let timeStr = proxy.$moment(date).format("hh:mm A")data.timeLab = timeStr.split(' ')[1]let time1 = timeStr.split(' ')[0].split(':').join("")for (let i = 0; i < time1.length; i++) {numTime.push(parseInt(time1[i]));}return numTime}//销毁return {...toRefs(data),initDate,updateTime,setSpin,getTimeFromDate,};}
}</script><style lang="scss" scoped>.dateClock {display: flex;.todayClass {padding-right: 5px;.datep {font-size: 30px;padding-top: 5px;}}.clock {display: flex;}
}.clock .divider {font-size: 40px;line-height: 47px;.iconfont {margin-right: 0;}
}
.clock .flip {position: relative;width: 44px;height: 60px;margin: 2px;font-size: 40px;line-height: 60px;text-align: center;background: #ffffff;border: 1px solid #b8b8b8;border-radius: 4px;.leftline {position: absolute;left: 0;top: 26px;width: 0;height: 8px;border: 1px solid #b8b8b8;z-index: 5;}.rightline {position: absolute;right: 0;top: 26px;width: 0;height: 8px;border: 1px solid #b8b8b8;z-index: 5;}
}
.amcolor {color: #ff43a1;
}
.pmcolor {color: #1890ff;
}
.labelTip {width: 44px;height: 60px;margin: 2px;line-height: 60px;text-align: center;border-radius: 4px;font-size: 16px;font-weight: bold;color: #fff;
}
.amstyle {background-color: #ff43a1;
}
.pmstyle {background-color: #1890ff;
}
.clock .flip .digital::before,
.clock .flip .digital::after {position: absolute;content: attr(data-number);left: 0;right: 0;background: #fff;overflow: hidden;-webkit-perspective: 160px;perspective: 160px;
}
.clock .flip .digital::before {top: 0;bottom: 50%;border-bottom: 1px solid #fff;border-radius: 4px 4px 0 0;
}
.clock .flip .digital::after {top: 50%;bottom: 0;line-height: 0;border-radius: 0 0 4px 4px;background: linear-gradient(180deg, #ffffff, #ffffff 68%, #e2e2e2);
}
.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 1s ease-in-out;animation: frontFlipDown 1s ease-in-out;-webkit-backface-visibility: hidden;backface-visibility: hidden;
}
.clock .flip.running .back::after {-webkit-animation: backFlipDown 1s ease-in-out;animation: backFlipDown 1s 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写一个炫酷的时钟插件
效果图代码奉上: <template><div class="clock"><div class="flip"><d ...
用jQuery写的一个翻页，并封装为插件，
用jQuery写的一个翻页,并封装为插件, 1 *{ 2 margin:0; 3 padding: 0; 4 list-style: none; 5 text-decoration: none; 6 ...
买不起时钟的我，为自己写个翻页时钟
买不起时钟的我,为自己写个翻页时钟为了提高自己的时间观念,我决定为自己配一个时钟,迷上了翻页时钟,但是发现翻页时钟软件都是付费的,再就是达不到自己的要求,于是决定为自己写个.看似简单,实则非易.为自 ...
手把手带你使用Vue实现一个图片水平瀑布流插件
如何使用Vue实现一个图片水平瀑布流插件?这里给大家分享我在网上总结出来的一些知识,希望对大家有所帮助. 一.需求来源今天碰到了一个需求,需要在页面里,用水平瀑布流的方式,将一些图片进行加载,这让我 ...
flask 检测post是否为空_用Flask和Vue制作一个单页应用（五）
使用POST向后台发送数据 Flask app修改可以直接使用现有的路由处理函数来接收前端发来的数据,server/app.py中的all_res()修改如下: @app.route('/resou ...
[vue] 使用vue写一个tab切换
[vue] 使用vue写一个tab切换 v-for循环,利用下标和v-show显示`<div id="app"><ul class="tabs" ...
用vue写一个npm包(package)，发布及引用
提示:vue写一个npm包(package) 文章目录前言一.npm 二.npm package开发三.引用package 总结前言之前一直都是用别人封装好的npm包,新接了一个需求,自己写 ...
用vue写一个计算总价
用vue写一个计算总价点击移除可以删除本项点击加减实现加减总价随着数量增加 <!DOCTYPE html> <html><head><meta char ...
VUE写一个本地教室管理系统
VUE写一个本地教室管理系统实现效果主体模态框 Vue JS主体 Vue实现删除功能 splice语法 Vue实现添加功能 push()语法 Vue实现修改功能源码实现效果点击添加按钮后, ...

vue写一个翻页的时间插件

vue写一个翻页的时间插件相关推荐

最新文章

热门文章