html 大屏滚动效果,纯js 实现 大屏数字滚动效果

大屏数字滚动效果来源于最近工作中一张大屏的UI图，该UI图上有一个模块需要有数字往上翻动的效果，以下是最终实现的效果：

所需素材

直接上代码

HTML部分

0123456789

{{item}}

js部分

export default {

data() {

return {

computeNumber: ["0", "0", "0", "0", "0", "9", "1", "7"]

};

},

created() {},

methods: {

// 定时增长数字

increaseNumber() {

let self = this;

this.timer = setInterval(() => {

self.newNumber = self.newNumber + getRandomNumber(1, 100);

self.setNumberTransform();

}, 3000);

},

// 设置每一位数字的偏移

setNumberTransform() {

let numberItems = this.$refs.numberItem;

let numberArr = this.computeNumber.filter(item => !isNaN(item));

for (let index = 0; index < numberItems.length; index++) {

let elem = numberItems[index];

elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;

}

}

},

mounted() {

this.increaseNumber();

}

};

function getRandomNumber(min, max) {

return Math.floor(Math.random() * (max - min + 1) + min);

}

css部分