vue2中实现滚动数字时钟效果

前言：

分享一个好玩的小组件，滚动数字时钟效果。

实现效果：

实现源码：新建一个vue文件，把下面内容都放进去，运行就好了

<template><div class="wraper"><div class="column" :style="{transform: `translateY(${-lineHeight*index6}px)`}"><div class="num" v-for="(item, index) in arr6" :key="index">{{ item }}</div></div><div class="column" :style="{transform: `translateY(${-lineHeight*index5}px)`}"><div class="num" v-for="(item, index) in arr5" :key="index">{{ item }}</div></div><div>:</div><div class="column" :style="{transform: `translateY(${-lineHeight*index4}px)`}"><div class="num" v-for="(item, index) in arr4" :key="index">{{ item }}</div></div><div class="column" :style="{transform: `translateY(${-lineHeight*index3}px)`}"><div class="num" v-for="(item, index) in arr3" :key="index">{{ item }}</div></div><div>:</div><div class="column" :style="{transform: `translateY(${-lineHeight*index2}px)`}"><div class="num" v-for="(item, index) in arr2" :key="index">{{ item }}</div></div><div class="column" :style="{transform: `translateY(${-lineHeight*index1}px)`}"><div class="num" v-for="(item, index) in arr1" :key="index">{{ item }}</div></div></div>
</template><script>export default {data() {return {lineHeight: 64, //跟字体大小和wraper的高度相关！// 秒arr1: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],index1: 0, //就是获取真实时间后的起始数字arr2: [0, 1, 2, 3, 4, 5],index2: 0,// 分arr3: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],index3: 0,arr4: [0, 1, 2, 3, 4, 5],index4: 0,// 时arr5: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],index5: 0,arr6: [0, 1, 2],index6: 0,}},created() {this.getTime()},watch: {index5(newVal) {// 超过24小时if (this.index6 === 2 && newVal===4) {console.log('out')for (let i=1; i<7; i++) {this[`index${i}`] = 0}}}},methods: {getTime() {const date = new Date()let hour = this.bu0(date.getHours())let minute = this.bu0(date.getMinutes())let second = this.bu0(date.getSeconds())// 测试用// let hour = ['1', '9']// let minute = ['5', '9']// let second = ['5', '5']// 秒this.index1 = +second[1]this.index2 = +second[0]// 分this.index3 = +minute[1]this.index4 = +minute[0]// 时this.index5 = +hour[1]this.index6 = +hour[0]this.turnSecond(this.arr1.length)},bu0(num) {let strif (num < 10) str = `0${num}`else str = `${num}`return str.split('')},turnSecond (length) {setInterval(()=> {if (this.index1 === length-1) {// console.log(1)// 通知前一位移动this.turnOther( 2, this.arr2.length)this.index1 = -1}this.index1++}, 1000)},turnOther(type, length) {// type代表第几组数列，例如2，就是从右往左第二列if (this[`index${type}`] === length-1) {// console.log(type)// 通知前一位移动let next = type+1this.turnOther( next, this[`arr${next}`].length)this[`index${type}`] = -1}this[`index${type}`]++}}}
</script><style scoped>.wraper {text-align: center;background: #ffffff;height: 64px;font-size: 48px;font-weight: bolder;letter-spacing: 7px;margin-top: 7px;display: flex;justify-content: center;overflow:hidden;}.column {transition: transform 300ms;}.num {height: 64px;}
</style>

vue2中实现滚动数字时钟效果相关推荐

js选中html的数字设置倒计时,JS实现的网页倒计时数字时钟效果
本文实例讲述了JS实现的网页倒计时数字时钟效果.分享给大家供大家参考.具体实现方法如下: 代码如下: javascript实现的倒计时时钟 body,div{margin:0;padding:0;} ...
数字时钟html脚本,javascript实现数字时钟效果
本文实例为大家分享了javascript实现数字时钟效果的具体代码,供大家参考,具体内容如下效果图需求分析 1.通过date获取时间 2.通过间隔定时器setInterval动态获取时间 3.间隔 ...
js滚动数字动画效果
代码复制,直接调用就好了. 需注意!由于js不能精确到小数点后的0,(9.90)在JS中为9.9,所以不能用在有小数点的场景下,只能用在整数的情况下 /*** 滚动数字* @param {*DOM} ...
Vue3中如何实现数字翻牌效果?
一.需求监听数据的变化,实现数字翻牌效果本人OS:本想截一个gif,但是一直没找到合适的截gif工具......有好用的截gif工具,跪求戳戳我~ 二.思路 1.设置初始数组:[0] 2. 把获取 ...
前端用vue实现一个滚动数字时钟
效果如图所示如果想直接用可以复制代码当作vue组件. 实现原理时钟实际上是六个独立的纵向数列,每列的数字从下往上滚动,秒数滚动到头就向左"进一位",每一列到头都会向左" ...
FPGA数字时钟（可暂停调数，含代码）
前言前段时间刚刚开始初步学习FPGA相关知识,在学习了一段时间后,利用前面所学知识,写了一个数字时钟,顺便在这里写下总结,方便理解. (本人小白一名,有错欢迎指出,欢迎探讨) (我使用的开发板是Cy ...
arduino定时器pdf_Arduino基础入门篇18—数字时钟
Arduino不但有外部中断,还有定时器中断,不同Arduino开发板其定时器数量及性能也各不相同,这取决于开发板主控制器.Uno R3开发板有三个定时器,本篇通过使用定时器库「TimerOne」来更 ...
Android开发——实现数字时钟
前言在最近的项目当中,我遇到一个在界面中实现系统数字时钟的需求.一看这个其实挺简单的,开个一个子线程获取当前的系统时间睡眠1分钟发送当前时间,然后利用Handler去修改当前显示的时间,直接撸代码. ...
Timer实现数字时钟
最近在做一个GPS的应用,其中界面使用Fragment实现切换.其中一个Fragment中实现了数字时钟,即每一秒就更新数字显示那种~~ 结果在切换Fragment时,出现了下面的错误: 01-23 ...

vue2中实现滚动数字时钟效果

前言：

分享一个好玩的小组件，滚动数字时钟效果。

实现效果：

实现源码：新建一个vue文件，把下面内容都放进去，运行就好了

vue2中实现滚动数字时钟效果相关推荐

最新文章

热门文章