用于更新的Jquery编号计数器

Jquery number counter for updates

本文关键字：编号 计数器 Jquery 更新 用于      更新时间：2023-09-26

我有这个jquery函数。我想让它只是一个函数，这样我就可以通过调用一个函数并传递一些争论来获得相同的结果。

正如你所看到的，这个函数对数字的计数基本上是一样的。我希望只有一个函数，然后解析出参数以获得相同的结果。类似于startcount（arg1，arg2）；

var one_countsArray = [2,4,6,7,4252];
var two_countsArray = [3,3,4,7,1229];
var sumemp = one_countsArray.reduce(add, 0);
 var sumallis = two_countsArray.reduce(add, 0);
  function add(a, b) {
      return a + b;
  }
  var count = 0;
  var inTv = setInterval(function(){startCount()},100);
  var inTv2 = setInterval(function(){startCount2()},100);
  function startCount()
  {
      if(count == sumemp) {
          clearInterval(inTv);
      } else {
          count++;
      }
      $('.stats_em').text(count); 
     
  }
  var count2 = 10;
  function startCount2()
  {
      if(count2 == sumallis) {
          clearInterval(inTv2);
      } else {
          count2++;
      }
      $('.stats_iss').text(count2); 
  }
div {
  padding:50px 0;
  background: #000000;
  color: #ffffff;
  width: 100px;
  height:100px;
  border-radius:50%;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="stats_em"></div>
<div class="stats_iss"></div>

一个非常简单的jquery插件怎么样

$.fn.countTo = function(arrNums){
   var self = this;
   function add(a,b){
       return a+b;  
   }
  
   var current = 0;
   var max = arrNums.reduce(add,0);
  
   var int = setInterval(function(){
       if(current == max)
         clearInterval(int);
       else
         current++;
     
     self.text(current);
   },100);
  return this;
}
$('.stats_em').countTo([2,4,6,7,4252]);
$('.stats_iss').countTo([3,3,4,7,1229]);
div {
  padding:50px 0;
  background: #000000;
  color: #ffffff;
  width: 100px;
  height:100px;
  border-radius:50%;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="stats_em"></div>
<div class="stats_iss"></div>

当您注意到您正在重写类似代码块时，转移到一个泛型函数是正确的方法！最好的开始方式是尝试确定你的参数：

  • count和count2显示计时器需要启动计数才能在
  • sumemp和sumpallis显示您需要能够指定最大计数
  • inTv和inTv显示您需要能够设置间隔
  • $('.stats_iss')和$('.stats_em')表明您需要能够确定输出元素

这意味着您的最终类、函数或jquery扩展将至少具有类似于以下的签名：

function(startCount, maximumCount, interval, outputElement) { }

一旦你写了这篇文章，你就可以粘贴你已经拥有的代码。（我把你的setInterval换成了setTimeout，除此之外，变化不大）

var createCounter = function(start, max, interval, outputElement) {
  var count = start;
  var timeout;
  var start = function() {
    count += 1;
    outputElement.text(count);
    if (count < max) {
      timeout = setTimeout(start, interval);
    }
  }
  var stop = clearTimeout(timeout);
  return {
    start: start,
    stop: stop
  }
}
var one_countsArray = [2, 4, 6, 7, 300];
var two_countsArray = [3, 3, 4, 7, 100];
var sumemp = one_countsArray.reduce(add, 0);
var sumallis = two_countsArray.reduce(add, 0);
function add(a, b) {
  return a + b;
}
var counters = [
  createCounter(0, sumemp, 100, $('.stats_em')),
  createCounter(10, sumallis, 100, $('.stats_iss'))
];
counters.forEach(function(counter) {
  counter.start();
});
div {
  padding: 50px 0;
  background: #000000;
  color: #ffffff;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="stats_em"></div>
<div class="stats_iss"></div>

相关文章：