feat: 滚动数字更改

src/css/stat-bar.css

@@ -48,9 +48,9 @@
   margin-left: 10px;
 }
 .stat-bar .stat-item .scroll-num {
-  width: var(--width, 47px);
-  height: var(--height, 59px);
-  line-height: var(--height, 59px);
+  width: var(--width, 39px);
+  height: var(--height, 50px);
+  line-height: var(--height, 50px);
   text-align: center;
   font-size: 41px;
   color: #01fff6;
@@ -67,8 +67,8 @@
   font-family: 'Source Han Sans CN';
 }
 .stat-bar .animate {
-  -webkit-animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
-          animation: move 1.6s linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+  -webkit-animation: move calc(var(--speed) * 1s) linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
+          animation: move calc(var(--speed) * 1s) linear infinite, bounce-in-down 1s calc(var(--delay) * 1s) forwards;
 }
 .stat-bar .init {
   -webkit-transform: translateY(calc(var(--i) * -9.09%));

src/js/index.js

@@ -219,18 +219,18 @@ const lineChartOption = (xData, yData, interval) => {
 }
 
 // 创建一组数字
-function createMultiSrollNum(box, numString, width, height, delay) {
+function createMultiSrollNum(box, numArr, width, height, delays, speeds) {
   box.style.setProperty('--width', width + 'px')
   box.style.setProperty('--height', height + 'px')
   const docFrag = document.createDocumentFragment()
-  numString.split('').forEach((num, i) => {
-    docFrag.appendChild(createSrollNum(num, delay + i * 0.2))
+  numArr.forEach((num, i) => {
+    docFrag.appendChild(createSrollNum(num, delays[i], speeds[i]))
   })
   box.appendChild(docFrag)
 }
 
 // 创建单个数字
-function createSrollNum(num, delay) {
+function createSrollNum(num, delay, speed) {
   const scrollNumNode = document.createElement('div')
   scrollNumNode.className = 'scroll-num'
   scrollNumNode.innerHTML = `<ul class="scroll-ul">
@@ -249,24 +249,26 @@ function createSrollNum(num, delay) {
 
   scrollNumNode.style.setProperty('--i', num)
   scrollNumNode.style.setProperty('--delay', delay)
+  scrollNumNode.style.setProperty('--speed', speed)
 
   const ulNode = scrollNumNode.childNodes[0]
   ulNode.classList.add('init')
   return scrollNumNode
 }
 
-function addDigitAnimate() {
+function addDigitAnimate(delays, numArr) {
   const scrollUl = document.getElementsByClassName('scroll-ul')
-  for (const ulNode of scrollUl) {
+  for (let i = 0; i < scrollUl.length; i++) {
+    const ulNode = scrollUl[i]
     ulNode.classList.add('animate')
     if (isSafari || isWeChat) {
       let timer = setTimeout(() => {
         ulNode.setAttribute(
           'style',
-          'animation: none;transform: translateY(' + num * -9.09 + '%)'
+          'animation: none;transform: translateY(' + numArr[i] * -9.09 + '%)'
         )
         timer = null
-      }, delay * 1000)
+      }, delays[i] * 1000)
     }
   }
 }
@@ -388,13 +390,14 @@ window.onload = () => {
   )
 
   // 数据统计数字滚动
-  const width = 47
-  const height = 59
-  const delay = 1.4
+  const width = 39
+  const height = 50
+  const delays = [3, 4, 5, 6, 7] // 滚动多少秒停止，设置一样就一起停
+  const speeds = [2, 2.5, 3, 3.5, 4] // 滚动速率，每个数字滚动快慢不一样
   const scrollBox = document.getElementsByClassName('scroll-box')
-
   ;['35345', '83460', '36765', '36465'].forEach((numStr, i) => {
-    createMultiSrollNum(scrollBox[i], numStr, width, height, delay)
+    const numArr = numStr.split('')
+    createMultiSrollNum(scrollBox[i], numArr, width, height, delays, speeds)
+    addDigitAnimate(delays, numArr)
   })
-  // addDigitAnimate()
 }

src/less/stat-bar.less

@@ -36,9 +36,9 @@
       margin-left: 10px;
     }
     .scroll-num {
-      width: var(--width, 47px);
-      height: var(--height, 59px);
-      line-height: var(--height, 59px);
+      width: var(--width, 39px);
+      height: var(--height, 50px);
+      line-height: var(--height, 50px);
       text-align: center;
       font-size: 41px;
       color: #01fff6;
@@ -61,7 +61,7 @@
   // }
 
   .animate {
-    animation: move 1.6s linear infinite,
+    animation: move calc(var(--speed) * 1s) linear infinite,
       bounce-in-down 1s calc(var(--delay) * 1s) forwards;
   }
   .init {