0

Sou leiga em javascript.

Meu chefe sonha em colocar um tal de "cronômetro" no site (números animados que disparam um movimento semelhante a uma maquina contabilizando os números,que ativam quando você chega até a janela através do scroll). Porém não consigo acrescentar o ponto e virgula no comando do javascript

        $(document).ready(function () {

             function visibleHideme() {
                $('.quadrado').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) {
            $('.count-number').each(function () {
             $(this).prop('.count-number', 0).animate({
                    Counter: $(this).text()
                }, {
                    duration: 1000,
                    easing: 'swing',
                    separator: ',ddd',
                    step: function (now) {

                        $(this).text(Math.ceil(now));
                    },
                    complete: function () {
                        $(this).stop(true, true)                          


                    },
                });

            });
        }

        $(window).scroll(function (e) {
           
            var alturaBody = $(window).height();
            var distanciaElemento = $('.count-number').offset().top;
            var posicaoScroll = $(this).scrollTop();
            var alturaElemento = $('.count-number').outerHeight();

          
            if (posicaoScroll > (distanciaElemento + alturaElemento - alturaBody)) {
                ativaContador();
                floored_number = floored_number.toString().replace('.', ',');

            }
        });
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;
            }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"> </script>


<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></br><br>
<span class="count-title">+ <h2 class="count-number">200000000 </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>

4
  • O que seria "acrescentar o ponto e virgula no comando do javascript"?
    – Costamilam
    Commented 24/09/2018 às 16:37
  • a minha ideia é parecer com essa animação codepen.io/syedrafeeq/pen/rcfsJ Commented 24/09/2018 às 16:42
  • Vc quer que o número tenha casas decimais é isso? Como pontos e vírgulas?
    – hugocsl
    Commented 24/09/2018 às 17:01
  • isso separador e decimais juntos estilo "2.000.000,00 " Commented 24/09/2018 às 17:04

1 Resposta 1

1

Não sei se compreendi bem sua pergunta, mais você quer formatar o número e inserir casas decimais no mesmo? Se sim, utilize: toLocaleString()

O método toLocaleString() retorna uma string com uma representação sensível a linguagem deste número. Fonte: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Number/toLocaleString

Exemplo no JSFiddle

$(document).ready(function() {

  function visibleHideme() {
    $('.quadrado').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) {
  $('.count-number').each(function() {
    $(this).prop('.count-number', 0).animate({
      Counter: $(this).text()
    }, {
      duration: 1000,
      easing: 'swing',
      separator: ',ddd',
      step: function(now) {

        if (now > 0)
          $(this).text(Math.ceil(now).toLocaleString("pt-BR", {
            currency: "BRL",
            minimumFractionDigits: 2
          }));

      },
      complete: function() {
        $(this).stop(true, true)


      },
    });

  });
}

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

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

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

    floored_number = floored_number.toString().replace('.', ',');

  }
});
  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;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>


<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></br><br>
      <span class="count-title">+ <h2 class="count-number">200000000 </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>

12
  • Eu tentei fazer dessa forma, porem depois que ele faz animação dá uma espécie de erro (NaN) Commented 24/09/2018 às 17:13
  • @BetinaSilva editei a resposta e corrigi. Qualquer dúvida estou à disposição. Att. Commented 24/09/2018 às 17:25
  • fiz o teste funcionou, mas teria como tirar o "R$" tentei fazer no estilo decimal, porem quando sobe e desce com o scroll ele diminui o valor estipulado, não deixa o valor fixo como estava, sera que teve algum conflito? Commented 24/09/2018 às 20:26
  • @BetinaSilva editei e removi o R$. Para isso removi style: "currency" e adicionei minimumFractionDigits: 2 Para dúvidas relacionado ao toLocaleString consulte a documentação: developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/… Commented 24/09/2018 às 20:43
  • Muito obrigada pela ajuda e pela indicação de consulta! Commented 25/09/2018 às 11:13

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .