41酱的小草莓

导航

数字滚动效果

刚进入页面时，数字有一个从0开始的累加效果。速度足够快的时候，看起来就像数字滚动。

html代码：

 1 <head>
 2     <meta charset="UTF-8">
 3     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 4     <meta http-equiv="X-UA-Compatible" content="ie=edge">
 5     <title>数字滚动</title>
 6     <style>
 7     .data {
 8         float: left; width:200px; line-height: 200px; text-align: center;font-size: 32px;  
 9     }
10     </style>
11 </head>
12 
13 <body>
14     <div class="data"><span class="count">57</span>,<span class="count">305</span></div>
15     <div class="data"><span class="count">555</span>,<span class="count">879</span></div>
16     <div class="data"><span class="count">479</span>,<span class="count">727</span></div>
17     <div class="data"><span class="count">4</span>,<span class="count">598</span>,<span class="count">763</span></div>
18 </body>

 

js代码：

 1 for (let i = 0; i < document.querySelectorAll(".count").length; i++) {
 2     for (let j = 0; j < 3; j++) {
 3         let thisNumber = parseInt($(".data").eq(i).find(".count").eq(j).text())
 4         let timeFlag = 0.1;
 5         if (thisNumber < 100) {
 6             timeFlag = 50;
 7         }
 8         if (thisNumber >= 100 && thisNumber < 500) {
 9             timeFlag = 5;
10         }
11         countNuber(i, j, thisNumber, timeFlag);
12     }
13 }
14 
15 function countNuber(p, q, lastNum, timer) {
16     let m = 0;
17     setInterval(() => {
18         if (m <= lastNum) {
19             $(".data").eq(p).find(".count").eq(q).text(m++)
20         }
21     }, timer);
22 }

最终数字为：57,305   555,879   479,727   4,598,763。以逗号为分割点，将上述4个数分割成9个子数，分别进行累加滚动。

p为父盒子的index，q为每个父盒子下子元素的index，lastNum为最终的数字，timer为数字累加的时间。（默认0.1ms，但数字小的时候将累加速度相对变慢）

 

刷新一下页面，效果如下：

 

 

 

...

posted on 2019-12-17 15:22  41酱的小草莓  阅读(749)  评论(0)  编辑  收藏  举报