Cursos

Simulados

P&R

Ajude-nos a manter este site sempre atualizado com novos Cursos,
Tutoriais, Simulados e Projetos.
Agradecemos a sua colaboração.

Programas JavaScript - 1
Programa para Calcular a Idade de uma Pessoa

Este programa calcula a idade de uma pessoa a partir da sua data de nascimento até os dias de hoje, ou outro dia qualquer, dependendo da finalidade de cada situação.
Então vejamos como fazer isso:
• Primeiro Passo:
Inicialmente abra o seu editor de HTML, como o Notepad++, por exemplo, e em seguida, selecione a linguagem de programação que você vai utilizar, por exemplo HTML, CSS, JavaScript.
• Segundo Passo:
Copie o código CSS abaixo, e em seguida, cole no seu Editor de HTML entre as tags <head>.... </head>.
Código CSS:

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous"> <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css"> <style> h1 { font-size:1.6rem; } h2 { font-size:1.1rem; } #wrapper td { padding-left:1px; padding-right:1px; } .calc { padding:10px; background:#f9563a; } .calc td { background:#f9563a !important; } .calc button { margin:10px auto; } .calc button img { filter:brightness(0) invert(1); } .calc>tbody>tr>td { padding-top:5px; padding-bottom:5px; } .calc>tbody>tr>td>input[type=number] { width:100px; } #calc2>tbody>tr:nth-child(5)>td input[type=number] { width:100%; } .calc>tbody>tr>td:nth-child(1)>select { width:160px; } .calc>tbody>tr>td:nth-child(2)>select { width:80px; } /*.calc tr td:nth-child(3) { width:180px; }*/ .calc>tbody>tr>td:nth-child(4) img { opacity:0.5; padding-left:3px; } #age { height:170px; } .ui-datepicker-trigger { display: inline; padding:0px; padding-left:3px; vertical-align:baseline; position:relative; } @media all and (max-width: 576px) { .calc { width:100%; } .calc td { float:left; } .calc td:nth-child(7) { clear:left; } .calc select { width:300px; } .calc tr:nth-child(2) td:nth-child(4) { padding-top:12px; } .calc tr:nth-child(4) td:nth-child(4) { padding-top:12px; } #calc2>tbody>tr:nth-child(4)>td:nth-child(1) { width:100%; } .calc tr:nth-child(7) td { width:100%; } #month1,#month2,#month3 { width:120px; } #year1,#year2,#year3 { width:80px; } } </style>
• Terceiro Passo:
Copie o código HTML abaixo e, em seguida, cole no seu Editor de HTML entre as tags <body>... </body>.
Código HTML:

<div id="lcol"> <h1 class="text-center">Calculadora de Idades</h1> <h2 class="text-center text-danger">Calcula a Idade de uma pessoa a partir da Data de Nascimento até a presente data.</h2> <div id="doc" class="d-flex justify-content-center bg-dark p-5">  <div style="background-color: #f956aa;" class="p-5"> <form name="calcform" autocomplete="off"> <table class="calc"> <tbody> <tr> <td colspan="4">Data de Nascimento:</td> </tr> <tr> <td> <select id="month1" class="form-control form-control-lg"> <option>Janeiro</option> <option>Fevereiro</option> <option>Março</option> <option>Abril</option> <option>Maio</option> <option>Junho</option> <option>Julho</option> <option>Agosto</option> <option>Setembro</option> <option>Outubro</option> <option>Novembro</option> <option>Dezembro</option> </select> </td> <td> <select id="days1" class="form-control form-control-lg"> <option>1</option> </select> </td> <td><input type="number" step="1" id="year1" placeholder="1990" class="form-control form-control-lg"></td> </tr> <tr> <td colspan="4"> <div id="dp1"></div> </td> </tr> <tr> <td colspan="4">Idade até esta data:</td> </tr> <tr> <td> <select id="month2" class="form-control form-control-lg"> <option>Janeiro</option> <option>Fevereiro</option> <option>Março</option> <option>Abril</option> <option>Maio</option> <option>Junho</option> <option>Julho</option> <option>Agosto</option> <option>Setembro</option> <option>Outubro</option> <option>Novembro</option> <option>Dezembro</option> </select> </td> <td> <select id="days2" class="form-control form-control-lg"> <option>1</option> </select> </td> <td><input type="number" step="1" id="year2" placeholder="1990" class="form-control form-control-lg"></td> </tr> <tr> <td colspan="4"> <div id="dp2"></div> </td> </tr> <tr> <td colspan="4"> <button type="button" title="Calcular" class="btn btn-success" onclick="calc()">Calcular</button> <button type="reset" title="Reset" class="btn btn-warning">Reset</button> </td> </tr> <tr> <td colspan="4">Resultado da Idade:</td> </tr> <tr> <td colspan="4"> <div id="age" rows="6" name="age" class="form-control form-control-lg bg-dark text-light pre-scrollable"></div> </td> </tr> </tbody> </table> </form> </div> </div> </div>
• Quarto Passo:
Copie o código JavaScript abaixo e cole no seu editor de HTML logo acima da tag </body>.
Código JavaScript:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js" defer></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $( document ).ready(function() { $("#dp1").hide(); $("#dp2").hide(); $("#dp3").hide(); var obj=$("#days1"); setDays(obj, 31); obj=$("#days2"); setDays(obj, 31); obj=$("#days3"); setDays(obj, 31); obj=$("#days4"); setDays(obj, 31); initDate(); $("#dp1").datepicker({ changeMonth: true, changeYear: true, }); $("#dp2").datepicker({ changeMonth: true, changeYear: true, }); $("#dp3").datepicker({ changeMonth: true, changeYear: true, }); $("#picker1").click(function() { if( $("#dp1").is(":hidden") ) { var y=$("#year1").val(); var m=$("#month1")[0].selectedIndex; var d=$("#days1")[0].selectedIndex+1; if( y=="" ) y=1990; $("#dp1").datepicker("setDate", new Date(y,m,d)); $("#dp1").show(); } else $("#dp1").hide(); }); $("#picker2").click(function() { if( $("#dp2").is(":hidden") ) { var y=$("#year2").val(); var m=$("#month2")[0].selectedIndex; var d=$("#days2")[0].selectedIndex+1; if( y=="" ) y=1990; $("#dp2").datepicker("setDate", new Date(y,m,d)); $("#dp2").show(); } else $("#dp2").hide(); }); $("#picker3").click(function() { if( $("#dp3").is(":hidden") ) { var y=$("#year3").val(); var m=$("#month3")[0].selectedIndex; var d=$("#days3")[0].selectedIndex+1; if( y=="" ) y=1990; $("#dp3").datepicker("setDate", new Date(y,m,d)); $("#dp3").show(); } else $("#dp3").hide(); }); $("#dp1").change(function() { var date=$("#dp1").val(); $("#month1")[0].selectedIndex=parseInt(date.substring(0,2))-1; $("#days1")[0].selectedIndex=parseInt(date.substring(3,5))-1; $("#year1").val(date.substring(6,10)); }); $("#dp2").change(function() { var date=$("#dp2").val(); $("#month2")[0].selectedIndex=parseInt(date.substring(0,2))-1; $("#days2")[0].selectedIndex=parseInt(date.substring(3,5))-1; $("#year2").val(date.substring(6,10)); }); $("#dp3").change(function() { var date=$("#dp3").val(); $("#month3")[0].selectedIndex=parseInt(date.substring(0,2))-1; $("#days3")[0].selectedIndex=parseInt(date.substring(3,5))-1; $("#year3").val(date.substring(6,10)); }); }); function setDays(obj, n) { $(obj).find('option') .remove() .end() for( var i=1; i<=n; i++) $(obj).append('<option>'+i+'</option>'); } function initDate() { var d = new Date(); var obj=$("#days1"); setDays(obj, 31); obj=$("#days2"); setDays(obj, 31); $("#days2").prop("selectedIndex", d.getDate()-1 ); $("#month2").prop("selectedIndex", d.getMonth() ); $("#year2").val( d.getFullYear() ); $("#age").val(""); } function calc() { var txt; var day1=$("#days1").prop("selectedIndex")+1; var month1=$("#month1").prop("selectedIndex")+1; var year1=$("#year1").val(); if( year1=='' ) year1="1990"; var day2=$("#days2").prop("selectedIndex")+1; var month2=$("#month2").prop("selectedIndex")+1; var year2=$("#year2").val(); var d1 = moment([year1, month1-1, day1]); var d2 = moment([year2, month2-1, day2]); var years = d2.diff(d1, 'years'); var months = d2.diff(d1, 'months')-years*12; var d3 = d1.add(years,'years').add(months,'months'); var days = d2.diff(d3, 'days'); txt = years+(years==1?" year, ":" anos, ")+months+(months==1?" month, ":" meses, ")+days+(days==1?" day":" dias"); d1 = moment([year1, month1-1, day1]); d2 = moment([year2, month2-1, day2]); txt+= "<br>= "+(d2.diff(d1, 'years', true)).toFixed(2)+" anos"; d1 = moment([year1, month1-1, day1]); d2 = moment([year2, month2-1, day2]); txt+= "<br>= "+(d2.diff(d1, 'months', true)).toFixed(2)+" meses"; d1 = moment([year1, month1-1, day1]); d2 = moment([year2, month2-1, day2]); txt+= "<br>= "+(d2.diff(d1, 'weeks', true)).toFixed(2)+" semanas"; d1 = moment([year1, month1-1, day1]); d2 = moment([year2, month2-1, day2]); txt+= "<br>= "+(d2.diff(d1, 'days', true)).toFixed(0)+" dias"; d1 = moment([year1, month1-1, day1]); d2 = moment([year2, month2-1, day2]); txt+= "<br>= "+(d2.diff(d1, 'hours', true)).toFixed(0)+" horas"; d1 = moment([year1, month1-1, day1]); d2 = moment([year2, month2-1, day2]); txt+= "<br>= "+(d2.diff(d1, 'minutes', true)).toFixed(0)+" minutos"; d1 = moment([year1, month1-1, day1]); d2 = moment([year2, month2-1, day2]); txt+= "<br>= "+(d2.diff(d1, 'seconds', true)).toFixed(0)+" segundos"; $("#age").html(txt); } function calc2() { var txt; var day3=$("#days3").prop("selectedIndex")+1; var month3=$("#month3").prop("selectedIndex")+1; var year3=$("#year3").val(); if( year3=='' ) year3="1990"; var age2=$("#age2").val(); var d3 = moment([year3, month3-1, day3]); d3.add(age2, 'years'); txt=d3.format("MMMM D YYYY")+"\n"; txt+=d3.fromNow(); $("#age").html(txt); } </script>

Salve esse arquivo como: CalculaIdade.html.
Execute no navegador clicando no botão abaixo e veja se está igual ao da imagem acima:

Tutoriais

Programas

Projetos

Cursos

Android
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
SQL

P&R

Android
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Simulados

Android
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python
SQL

Tutoriais

Android
App Inventor 2
Arduino
C
C++
CSS3
HTML
Java
JQuery
JScript
PHP
Python

Programas

Android
App Inventor 2
C
Java
JQuery
JScript
PHP
Python

Projetos

Android
App Inventor 2
Arduino