数据大屏 数据变化
发表于：2022-01-14浏览：24次
HTML代码
<html lang="en">
<head>
<script src="./static/js/jquery.min.js"></script>
<title>数据大屏-数字变化</title>
<style>
.numberItem {
float: left;
text-align: center;
margin: 10px;
overflow: hidden;
width: 50px;
height: 70px;
line-height: 70px;
float: left;
/* background: #10213B; */
box-shadow: 0 0 10px 0 #00a6ff inset;
list-style: none;
font-family: Digital-7;
font-size: 60px;
color: #00a6ff;
margin-right: 3px;
}
</style>
</head>
<body>
<div id="num"></div>
</body>
<script type="text/javascript" src="static/js/numberAnimal.js"></script>
<script>
let numberAnimal = new NumberAnimal('num', 24.15, 2)
numberAnimal.loopAnimal( 24.72, 10)
</script>
</html>numberAnimal.js 代码
class NumberAnimal {
/***
* 初始化防范
* @param id 对应div id
* @param originNumber 初始化数据
* @param radixPointCount 小数点个数
*/
constructor(id, originNumber, radixPointCount) {
this.id = id;
// this.originNumber = originNumber.toFixed(radixPointCount);
this.radixPointCount = radixPointCount;
this.rate = Math.pow(10, this.radixPointCount)
this.originNumber = originNumber * this.rate;
if (originNumber < 1) {
this.numberCount = (this.originNumber + '').split('').length + 1;
} else {
this.numberCount = (this.originNumber + '').split('').length;
}
this._initOrigin()
}
/***
* 初始化数据
* @private
*/
_initOrigin() {
let numberArray = (this.originNumber + '').split('');
let elementContent = '';
for (let i = numberArray.length; i < this.numberCount; i++) {
numberArray.unshift('0')
}
for (let i = 0; i < numberArray.length; i++) {
if (i === numberArray.length - this.radixPointCount) {
elementContent += '<div class="numberItem"><div class="row">.</div></div>'
}
elementContent += '<div class="numberItem"><div class="row" style="margin-top:' + -numberArray[i] * 70 + 'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>'
}
$('#' + this.id).html(elementContent);
}
/***
* 数据值变化
* @param start
* @param end
* @private
*/
_animal(start, end) {
let startNumberArray = (start + '').split('');
let endNumberArray = (end + '').split('');
let instance = endNumberArray.length - startNumberArray.length;
for (let i = 0; i < instance; i++) {
$('#' + this.id).prepend('<div class="numberItem"><div class="row" style="margin-top:' + -(instance - endNumberArray[i]) * 70 + 'px">0</div><div class="row">1</div><div class="row">2</div><div class="row">3</div><div class="row">4</div><div class="row">5</div><div class="row">6</div><div class="row">7</div><div class="row">8</div><div class="row">9</div></div>')
}
for (let i = endNumberArray.length; i < this.numberCount; i++) {
endNumberArray.unshift('0')
}
for (let i = startNumberArray.length; i < this.numberCount; i++) {
startNumberArray.unshift('0')
}
console.log("start:" + startNumberArray.toString() + "\t end:" + endNumberArray.toString())
for (let j = 0; j <= endNumberArray.length; j++) {
if (j < (endNumberArray.length - this.radixPointCount)) {
$($($('#' + this.id + ' .numberItem')[j]).find('.row')[0]).animate({marginTop: -endNumberArray[j] * 70 + 'px'})
} else if (j > (endNumberArray.length - this.radixPointCount)) {
$($($('#' + this.id + ' .numberItem')[j]).find('.row')[0]).animate({marginTop: -endNumberArray[j - 1] * 70 + 'px'})
}
}
}
/***
* 数据变动的次数
* @param end 最终成为的数据
* @param time 过程变化次数
*/
loopAnimal(end, time) {
end = Math.round(end * this.rate)
console.log(this.numberCount)
let count = (end + '').split('').length;
if (count > this.numberCount) {
this.numberCount = count
}
let stepNum = Math.ceil((end - this.originNumber) / time);
let t = this.originNumber + stepNum
for (let i = time; i >= 0; i--) {
if (this.originNumber < end && t >= end) {
t = end
}
if (this.originNumber > end && t <= end) {
t = end
}
this._animal(t - stepNum, t);
t = t + stepNum
}
this.originNumber = end
}
}展示效果
