jQuery counter to count up to a target number

Question

I m trying to find out if anyone knows about an already existing jQuery plugin that will count up to a target number at a specified speed   For example  take a look at Google s number of MB of free storage on the Gmail homepage  under the heading that reads  Lots of space   It has a starting number in a  lt span gt  tag  and slowly counts upward every second   I m looking for something similar  but I d like to be able to specify    The start number The end number The amount of time it should take to get from start to end  A custom callback function that can execute when a counter is finished

User · Answer

I do not know about any existing plugins  but it seems fairly easy to write one yourself using the JavaScript Timing Events

User · Answer

Needed a break  so I cobbled the following together  Not sure it would be worth creating a plugin from though    lt  DOCTYPE html PUBLIC  -  W3C  DTD XHTML 1 0 Strict  EN   http   www w3 org TR xhtml1 DTD xhtml1-strict dtd  gt   lt html xmlns  http   www w3 org 1999 xhtml  gt       lt head gt           lt title gt              Counter          lt  title gt           lt script type  text javascript  src  http   ajax googleapis com ajax libs jquery 1 4 2 jquery js  gt  lt  script gt           lt script type  text javascript  gt                 lt   CDATA                  function createCounter elementId start end totalTime callback                                        var jTarget jQuery     elementId                       var interval totalTime  end-start                       var intervalId                      var current start                      var f function                            jTarget text current                           if current  end                                                        clearInterval intervalId                               if callback                                                                callback                                                                                      current                                            intervalId setInterval f interval                       f                                      jQuery document  ready function                        createCounter  counterTarget  0 20 5000 function                            alert  finished                                                              gt           lt  script gt       lt  head gt       lt body gt           lt div id  counterTarget  gt  lt  div gt       lt  body gt   lt  html gt

User · Answer

I ended up creating my own plugin   Here it is in case this helps anyone   function            fn countTo   function options               merge the default plugin settings with the custom options         options     extend       fn countTo defaults  options                             how many times to update the value  and how much to increment the value on each update         var loops   Math ceil options speed   options refreshInterval               increment    options to - options from    loops                   return   this  each function                 var  this   this                  loopCount   0                  value   options from                  interval   setInterval updateTimer  options refreshInterval                            function updateTimer                     value    increment                  loopCount                       this  html value toFixed options decimals                                     if  typeof options onUpdate      function                         options onUpdate call  this  value                                                      if  loopCount  gt   loops                        clearInterval interval                       value   options to                                           if  typeof options onComplete      function                             options onComplete call  this  value                                                                                       fn countTo defaults             from  0      the number the element should start at         to  100      the number the element should end at         speed  1000      how long it should take to count between the target numbers         refreshInterval  100      how often the element should be updated         decimals  0      the number of decimal places to show         onUpdate  null      callback method for every time the element is updated          onComplete  null      callback method for when the element finishes updating           jQuery    Here s some sample code of how to use it   lt script type  quot text javascript quot  gt  lt  --     jQuery function                  timer   countTo               from  50              to  2500              speed  1000              refreshInterval  50              onComplete  function value                    console debug this                                       -- gt  lt  script gt    lt span class  quot timer quot  gt  lt  span gt   View the demo on JSFiddle  http   jsfiddle net YWn9t

User · Answer

Another way to do this without jQuery would be to use Greensock s TweenLite JS library     Demo http   codepen io anon pen yNWwEJ  var display   document getElementById  display    var number    param 0   var duration   1   function count       TweenLite to number  duration   param    20   roundProps  param     onUpdate update  onComplete complete  ease Linear easeNone       function update       display innerHTML   number param     function complete         alert  Complete       count

User · Answer

You can use the jQuery animate function     Enter num from and to    countNum  99   animate  countNum  1000       duration  8000    easing  linear     step  function            What todo on every count     console log Math floor this countNum           complete  function         console log  finished              http   jsbin com upazas 958

User · Answer

CodePen Working Example  For more GitHub repo   lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt Count Up Numbers Example lt  title gt       lt script src  https   code jquery com jquery-2 2 4 js  integrity  sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq 8PuOW33aOqmvFpqI   crossorigin  anonymous  gt  lt  script gt        lt style type  text css  gt                      Courtesy  abcc com         https   abcc com en         https   abcc com en at-mining                      rewards               background-color   160922                      th-num-bold               font-family   Arial                        ff-arial               font-family   Arial                        scroll-wrap  scroll-exchange-fee  exchange time               color  hsla 0 0  100   7               font-size  13px                      f14               font-size  14px                      flex               display  -webkit-box              display  -ms-flexbox              display  flex                      jcsb               -ms-flex-pack  justify important              -webkit-box-pack  justify important              justify-content  space-between important                      aic               -ms-flex-align  center important              -webkit-box-align  center important              align-items  center important                      li               list-style  none                      pull-left               float  left important                      rewards-wrap               height  100                       at-equity-wrap  rewards  calculate container               -webkit-box-shadow  rgba 0 0 0  03  0 5px 10px 0              background  url https   s abcc com portal static img home-bg-pc c9207cd png               background-repeat  no-repeat              background-size  1440px 100               box-shadow  0 5px 10px 0 rgba 0 0 0  03               margin  0 auto              max-width  1200px              overflow  hidden              position  relative                      rewards-pc-wrap  current-profit  point               color   fff              font-size  25px                      rewards-pc-wrap  current-profit  integer               color   fff              font-size  45px                      rewards-pc-wrap  current-profit  decimal               color   fff              font-size  25px                      rewards-pc-wrap  current-profit  unit               color   fff              font-size  24px              margin-right  5px              margin-top  18px                      rewards-pc-wrap  yesterday-profit  point               color   fff              font-size  25px                      rewards-pc-wrap  yesterday-profit  integer               color   fff              font-size  45px                      rewards-pc-wrap  yesterday-profit  decimal               color   fff              font-size  25px                      rewards-pc-wrap  yesterday-profit  unit               color   fff              font-size  24px              margin-right  5px              margin-top  18px                      rewards-pc-wrap  profit-rate-100  point               color   fff              font-size  25px                      rewards-pc-wrap  profit-rate-100  integer               color   fff              font-size  45px                      rewards-pc-wrap  profit-rate-100  decimal               color   fff              font-size  25px                      rewards-pc-wrap  profit-rate-100  unit               color   fff              font-size  24px              margin-right  5px              margin-top  18px                      rewards-pc-wrap  total-profit  point               color   fff              font-size  25px                      rewards-pc-wrap  total-profit  integer               color   fff              font-size  45px                      rewards-pc-wrap  total-profit  decimal               color   fff              font-size  25px                      rewards-pc-wrap  total-profit  unit               color   fff              font-size  24px              margin-right  5px              margin-top  18px                      rewards-pc-wrap               height  400px              margin-left  129px              padding-top  100px              width  630px                      itm-rv               -ms-flex  1              -webkit-box-flex  1              flex  1              font-family   Arial                       fb               font-weight  700                      main-p               color  hsla 0 0  100   7               font-size  13px              margin-bottom  8px              margin-top  10px                      sub-p               color  hsla 0 0  100   5               font-size  12px              margin-top  12px                      fb-r               font-weight  300                      price-btc               color  hsla 0 0  100   5               font-size  13px              margin-top  10px                  lt  style gt   lt  head gt   lt body gt       lt div class  at-equity-wrap  gt           lt div  class  rewards   gt               lt div  class  calculate container  gt                   lt div  class  rewards-wrap  gt                       lt div class  flex jcc aic  gt                           lt div  class  rewards-pc-wrap slideInUp  id  nuBlock  gt                               lt div  class  flex jcsb aic  gt                                   lt div  class  itm-rv  style  margin-right  60px   gt                                       lt div  class  current-profit th-num-bold fb  gt  lt span  class  unit pull-left  gt   lt  span gt   lt span class  integer  id  cr prft int   gt 0 lt  span gt   lt span  class  point  gt   lt  span gt   lt span class  decimal  id  cr prft dcml   gt 00 lt  span gt  lt  div gt                                       lt p  class  main-p  gt Platform Rewards to Be Distributed Today lt  p gt                                       lt p  class  sub-p fb-r  gt Total circulating KAT eligible for rewards 100 000 000 lt  p gt                                   lt  div gt                                   lt div  class  itm-rv  gt                                       lt div  class  profit-rate-100 th-num-bold  gt  lt span  class  unit pull-left  gt   lt  span gt   lt span  class  integer  id  dly prft int   gt 0 lt  span gt   lt span  class  point  gt   lt  span gt  lt span  class  decimal  id  dly prft dcml   gt 00 lt  span gt  lt  div gt                                       lt p  class  main-p  gt Daily Rewards of 1000 KAT lt  p gt                                       lt div  class  profit-rate sub-p fb-r  gt  lt span  gt Daily KAT Rewards Rate lt  span gt   lt span  class  integer  gt 0 lt  span gt   lt span  class  decimal  gt  00 lt  span gt   lt span  class  unit  gt   lt  span gt  lt  div gt                                   lt  div gt                               lt  div gt                               lt div  class  flex jcsb aic  style  margin-top  40px   gt                                   lt div  class  itm-rv  style  margin-right  60px   gt                                       lt div  class  yesterday-profit th-num-bold fb   gt  lt span  class  unit pull-left  gt   lt  span gt   lt span  class  integer  id  ytd prft int   gt 0 lt  span gt   lt span  class  point  gt   lt  span gt  lt span  class  decimal  id  ytd prft dcml   gt 00 lt  span gt  lt  div gt                                       lt div  class  price-btc fb-r  gt   0 00000000 BTC lt  div gt                                       lt p  class  main-p fb-r  gt Platform Rewards Distributed Yesterday lt  p gt                                   lt  div gt                                   lt div  class  itm-rv  gt                                       lt div  class  total-profit th-num-bold fb   gt  lt span  class  unit pull-left  gt   lt  span gt   lt span  class  integer  id  ttl prft int   gt 0 lt  span gt   lt span  class  point  gt   lt  span gt  lt span  class  decimal  id  ttl prft dcml   gt 00 lt  span gt  lt  div gt                                       lt div  class  price-btc fb-r  gt   0 00000000 BTC lt  div gt                                       lt p  class  main-p fb-r  gt Cumulative Platform Rewards Distributed lt  p gt                                   lt  div gt                               lt  div gt                           lt  div gt                       lt  div gt                   lt  div gt               lt  div gt           lt  div gt       lt  div gt   lt  body gt   lt script type  text javascript  gt         document  on  ready   function             setTimeout function                 cr countUp                dly countUp                ytd countUp                ttl countUp               2000                 unit             var cr data  dly data  ytd data  ttl data      cr data   dly data   ytd data   ttl data     670 0000682    670 002    660 000068    660 002    650 000000063    650 01    640 00000006    640 01    630 0000000602    630 01    620 0000000622    620 01    610 00000016    610 002    600 00000015998    600 002    590 00000094    590 002    580 0000009    580 002    760 0000682    760 002    660 000068    660 002    560 000000063    560 01    460 00000006    460 01    360 0000000602    360 01    260 0000000622    260 01    160 00000016    160 002    060 00000015998    060 002    950 00000094    950 002    850 0000009    850 002         cr start   0      cr stop   cr data length - 1      cr nu   20       function cr countUp            setTimeout function                    cr prft int   text cr data cr start  split      0                    cr prft dcml   text cr data cr start  split      1                if cr start  lt  cr stop                   cr start    1                  cr countUp                             cr nu              dly start   0      dly stop   dly data length - 1      dly nu   20       function dly countUp            setTimeout function                    dly prft int   text dly data dly start  split      0                    dly prft dcml   text dly data dly start  split      1                if dly start  lt  dly stop                   dly start    1                  dly countUp                             dly nu              ytd start   0      ytd stop   ytd data length - 1      ytd nu   20       function ytd countUp            setTimeout function                    ytd prft int   text ytd data ytd start  split      0                    ytd prft dcml   text ytd data ytd start  split      1                if ytd start  lt  ytd stop                   ytd start    1                  ytd countUp                             ytd nu              ttl start   0      ttl stop   ttl data length - 1      ttl nu   20       function ttl countUp            setTimeout function                    ttl prft int   text ttl data ttl start  split      0                    ttl prft dcml   text ttl data ttl start  split      1                if ttl start  lt  ttl stop                   ttl start    1                  ttl countUp                             ttl nu           lt  script gt   lt  html gt

User · Answer

A different approach  Use Tween js for the counter  It allows the counter to slow down  speed up  bounce  and a slew of other goodies  as the counter gets to where its going   http   jsbin com ekohep 2 edit javascript html live  Enjoy     PS  doesn t use jQuery - but obviously could

User · Answer

Try jCounter  it has a customRange setting where you can specify the start and end number  it can count up as well including the fallback you want at the end

User · Answer

You can use jquery animate function for that       countNum      code   html      animate   countNum  4000              duration  8000          easing   linear           step  function                  code   html Math floor this countNum                        complete  function                  code   html this countNum             alert  finished                        Here s the original article

User · Answer

I ve created the tiniest code to do exactly that  It s not only for counting but for any task that needs to run in a given time   let s say  do something for 5 seconds    Codepen Demo Page  Do-In  Github Project  super lightweight tiny script    Demo  var step   function t  elapsed          easing      t   t t t          calculate new value     var value   300   t     will count from 0 to 300         limit value   quot t quot  might be higher than  quot 1 quot       if  t  gt  0 999           value   300          print value  converts it to an integer      someElement innerHTML   value 0      var done   function        console log  done counting             Do-in settings object var settings         step       step      duration   3      done       done      fps        24    optional  Default is requestAnimationFrame        initialize  quot Do-in quot  instance  var doin   new Doin settings

User · Answer

Don t know about plugins but this shouldn t be too hard     function                     fn counter   function options               Set default values         var defaults                 start  0              end  10              time  10              step  1000              callback  function                         var options     extend defaults  options                          The actual function that does the counting         var counterFunc   function el  increment  end  step                var value   parseInt el html    10    increment              if value  gt   end                    el html Math round end                    options callback                  else                   el html Math round value                    setTimeout counterFunc  step  el  increment  end  step                                                  Set initial value           this  html Math round options start               Calculate the increment on each step         var increment    options end - options start      1000   options step    options time                          Call the counter function in a closure to avoid conflicts          function e  i  o  s                setTimeout counterFunc  s  e  i  o  s                this   increment  options end  options step            jQuery     Usage       foo   counter       start  1000      end  4500      time  8      step  500      callback  function             alert  I m done                 Example      http   www ulmanen fi stuff counter php   I guess the usage is self-explanatory  in this example  the counter will start from 1000 and count up to 4500 in 8 seconds in 500ms intervals  and will call the callback function when the counting is done

[jquery] jQuery counter to count up to a target number

Examples related to jquery

Examples related to jquery-plugins

Examples related to timer

Examples related to counter