<template>
<div class="home">
<img src="http://192.168.1.196/upload/material/-100/20231016/6B9F43FF74A8483091E5308ABB54A692.png" alt="">
<div id="numRoll" class="myroll"></div>
</div>
</template>
<script type="text/javascript">
// @ is an alias to /src
// import DigitRoll from "./views/index";
export default {
name: "Home",
data() {
return {
from: 0,
to: 55,
container: '',
width: '',
rollHeight: '',
number: '',
DigitRoll:null,
}
},
mounted() {
this.setDigitRoll()
this.getData()
},
methods: {
setDigitRoll() {
function DigitRoll(opts) {
this.container = document.querySelector(opts.container);
this.width = opts.width || 1;
if (!this.container) {
throw Error('no container');
}
this.container.style.overflow = 'hidden';
this.rollHeight = parseInt(getComputedStyle(this.container).height);
if (this.rollHeight < 1) {
this.container.style.height = '20px';
this.rollHeight = 20;
}
this.setWidth();
}
DigitRoll.prototype = {
roll: function (n) {
var self = this;
this.number = parseInt(n) + '';
if (this.number.length < this.width) {
this.number = new Array(this.width - this.number.length + 1).join('0') + this.number;
} else if (this.number.length > this.width) {
this.width = this.number.length;
this.setWidth();
}
Array.prototype.forEach.call(this.container.querySelectorAll('.num'), function (item, i) {
var currentNum = parseInt(item.querySelector('div:last-child').innerHTML);
var goalNum = parseInt(self.number[i]);
var gapNum = 0;
var gapStr = '';
if (currentNum == goalNum) {
return;
} else if (currentNum < goalNum) {
gapNum = goalNum - currentNum;
for (var j = currentNum; j < goalNum + 1; j++) {
gapStr += '<div>' + j + '</div>'
}
} else {
gapNum = 10 - currentNum + goalNum;
for (var j = currentNum; j < 10; j++) {
gapStr += '<div>' + j + '</div>'
}
for (var j = 0; j < goalNum + 1; j++) {
gapStr += '<div>' + j + '</div>'
}
}
item.style.cssText += '-webkit-transition-duration:0s;-webkit-transform:translateY(0)';
item.innerHTML = gapStr;
setTimeout(function () {
item.style.cssText += '-webkit-transition-duration:1s;-webkit-transform:translateY(-' + self.rollHeight * gapNum + 'px)';
}, 50)
})
},
setWidth: function (n) {
n = n || this.width;
var str = '';
for (var i = 0; i < n; i++) {
str += '<div class="num" style="float:left;height:100%;line-height:' + this.rollHeight + 'px"><div>0</div></div>';
}
this.container.innerHTML = str;
}
}
this.DigitRoll = DigitRoll
},
getData() {
var mynroll = 518518;
var r1 = new this.DigitRoll({
container: '#numRoll',
width: 8
});
r1.roll(mynroll);
setInterval(function () {
mynroll += parseInt(Math.random() * 100)
r1.roll(mynroll)
}, 3000)
}
}
};
</script>
前端数值滚动特效
最新推荐文章于 2024-05-06 23:37:19 发布