Calulo idade + Progress bar

Front-end JavaScript
#1

bom dia galera!
estou com uma dúvida, tenho dois JS um que calula a idade e um que faz o progressbar , só que não sei como chamar a idade para que rode o progress.

por exemplo tenho 30 anos ele pega a idade e gera o progress até 30 , pois tava colocando ele fixo no codigo…

vou postar trecho do codigo.

//calculo Idade
function idade(d1, d2){
        d2 = d2 || new Date();
        var diff = d2.getTime() - d1.getTime();
        return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
    }
    console.log( idade(new Date(1988, 09, 3)) );

document.getElementById('idade').innerHTML = idade(new Date(1988, 09, 3));


// -------------------------------------------------------------
// Progress Bar
// -------------------------------------------------------------

$('.skill-progress').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
    if (visible) {
        $.each($('div.progress-bar'),function(){
            $(this).css('width', $(this).attr('aria-valuenow')+'%');
        });
        $(this).unbind('inview');
    }
});

// -------------------------------------------------------------
// More skill
// -------------------------------------------------------------
$('.more-skill').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
    if (visible) {
        $('.chart').easyPieChart({
            //your configuration goes here
            easing: 'easeOut',
            delay: 3000,
            barColor:'#68c3a3',
            trackColor:'rgba(255,255,255,0.2)',
            scaleColor: false,
            lineWidth: 8,
            size: 140,
            animate: 2000,
            onStep: function(from, to, percent) {
                this.el.children[0].innerHTML = Math.round(percent);
            }

        });
        $(this).unbind('inview');
    }
});

no html eu faço assim

<div class="chart" data-percent="30" data-color="e74c3c">

eu queria tirar esse fixo e deixar automatico a idade…obrigado se me ajudar.

1 curtida
#2

Exemplo:

HTML:

<div class="progress">
  <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
    <span class="sr-only">60% Complete</span>
  </div>
</div>
<p>
  <label id="lblIdade">0</label>
</p>
<button type="button" onclick="changeProgress()">Alterar</button>

Javascript:

function idade(d1, d2) {
  d2 = d2 || new Date();
  var diff = d2.getTime() - d1.getTime();
  return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
}

function changeProgress() {
  var value = idade(new Date(1980,1,1));
  $("#lblIdade").text(value);
  $(".progress .progress-bar").css('width', value);
}

DEMO: https://jsfiddle.net/krqrsypm/1/

#3

opa muito obrigado pela ajuda, mas saberia mais ou menos sem usar o button? ou pode me explicar como posso faze-ló

#4

O button no seu evento javacript onclick chama um método changeProgress();; Nele está fixado a idade, então, é só verificar como deseja fazer a chamada, em qual momento você vai chamar?

Então, o que pretende na realidade dessa rotina?

#5

opa bom dia, vou tentar te explicar… o momento que ele faz essa jogada é quando eu desço a barra de rolagem e ele ja faz a contagem até certo numero… que era fixo antes…
agora queria fazer ele automático , como se passa-se o ano seguinte eu nao precisasse mudar essa rotina na pagina fixa… então como eu já tenho a forma de idade não to conseguindo jogar ela na função onde era fixo o numero .

#6

Coloque o código!

#7

aqui é onde quero chamar
html

<!-- Skills Section -->
    <section id="skills" class="skills-section section-padding">
      <div class="container">
        <div class="row more-skill text-center">
           <div class="chart" data-percent="30" data-color="e74c3c">
 </div>
      </div><!-- /.container -->
    </section><!-- End Skills Section -->

java script

//calculo Idade
function idade(d1, d2){
        d2 = d2 || new Date();
        var diff = d2.getTime() - d1.getTime();
        return Math.floor(diff / (1000 * 60 * 60 * 24 * 365.25));
    }
    console.log( idade(new Date(1988, 09, 3)) );

document.getElementById('idade').innerHTML = idade(new Date(1988, 09, 3));


// -------------------------------------------------------------
// Progress Bar
// -------------------------------------------------------------

$('.skill-progress').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
    if (visible) {
        $.each($('div.progress-bar'),function(){
            $(this).css('width', $(this).attr('aria-valuenow')+'%');
        });
        $(this).unbind('inview');
    }
});

// -------------------------------------------------------------
// More skill
// -------------------------------------------------------------
$('.more-skill').bind('inview', function(event, visible, visiblePartX, visiblePartY) {
    if (visible) {
        $('.chart').easyPieChart({
            //your configuration goes here
            easing: 'easeOut',
            delay: 3000,
            barColor:'#68c3a3',
            trackColor:'rgba(255,255,255,0.2)',
            scaleColor: false,
            lineWidth: 8,
            size: 140,
            animate: 2000,
            onStep: function(from, to, percent) {
                this.el.children[0].innerHTML = Math.round(percent);
            }

        });
        $(this).unbind('inview');
    }
});
#8

é só você colocar o html e chamar no final do carregamento da página o javascript:

$(document).ready(function() {
       //insira o código do botão aqui.
});

Pronto vai funcionar!