From 46f44399bafab25b938dfcf6d4b8e382462457df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=B0=B1=E7=9C=A0=E4=BB=AA=E5=BC=8F?= <854085467@qq.com> Date: Thu, 23 Jul 2020 06:12:56 +0800 Subject: [PATCH] add number count component --- admin/data/menu.json | 8 ++ component/pear/module/count.js | 42 +++++++ component/pear/module/tab.js | 12 +- component/pear/pear.js | 3 +- setting.json | 2 +- view/console/console1.html | 213 ++++++++++++++++++++++++--------- view/document/count.html | 124 +++++++++++++++++++ 7 files changed, 342 insertions(+), 62 deletions(-) create mode 100644 component/pear/module/count.js create mode 100644 view/document/count.html diff --git a/admin/data/menu.json b/admin/data/menu.json index 2c87e48..0a98555 100644 --- a/admin/data/menu.json +++ b/admin/data/menu.json @@ -191,6 +191,14 @@ "type": 1, "openType": "_iframe", "href": "view/document/area.html" + }, + { + "id": 2044, + "title": "数字滚动", + "icon": "layui-icon layui-icon-face-cry", + "type": 1, + "openType": "_iframe", + "href": "view/document/count.html" } ] }] diff --git a/component/pear/module/count.js b/component/pear/module/count.js new file mode 100644 index 0000000..511a65b --- /dev/null +++ b/component/pear/module/count.js @@ -0,0 +1,42 @@ +layui.define(['jquery', 'element'], function(exports) { + "use strict"; + + var MOD_NAME = 'count', + $ = layui.jquery, + element = layui.element; + + var count = new function() { + + this.up = function(targetEle, options) { + + options = options || {}; + + var $this = document.getElementById(targetEle), + time = options.time, //总时间--毫秒为单位 + finalNum = options.num, //要显示的真实数值 + regulator = options.regulator, //调速器，改变regulator的数值可以调节数字改变的速度 + step = finalNum / (time / regulator), + count = 0.00, + initial = 0; + + + var timer = setInterval(function() { + count = count + step; + + if (count >= finalNum) { + clearInterval(timer); + count = finalNum; + } + //t未发生改变的话就直接返回 + //避免调用text函数，提高DOM性能 + var t = count.toFixed(options.bit?options.bit:0);; + + if (t == initial) return; + initial = t; + $this.innerHTML = initial; + }, 30); + } + + } + exports(MOD_NAME, count); +}); diff --git a/component/pear/module/tab.js b/component/pear/module/tab.js index 3fb4d12..7a59a22 100644 --- a/component/pear/module/tab.js +++ b/component/pear/module/tab.js @@ -331,6 +331,8 @@ layui.define(['jquery', 'element'], function(exports) { '' + '' + var elem = this.option.elem; + $("#" + this.option.elem).find(".pear-tab").append(load); var pearLoad = $("#" + this.option.elem).find("#pear-tab-loading" + index); @@ -341,15 +343,17 @@ layui.define(['jquery', 'element'], function(exports) { setTimeout(function() { - pearLoad.fadeOut(500, function() { - $(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow - .location.reload(true); - }); + pearLoad.fadeOut(500); }, time); + + $(".layui-tab[lay-filter='" + elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow + .location.reload(true); index++; + } else { + $(".layui-tab[lay-filter='" + this.option.elem + "'] .layui-tab-content .layui-show").find("iframe")[0].contentWindow .location.reload(true); } diff --git a/component/pear/pear.js b/component/pear/pear.js index 447d0bd..7f7099f 100644 --- a/component/pear/pear.js +++ b/component/pear/pear.js @@ -25,5 +25,6 @@ layui.config({ treetable:"treetable", dtree:"dtree", tinymce:"tinymce/tinymce", - area:"area" + area:"area", + count:"count" }); diff --git a/setting.json b/setting.json index ef6f236..d6a03ee 100644 --- a/setting.json +++ b/setting.json @@ -1,5 +1,5 @@ { - "keepLoad": 2000, + "keepLoad": 1200, "muiltTab": true, "tabMax": 30, "control": false, diff --git a/view/console/console1.html b/view/console/console1.html index e1c77cc..ecf989a 100644 --- a/view/console/console1.html +++ b/view/console/console1.html @@ -13,65 +13,137 @@
-
-
今日访问
-
-
-
- 9,04,0 -
-
- -
-
-
-
+
+
今日访问
+
+
+
+ 0
-
-
-
提交次数
-
-
-
- 6,34,4 -
-
- -
-
-
-
+
+ + + + + + + + +
-
-
-
下载数量
-
-
-
- 1,34,1 -
-
- -
-
-
-
+
+
+
+
+
+
+
提交次数
+
+
+
+ 0
-
-
-
流量统计
-
-
-
- 7,04,6 -
-
- -
-
-
-
+
+ + + + + + + + + + + + +
+
+
+
+
+
+
+
下载数量
+
+
+
+ 0 +
+
+ + + + + + + + + + +
+
+
+
+
+
+
+
流量统计
+
+
+
+ 0 +
+
+ + + + + + + + + + + +
+
+
+
+
@@ -173,12 +245,41 @@ + 并 + + +
+
+
+
+
+
+
+ 简单使用 +
+
+

0

+
+
+
+
+
+
+

显示代码

+
+ 
+								layui.use(['count'], function() {
+								    var count = layui.count;
+									
+								    count.up("number1", {
+								        time: 8000,
+								        num: 4540.34,
+								        regulator: 100
+								    })
+								})
+
+
+
+
+
+
+
+
+ 保留小数 +
+
+

0

+
+
+
+
+
+
+

显示代码

+
+ 
+							layui.use(['count'], function() {
+							    var count = layui.count;
+								
+							    count.up("number2", {
+							        time: 8000,
+							        num: 4540.34,
+									bit: 2,
+							        regulator: 100
+							    })
+							})
+
+
+
+
+
+
+ + +
+ + + + +