Skip to content
静心静心
HOME
DoubtfulCases
github icon
  • JAVASCRIPT

    • 封装Ajax
      • 面试题
        • 模块化JQuery
          • 深拷贝和浅拷贝
            • 有趣的javascript
              • 原型链
                • FAjax copy
                  • Javascrpt 中 方法
                    • JS获取数组的最后一项
                      • js正则正方向查找
                        • js重要
                          • 数字滚动
                            • 1、利用jquery.animate()做数字滚动
                              • 2、利用写好的插件,依耐jquery.js
                                • 3、油盘数字滚动类插件
                              • 纯css手风琴
                                • JS设置全局变量
                                  • JS 寄生式组合继承

                                  数字滚动

                                  author iconYYtimer icon大约 4 分钟

                                  此页内容
                                  • 1、利用jquery.animate()做数字滚动
                                    • 2、利用写好的插件,依耐jquery.js
                                    • 3、油盘数字滚动类插件

                                  # 数字滚动

                                  # 1、利用jquery.animate()做数字滚动

                                   $({count:"10"}).animate({count:"100"},{duration:2000,step:function(){
                                        console.log(this.count)
                                    }});
                                  
                                  animate语法
                                  (selector).animate({stles},{options})
                                  speed - 设置动画的速度
                                  easing - 规定要使用的 easing 函数
                                  callback - 规定动画完成之后要执行的函数
                                  step - 规定动画的每一步完成之后要执行的函数
                                  queue - 布尔值。指示是否在效果队列中放置动画。如果为 false,则动画将立即开始。
                                  specialEasing - 来自 styles 参数的一个或多个 CSS 属性的映射,以及它们的对应 easing 函数
                                  
                                  1
                                  2
                                  3
                                  4
                                  5
                                  6
                                  7
                                  8
                                  9
                                  10
                                  11
                                  12

                                  # 2、利用写好的插件,依耐jquery.js

                                  (function ($) {
                                  
                                  	$.fn.animationCounter = function (options) {
                                  		return this.each(function () {
                                  			try {
                                  				var element = $(this);
                                  
                                  				var defaults = {
                                  					start: 0,//开始的数字
                                  					end: null,//结束的数字
                                  					step: 1,//步长
                                  					delay: 1000,//并不是总时间,总时间 = (end/stp) * delay 
                                  					xiaoshu: -1,//小数位数
                                  					txt: ""
                                  
                                  				}
                                  				var settings = $.extend(defaults, options || {})
                                  				var nb_start = settings.start;
                                  				var nb_end = settings.end;
                                  				var nb_xiaoshu = settings.xiaoshu;
                                  				element.text(nb_start + settings.txt);
                                  				var counter = function () {
                                  					// Definition of conditions of arrest
                                  					if (nb_end != null && nb_start >= nb_end) {
                                  						return;
                                  					}
                                  					// incrementation
                                  					nb_start = nb_start + settings.step;
                                  					// display
                                  					if (nb_xiaoshu == 2) {
                                  						nb_start = Number(nb_start.toFixed(2));
                                  
                                  						if ((nb_start / 100) > 1) {
                                  							if(nb_start >= settings.end){
                                  								nb_start = settings.end
                                  							}
                                  							let nb1 = nb_start.toString().split("")
                                  							nb1.splice(-2, 0, ".")
                                  							element.text(nb1.join(""))
                                  						}
                                  						else {
                                  							if(nb_start >= settings.end){
                                  								nb_start = settings.end
                                  							}
                                  							element.text(nb_start + settings.txt);
                                  						}
                                  					} else {
                                  						if (nb_xiaoshu == 1) {
                                  							nb_start = Number(nb_start.toFixed(1));
                                  						}
                                  						// 对超过1000的数字进行处理,添加一个逗号
                                  						if ((nb_start / 1000) > 1) {
                                  							if(nb_start >= settings.end){
                                  								nb_start = settings.end
                                  							}
                                  							let nb1 = nb_start.toString().split("")
                                  							nb1.splice(-3, 0, ",")
                                  							element.text(nb1.join(""))
                                  						}
                                  						else {
                                  							if(nb_start >= settings.end){
                                  								nb_start = settings.end
                                  							}
                                  							element.text(nb_start + settings.txt);
                                  						}
                                  					}
                                  				}
                                  				// Timer
                                  				// Launches every "settings.delay"
                                  				setInterval(counter, settings.delay);
                                  			} catch (e) {
                                  				alert(e + ' at line ' + e.lineNumber);
                                  			}
                                  		});
                                  	};
                                  
                                  })(jQuery);
                                  使用方法:
                                  	var number1  = $('.number1').animationCounter({
                                              start: 0,
                                              step: 50,
                                              delay:60,
                                              end:1034,
                                              xiaoshu:2,
                                       });
                                  
                                  本插件并不完善,还需更改
                                  
                                  1
                                  2
                                  3
                                  4
                                  5
                                  6
                                  7
                                  8
                                  9
                                  10
                                  11
                                  12
                                  13
                                  14
                                  15
                                  16
                                  17
                                  18
                                  19
                                  20
                                  21
                                  22
                                  23
                                  24
                                  25
                                  26
                                  27
                                  28
                                  29
                                  30
                                  31
                                  32
                                  33
                                  34
                                  35
                                  36
                                  37
                                  38
                                  39
                                  40
                                  41
                                  42
                                  43
                                  44
                                  45
                                  46
                                  47
                                  48
                                  49
                                  50
                                  51
                                  52
                                  53
                                  54
                                  55
                                  56
                                  57
                                  58
                                  59
                                  60
                                  61
                                  62
                                  63
                                  64
                                  65
                                  66
                                  67
                                  68
                                  69
                                  70
                                  71
                                  72
                                  73
                                  74
                                  75
                                  76
                                  77
                                  78
                                  79
                                  80
                                  81
                                  82
                                  83
                                  84
                                  85
                                  86
                                  87

                                  # 3、油盘数字滚动类插件

                                  /*
                                   * @filename numberAnimate.js
                                   * @author fy[2016-9-18 17:09:00]
                                   * @update fy[2019-4-9 16:22:00]
                                   * @version v1.1
                                   * @description 页面数字滚动插件
                                   * @基于jquery
                                   */
                                  
                                  ;
                                  (function ($) {
                                    $.fn.numberAnimate = function (setting) {
                                      var defaults = {
                                        speed: 1000, //动画速度
                                        num: "", //初始化值
                                        iniAnimate: true, //是否要初始化动画效果
                                        symbol: '', //默认的分割符号,千,万,千万
                                        dot: 0, //保留几位小数点
                                        pst: "" //是否有 百分号
                                      }
                                      //如果setting为空,就取default的值
                                      var setting = $.extend(defaults, setting);
                                  
                                      //如果对象有多个,提示出错
                                      if ($(this).length > 1) {
                                        alert("just only one obj!");
                                        return;
                                      }
                                  
                                      //如果未设置初始化值。提示出错
                                      if (setting.num == "") {
                                        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 = parseFloat(num).toFixed(setting.dot);
                                        if (typeof (num) == 'number') {
                                          var arrStr = num.toString().split("");
                                        } else {
                                          var arrStr = num.split("");
                                        }
                                        //console.log(arrStr);
                                        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 = $(this).find(".mt-number-animate-dom");
                                        if ($dom.length < newArr.length) {
                                          $(this).html(setNumDom(numToArr(num)));
                                        } else {
                                          $dom.each(function (index, el) {
                                            $(this).attr("data-num", newArr[index]);
                                          });
                                        }
                                        runAnimate($(this));
                                      }
                                      //init
                                      init($(this));
                                      return this;
                                    }
                                  })(jQuery);
                                  使用方法:
                                  	 var numRun1 = $(".numberRun1").numberAnimate({
                                        num: 15342.10,
                                        dot: 2,
                                        speed: 2000,
                                        symbol: ","
                                      });
                                  	
                                  <script type="text/javascript">
                                    $(function () {
                                      //初始化
                                      var numRun1 = $(".numberRun1").numberAnimate({
                                        num: 15342.10,
                                        dot: 2,
                                        speed: 2000,
                                        symbol: ","
                                      });
                                      var numRun2 = $(".numberRun2").numberAnimate({
                                        num: '52353434',
                                        speed: 2000,
                                        symbol: ","
                                      });
                                      var numRun3 = $(".numberRun3").numberAnimate({
                                        num: '523534.343',
                                        dot: 3,
                                        speed: 2000
                                      });
                                      var numRun4 = $(".numberRun4").numberAnimate({
                                        num: '1553434',
                                        speed: 2000
                                      });
                                      var numRun5 = $(".numberRun5").numberAnimate({
                                        num: '42.21',
                                        pst: "%",
                                        dot: 2,
                                        speed: 2000,
                                        symbol: ","
                                      });
                                      var numRun6 = $(".numberRun6").numberAnimate({
                                        num: 1,
                                        dot: 2,
                                        speed: 500
                                      });
                                  
                                      var nums1 = 15342.10;
                                      setInterval(function () {
                                        nums1 += 21.31;
                                        numRun1.resetData(nums1);
                                      }, 3000);
                                      var nums2 = 52353434;
                                      setInterval(function () {
                                        nums2 += 3434;
                                        numRun2.resetData(nums2);
                                      }, 3800);
                                  
                                      var nums3 = 523534.343;
                                      setInterval(function () {
                                        nums3 += 7454.521;
                                        numRun3.resetData(nums3);
                                      }, 4000);
                                  
                                      var nums4 = 1553434;
                                      setInterval(function () {
                                        nums4 += 1254;
                                        numRun4.resetData(nums4);
                                      }, 3500);
                                  
                                      var nums5 = 42.21;
                                      setInterval(function () {
                                        nums5 += 2.55;
                                        console.log(nums5)
                                        console.log(numRun5)
                                        numRun5.resetData(nums5);
                                      }, 2500);
                                  
                                  
                                      var nums6 = 1;
                                      setInterval(function () {
                                        nums6 += 1;
                                        // console.log(nums6)
                                        // console.log(numRun6)
                                        numRun6.resetData(nums6);
                                      }, 1000);
                                  
                                    })
                                  </script>
                                  	
                                  
                                  1
                                  2
                                  3
                                  4
                                  5
                                  6
                                  7
                                  8
                                  9
                                  10
                                  11
                                  12
                                  13
                                  14
                                  15
                                  16
                                  17
                                  18
                                  19
                                  20
                                  21
                                  22
                                  23
                                  24
                                  25
                                  26
                                  27
                                  28
                                  29
                                  30
                                  31
                                  32
                                  33
                                  34
                                  35
                                  36
                                  37
                                  38
                                  39
                                  40
                                  41
                                  42
                                  43
                                  44
                                  45
                                  46
                                  47
                                  48
                                  49
                                  50
                                  51
                                  52
                                  53
                                  54
                                  55
                                  56
                                  57
                                  58
                                  59
                                  60
                                  61
                                  62
                                  63
                                  64
                                  65
                                  66
                                  67
                                  68
                                  69
                                  70
                                  71
                                  72
                                  73
                                  74
                                  75
                                  76
                                  77
                                  78
                                  79
                                  80
                                  81
                                  82
                                  83
                                  84
                                  85
                                  86
                                  87
                                  88
                                  89
                                  90
                                  91
                                  92
                                  93
                                  94
                                  95
                                  96
                                  97
                                  98
                                  99
                                  100
                                  101
                                  102
                                  103
                                  104
                                  105
                                  106
                                  107
                                  108
                                  109
                                  110
                                  111
                                  112
                                  113
                                  114
                                  115
                                  116
                                  117
                                  118
                                  119
                                  120
                                  121
                                  122
                                  123
                                  124
                                  125
                                  126
                                  127
                                  128
                                  129
                                  130
                                  131
                                  132
                                  133
                                  134
                                  135
                                  136
                                  137
                                  138
                                  139
                                  140
                                  141
                                  142
                                  143
                                  144
                                  145
                                  146
                                  147
                                  148
                                  149
                                  150
                                  151
                                  152
                                  153
                                  154
                                  155
                                  156
                                  157
                                  158
                                  159
                                  160
                                  161
                                  162
                                  163
                                  164
                                  165
                                  166
                                  167
                                  168
                                  169
                                  170
                                  171
                                  172
                                  173
                                  174
                                  175
                                  176
                                  177
                                  178
                                  179
                                  180
                                  181
                                  182
                                  183
                                  184
                                  185
                                  186
                                  187
                                  188
                                  189
                                  190
                                  191
                                  192
                                  193
                                  194
                                  195
                                  196
                                  197
                                  198
                                  199
                                  200
                                  201
                                  202
                                  203
                                  204
                                  205
                                  206
                                  207
                                  208
                                  209
                                  210
                                  211
                                  212
                                  213
                                  214
                                  215
                                  216
                                  217
                                  218
                                  219
                                  220
                                  221
                                  222
                                  223
                                  224
                                  225
                                  226
                                  227
                                  228
                                  229
                                  230
                                  231
                                  232
                                  233
                                  edit icon编辑此页open in new window
                                  上一页
                                  js重要
                                  下一页
                                  纯css手风琴
                                  傻瓜都能写出计算机可以理解的代码。唯有能写出人类容易理解的代码的,才是优秀的程序员。
                                  Copyright © 2022 YY

                                  该应用可以安装在您的 PC 或移动设备上。这将使该 Web 应用程序外观和行为与其他应用程序相同。它将在出现在应用程序列表中,并可以固定到主屏幕,开始菜单或任务栏。此 Web 应用程序还将能够与其他应用程序和您的操作系统安全地进行交互。

                                  详情