Jquery 数字递增加载效果

HTML:

1 <div class="container">
2 　　<div class="number">{$vo.title}</div>
4 </div>

JS:

 1     $(function(){
 2         let ready = false;//已执行状态
 3         //数字递增
 4         $(window).scroll(function(){
 5             numberLoadChange();
 6         })
 7 
 8         numberLoadChange();
 9 
10         function numberLoadChange() {
11             if(!$('div.number').length) return;
12             //出现在屏幕内
13             if($(window).scrollTop() > $('div.number').offset().top - $(window).height() + 100){
14                 if(ready) return;//是否执行过
15                 ready = true;
16                 //延迟运行
17                 setTimeout(function(){
18                     $('div.number').each(function(){
19                         let th = this;
20                         let i = 0;//计数
21                         let text = parseInt($(th).html());//获取原始值
22                         //是纯数字
23                         if(!isNaN(text)){
24                             let step = parseInt(text/32) + 1;//总数除以变化次数+1，防止小于1的得数不变化
25                             $(th).html(i);//设置起始值
26                             let time = setInterval(function(){
27                                 i += step;
28                                 if(parseInt($(th).html()) < text - step){
29                                     $(th).html(i);
30                                 }else{
31                                     $(th).html(text);//补足原始值
32                                     clearInterval(time);
33                                 }
34                             },60);
35                         }
36                     });
37                 },0)
38             }
39         }
40     })

 

posted @ 2022-03-14 12:44  枫落曳  阅读(186)  评论(0)    收藏  举报