效果
就是这样一个效果,假设起始的数字是固定的,因为是有6个展示位置,数字自增到下一位时 本来是0的位置 样式会变黄,所以就把每个数字拆开来判断
<template>
<div>
<span v-for="(i, index) in numArr" :key="index" ref="numDom">{{i}}</span>
</div>
</template>
export default {
data() {
return {
timerId: null,
numArr: [],
};
},
mounted() {
this.startInterval();
},
updated() {
//初始化样式 当数字等于0 或者下标小于等于1时 颜色为透明度0.1
this.numArr.map((item, index) => {
if (item === 0 && index <= 1) {
this.$refs.numDom[index].style = "color:#ffffff;opacity: 0.1;";
} else {
this.$refs.numDom[index].style =
"background-image:linear-gradient(0deg, #e6c056 0%, #ffffff 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;";
}
});
},
destroyed() {
clearInterval(this.timerId);
},
methods:{
startInterval() {
if (this.timerId) {
clearInterval(this.timerId);
}
let a = 0;
let b = 0;
let c = 9;
let d = 9;
let e = 9;
let f = 0;
this.timerId = setInterval(() => {
f++;
if (f === 10) {
f = 0;
e++;
}
if (e === 10) {
e = 0;
d++;
}
if (d === 10) {
d = 0;
c++;
}
if (c === 10) {
c = 0;
b++;
}
this.numArr = [a, b, c, d, e, f];
// console.log(this.numArr);
}, 2000);
},
}
}