console
function numberSlide(ele){
if(!(this instanceof numberSlide)){
return new numberSlide(ele);
}
var self = this;
this.startNumber = 0;
this.endNumber = ele.getAttribute('data-num') || 0;
this.nowNumber = this.startNumber;
if(this.endNumber == 0){
ele.innerText = 0;
return;
}
if(this.timer){
cancelAnimationFrame(this.timer);
}
var step = (self.endNumber - self.startNumber) / 80;
var _run = function(){
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(self.endNumber - self.nowNumber < step){
self.nowNumber = self.endNumber;
cancelAnimationFrame(self.timer);
ele.innerText = self.nowNumber;
}else{
self.nowNumber += step;
ele.innerText = self.nowNumber;
self.timer = requestAnimationFrame(_run);
}
}
_run();
}
numberSlide(document.querySelector('.num1'));
numberSlide(document.querySelector('.num2'));
<p data-num="2500" class="num1"></p><p data-num="160.56" class="num2"></p>
p{
font-size: 30px;
color: crimson;
}