前言:
分享一个好玩的小组件,滚动数字时钟效果。
实现效果:
实现源码:新建一个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 str
if (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+1
this.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>