From 2e06b8e1bd0a3e78c5be8f86369e69a0a5876efb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=9B=9B=E6=9C=88=E9=BB=8E=E6=98=8E?= <zmqpersonal@163.com>
Date: Mon, 23 Oct 2023 00:16:39 +0800
Subject: [PATCH] =?UTF-8?q?=E6=96=B0=E5=A2=9E=E9=A6=96=E9=A1=B5=E6=95=B0?=
 =?UTF-8?q?=E5=AD=97=E6=BB=9A=E5=8A=A8=E6=95=88=E6=9E=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 js/scroll-numbers.js | 79 ++++++++++++++++++++++++++++++++++++++++++++
 lyear_main.html      | 10 +++---
 2 files changed, 85 insertions(+), 4 deletions(-)
 create mode 100644 js/scroll-numbers.js

diff --git a/js/scroll-numbers.js b/js/scroll-numbers.js
new file mode 100644
index 0000000..65887d3
--- /dev/null
+++ b/js/scroll-numbers.js
@@ -0,0 +1,79 @@
+/*!
+ * 数字滚动增加显示
+ * 主要通过class类内的scroll-numbers获取目标元素数字内容
+ */
+var easing = {
+    quadratic: function (x){
+      return Math.sqrt(x);
+    }
+};
+//显示总数
+function range(start, stop, step){
+  var array = [];
+  for(var i = start; i < stop; i += step) array.push(i);
+  return array;
+}
+
+//跨度间隔并返回终值
+function interpolation(fps, easing, finalValue){
+  function scaleIt(value){return finalValue * value; }
+
+  var x = range(0, 1, 1/fps),
+      y = x.map(easing).map(scaleIt);
+
+  return y;
+}
+
+//数字滚动
+function animateEl(values, duration, onAnimate){
+  var frameIndex = 0,
+      fps = values.length,
+      id = setInterval(anime, duration/fps );
+
+  function anime(){
+    var current = values[frameIndex],
+        isLastFrame = (frameIndex === fps - 1);
+
+    onAnimate(current, frameIndex, values);
+
+    if(isLastFrame){
+      clearInterval(id);
+    }else{
+      frameIndex++;
+    }
+  }
+}
+
+function round(value, decimals) {
+  return Number(Math.round(value+'e'+decimals)+'e-'+decimals);
+}
+
+function unformat(content){
+  var unlocalized = content.replace('.', '').replace(',', '.'),
+      value = parseFloat(unlocalized);
+  return value;
+}
+
+//格式化输出
+function format(value){
+  return value.toString().replace('.', ',');
+}
+
+//添加事件监听器
+window.addEventListener("DOMContentLoaded", function(){
+    var fps = 240,//滚动帧率
+        els = [].slice.call(document.querySelectorAll('.scroll-numbers'));
+
+    els.forEach(function(el){
+        var content = (el.firstChild.textContent).trim(),
+            decimalPlaces = content.split(',')[1] || '',
+            value = unformat(content),
+            values = interpolation(fps, easing.quadratic, value);
+			//滚动持续时间：1秒
+        animateEl(values, 1000, function (current, i, values){
+          var isLast = (i === values.length - 1),
+              value = round(current, decimalPlaces.length);
+          el.firstChild.textContent = isLast? content : format(value);
+        });
+    });
+});
diff --git a/lyear_main.html b/lyear_main.html
index f3b3dd1..c56f94a 100644
--- a/lyear_main.html
+++ b/lyear_main.html
@@ -28,7 +28,7 @@
             <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
               <i class="mdi mdi-currency-cny fs-4"></i>
             </span>
-            <span class="fs-4">102,125.00</span>
+            <span class="fs-4 scroll-numbers">102,125.00</span>
           </div>
           <div class="text-end">今日收入</div>
         </div>
@@ -42,7 +42,7 @@
   	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
               <i class="mdi mdi-account fs-4"></i>
             </span>
-  	        <span class="fs-4">920,000</span>
+  	        <span class="fs-4 scroll-numbers">920,000</span>
   	      </div>
   	      <div class="text-end">用户总数</div>
   	    </div>
@@ -56,7 +56,7 @@
   	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
               <i class="mdi mdi-arrow-down-bold fs-4"></i>
             </span>
-  	        <span class="fs-4">34,005,000</span>
+  	        <span class="fs-4 scroll-numbers">34,005,000</span>
   	      </div>
   	      <div class="text-end">下载总量</div>
   	    </div>
@@ -70,7 +70,7 @@
   	        <span class="avatar-md rounded-circle bg-white bg-opacity-25 avatar-box">
               <i class="mdi mdi-comment-outline fs-4"></i>
             </span>
-  	        <span class="fs-4">153 条</span>
+  	        <span class="fs-4 scroll-numbers">153 条</span>
   	      </div>
   	      <div class="text-end">新增留言</div>
   	    </div>
@@ -237,6 +237,8 @@
 <script type="text/javascript" src="js/popper.min.js"></script>
 <script type="text/javascript" src="js/bootstrap.min.js"></script>
 <script type="text/javascript" src="js/chart.min.js"></script>
+<!-- 数字动态滚动增加效果 -->
+<script type="text/javascript" src="js/scroll-numbers.js"></script>
 <!--引入chart插件js-->
 <script type="text/javascript" src="js/main.min.js"></script>
 <script type="text/javascript">
-- 
Gitee