gy-webcode2 1.0.0

package/scripts/numberAnimate.js

@@ -0,0 +1,134 @@
+const numberAnimate = function (el, setting) {
+    var defaults = {
+        speed: 1000, //动画速度
+        num: "", //初始化值
+        iniAnimate: true, //是否要初始化动画效果
+        symbol: '', //默认的分割符号，千，万，千万
+        dot: 0, //保留几位小数点
+        pst: "" //是否有 百分号
+    }
+    var setting = $.extend(defaults, setting);
+
+    //如果对象有多个，提示出错
+    if ($(el).length > 1) {
+        // alert("just only one obj!");
+        return;
+    }
+
+    //如果未设置初始化值。提示出错
+    if (setting.num == "" && setting.num != 0) {
+        // alert("must set a num!");
+        return;
+    }
+    var nHtml = '<div class="mt-number-animate-dom" data-num="{{num}}">\
+<span class="mt-number-animate-span">0</span>\
+<span class="mt-number-animate-span">1</span>\
+<span class="mt-number-animate-span">2</span>\
+<span class="mt-number-animate-span">3</span>\
+<span class="mt-number-animate-span">4</span>\
+<span class="mt-number-animate-span">5</span>\
+<span class="mt-number-animate-span">6</span>\
+<span class="mt-number-animate-span">7</span>\
+<span class="mt-number-animate-span">8</span>\
+<span class="mt-number-animate-span">9</span>\
+<span class="mt-number-animate-span">0</span>\
+<span class="mt-number-animate-span">.</span>\
+</div>';
+
+    //数字处理
+    var numToArr = function (num) {
+        num = setting.dot != null ? Number(num).toFixed(setting.dot) : Number(num);
+        if (typeof (num) == 'number') {
+            var arrStr = num.toString().split("");
+        } else {
+            var arrStr = num.split("");
+        }
+        return arrStr;
+    }
+
+    //设置DOM symbol:分割符号
+    var setNumDom = function (arrStr) {
+        var shtml = '<div class="mt-number-animate">';
+        for (var i = 0, len = arrStr.length; i < len; i++) {
+            if (i != 0 && (len - i) % 3 == 0 && setting.symbol != "" && arrStr[i] != ".") {
+                shtml += '<div class="mt-number-animate-dot">' + setting.symbol + '</div>' + nHtml.replace("{{num}}", arrStr[i]);
+            } else {
+                shtml += nHtml.replace("{{num}}", arrStr[i]);
+            }
+        }
+        if (setting.pst) {
+            shtml += '%</div>';
+        } else {
+            shtml += '</div>';
+        }
+        return shtml;
+    }
+
+    //执行动画
+    var runAnimate = function ($parent) {
+        $parent.find(".mt-number-animate-dom").each(function () {
+            var num = $(this).attr("data-num");
+            // console.log(num)
+            num = (num == "." ? 11 : num == 0 ? 10 : num);
+            var spanHei = $(this).height() / 12; //11为元素个数
+            var thisTop = -num * spanHei + "px";
+            if (thisTop != $(this).css("top")) {
+                if (setting.iniAnimate) {
+                    //HTML5不支持
+                    if (!window.applicationCache) {
+                        $(this).animate({
+                            top: thisTop
+                        }, setting.speed);
+                    } else {
+                        $(this).css({
+                            'transform': 'translateY(' + thisTop + ')',
+                            '-ms-transform': 'translateY(' + thisTop + ')',
+                            /* IE 9 */
+                            '-moz-transform': 'translateY(' + thisTop + ')',
+                            /* Firefox */
+                            '-webkit-transform': 'translateY(' + thisTop + ')',
+                            /* Safari 和 Chrome */
+                            '-o-transform': 'translateY(' + thisTop + ')',
+                            '-ms-transition': setting.speed / 1000 + 's',
+                            '-moz-transition': setting.speed / 1000 + 's',
+                            '-webkit-transition': setting.speed / 1000 + 's',
+                            '-o-transition': setting.speed / 1000 + 's',
+                            'transition': setting.speed / 1000 + 's'
+                        });
+                    }
+                } else {
+                    setting.iniAnimate = true;
+                    $(this).css({
+                        top: thisTop
+                    });
+                }
+            }
+        });
+    }
+
+    //初始化
+    var init = function ($parent) {
+        //初始化
+        $parent.html(setNumDom(numToArr(setting.num)));
+        runAnimate($parent);
+    };
+
+    //重置参数
+    // this.resetData = function (num) {
+    //   var newArr = numToArr(num);
+    //   var $dom = $(el).find(".mt-number-animate-dom");
+    //   if ($dom.length < newArr.length) {
+    //     $(el).html(setNumDom(numToArr(num)));
+    //   } else {
+    //     $dom.each(function (index, el) {
+    //       $(el).attr("data-num", newArr[index]);
+    //     });
+    //   }
+    //   runAnimate($(el));
+    // }
+    //init
+    init($(el));
+}
+
+
+export default numberAnimate

package/scripts/uuid.js

@@ -0,0 +1,33 @@
+let uuid = function(len, radix) {
+  var chars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz".split(
+    ""
+  );
+  var uuid = [],
+    i;
+  radix = radix || chars.length;
+
+  if (len) {
+    // Compact form
+    for (i = 0; i < len; i++) uuid[i] = chars[0 | (Math.random() * radix)];
+  } else {
+    // rfc4122, version 4 form
+    var r;
+
+    // rfc4122 requires these characters
+    uuid[8] = uuid[13] = uuid[18] = uuid[23] = "-";
+    uuid[14] = "4";
+
+    // Fill in random data.  At i==19 set the high bits of clock sequence as
+    // per rfc4122, sec. 4.1.5
+    for (i = 0; i < 36; i++) {
+      if (!uuid[i]) {
+        r = 0 | (Math.random() * 16);
+        uuid[i] = chars[i == 19 ? (r & 0x3) | 0x8 : r];
+      }
+    }
+  }
+
+  return uuid.join("");
+};
+
+export default uuid;