Add Mil separator to a number animated by jquery

Question

I wonder if you have any different way to add the number separator in the Jquery form?

Example: Current: 2000 Correct 2000

https://jsfiddle.net/ymxdq980/3/

Answer 1

Change your function numberToReal this way below. See working here insert link description here

function addDots(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
}

Answer 2

I was able to solve the problem with punctuation, the conflict started was due to scroll, but for people who had the same problem in finding a Chronometer or "Count number Animation" that activates with scroll movement, follow the commands of java script and jquery.

var jarodou = 0;  //controla se já rodou o counter 0=não 1=sim

$(document).ready(function() {
   

  function visibleHideme() {
    $('.seucomandodonumero').each(function() {

      var top_of_object = $(this).offset().top;
      var bottom_of_object = $(this).offset().top + $(this).outerHeight();
      var half_of_object = $(this).offset().top + ($(this).outerHeight() / 2);
      var top_of_window = $(window).scrollTop();
      var bottom_of_window = $(window).scrollTop() + $(window).height();

      if (half_of_object < top_of_window) {
        $(this).css({
          'opacity': '0',
          'top': '-50px'
        });
      }
      if (half_of_object > bottom_of_window) {
        $(this).css({
          'opacity': '0',
          'top': '50px'
        });
      } else if (half_of_object > top_of_window && half_of_object < bottom_of_window) {
        $(this).css({
          'opacity': '1',
          'top': '0px'
        });
      }

    });
  }
  visibleHideme();

  $(window).scroll(function() {
    visibleHideme();
  });

});





function ativaContador(e) {
  $('.seucomandodonumero').each(function() {
    $(this).prop('.seucomandodonumero', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 1000,
      easing: 'swing',
      separator: ',ddd',
      step: function(now) {
       if (now > 0)
          $(this).text(addDots(Math.ceil(now)));
       
      },
      complete: function() {
        $(this).stop(true, true)
        

      },
    });

  });
}

$(window).scroll(function(e) {

  var alturaBody = $(window).height();
  var distanciaElemento = $('.seucomandodonumero').offset().top;
  var posicaoScroll = $(this).scrollTop();
  var alturaElemento = $('.seucomandodonumero').outerHeight();

  if (posicaoScroll > (distanciaElemento + alturaElemento - alturaBody)) {

      //testa se counter já rodou
      if (jarodou == 0) {
          ativaContador();
      }
      jarodou = 1; //inibe rodar counter de novo
   
  }
    });

function addDots(nStr) {
    nStr += '';
    var x = nStr.split('.');
    var x1 = x[0];
    var x2 = x.length > 1 ? '.' + x[1] : '';
    var rgx = /(\d+)(\d{3})/;
    while (rgx.test(x1)) {
        x1 = x1.replace(rgx, '$1' + '.' + '$2');
    }
    return x1 + x2;
}

body {
  padding: 10px;
  font-family: Helvetica;
  background-color: white;
}

.col_fifth {
  width: 95%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 2fr));
  grid-gap: 8px;
  margin: auto;
}

.quadrado {
  text-align: center;
  margin-bottom: 0px;
  color: #2d2d2d;
  width: 198px;
  display: table;
  float: left;
  padding: 10px;
  position: relative;
  transition: opacity 0.6s ease, top 0.6s ease;
  margin: 5px;
  justify-content: center;
}

.counter-cronometro {
  padding: 10px;
  border-radius: 10px;
  display: table;
  justify-content: center;
  width: 190px;
  margin: 0px;
  height: 190px;
  background-color: #f9f9f9;
}

.count-title {
  font-size: 28px;
  margin-top: 5px;
  margin-bottom: 0;
  text-align: center;
  font-weight: bold;
  display: inline;
}

.count-text {
  color: #898989;
  font-size: 18px;
  font-weight: bold;
  margin-top: 5px;
  margin-bottom: 0;
  text-align: center;
}

.count-number {
  font-weight: bold;
  font-size: 20px;
  display: inline;
}

@media only screen and (max-width: 320px) {
  .col_fifth {
    width: 40%;
    display: table;
    float: left;
    margin: auto;
  }
  .counter-cronometro {
    padding: 5px;
    border-radius: 10px;
    justify-content: center;
    width: 140px;
    margin: 0 0px;
    height: 160px;
    background-color: #f9f9f9;
  }
  div.quadrado {
    text-align: center;
    margin-bottom: 0px;
    color: #2d2d2d;
    width: 30%;
    padding: 5px;
    position: relative;
    transition: opacity 0.6s ease, top 0.6s ease;
  }
  div.count-title {
    font-size: 20px;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
    font-weight: bold;
    display: inline;
  }
  div.count-text {
    color: #898989;
    font-size: 13px;
    font-weight: bold;
    margin-top: 5px;
    margin-bottom: 0;
    text-align: center;
  }

<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>
<br></br>

<div class="col_fifth">


  <div class="quadrado">
    <div class="counter-cronometro">
      <img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/trophy%201.png" border="0" alt=" photo trophy 1.png" width="67px" /> <br></br><br>
      <div class="count-title">+
        <h2 class="count-number">59</h2>
      </div>
      <p class="count-text">Anos de Liderança</p>
    </div>
  </div>


  <div class="quadrado">
    <div class="counter-cronometro">
      <img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/icon%201.png" border="0" width="65px" alt="preço zetaflex" /> <br />
      <span class="count-title">+ <h2 class="count-number">2000000 </h2><p class="count-text ">m² Vendidos</p></div></div>
  

<div class="quadrado">
 <div class="counter-cronometro">
 <img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/mapa-brasil.png" border="0" border="0" alt="Áreas atendidas" width="67px" /><br></br><br> 
     <div class="count-title">+ <h2 class="count-number">4000</h2></div> <p class="count-text ">Municípios Atendidos</p></div></div>


<div class="quadrado">
 <div class="counter-cronometro"> 
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/businessman-1_1.png" border="0" alt="representantes"width="80px" style="margin-top:10px;"/></br><br>
<div class="count-title">+ <h2  class="count-number">500</h2> </div> <p class="count-text ">Colaboradores</p></div></div>
  


<div class="quadrado">
<div class="counter-cronometro">
<img src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/diploma_1.png" border="0" alt="Patente" width="70px" /><br></br><br>
<div class="count-title">+ <h2  class="count-number">160</h2> </div><p class="count-text ">Patentes</p></div></div>


<div class="quadrado">
 <div class="counter-cronometro">
<img  src="https://i220.photobucket.com/albums/dd127/Betinahyuuga/real-estate-agreement%201.png"alt="clientes satisfeito" width="65px" /><br></br> 
<div class="count-title"> + <h2 class="count-number">300000</h2></div><p class="count-text "> Clientes Satisfeitos</p></div></div>



</div>