Blog
Calculador Hipotecario en HTML y JS
Esta calculadora hipotecaria está creada en html, js y tiene clases de bootstrap 4.6.0
Puedes usar esta calculadora en tu web, siguiendo estas sencillas instrucciones:
Añade esto dentro del <head> de la página:
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/fontawesome.min.css">
Luego este en el <body> de la página:
<script type="text/javascript">
function verificar_numero(numero,formulario) {
if (numero.value=='')
{
}
var noes=0;
var str = numero.value;
for (var i = 0; i < str.length; i++)
{ var ch = str.substring(i, i + 1)
if ((ch < "0" || "9" < ch) && ch != '.')
{ numero.value=''
numero.focus()
numero.select()
noes=1
}
}
if (noes==1)
{ alert('El valor introducido "' + str + '" no es un número.')
return 1
}
return 0;
}
function hay_cambio() {
if (document.forms[0].medida.options[0].selected)
{ if ( document.forms[0].medida_anterior.value != 12.0)
{ return 1 }
}
else
{ if ( document.forms[0].medida_anterior.value == 1.0)
{ return 1 }
}
if ( document.forms[0].importe.value != document.forms[0].importe_anterior.value)
{ return 1 }
if ( document.forms[0].plazo.value != document.forms[0].plazo_anterior.value)
{ return 1 }
if ( document.forms[0].tipo.value != document.forms[0].tipo_anterior.value)
{ return 1 }
if ( document.forms[0].cuota.value != document.forms[0].cuota_anterior.value)
{ return 1 }
return 0
}
function almacena() {
document.forms[0].importe_anterior.value = document.forms[0].importe.value
document.forms[0].plazo_anterior.value = document.forms[0].plazo.value
document.forms[0].tipo_anterior.value = document.forms[0].tipo.value
document.forms[0].cuota_anterior.value = document.forms[0].cuota.value
if (document.forms[0].medida.options[0].selected)
{ document.forms[0].medida_anterior.value = 12.0 }
else
{ document.forms[0].medida_anterior.value = 1.0 }
}
//Calcula la cuota con importe, plazos e interés
function calculacuota() {
if ( hay_cambio() == 0 ) { return }
imp = parseInt(document.forms[0].importe.value)
plazo_meses = parseInt(document.forms[0].plazo.value)
tipo_mensual = parseFloat(document.forms[0].tipo.value)
if (document.forms[0].medida.options[0].selected)
{ medida = 12.0
}
else
{ medida = 1.0
}
if ( isNaN(imp) || imp == 0 )
{ alert("Debe rellenar el campo 'Importe préstamo'")
return }
if ( isNaN(plazo_meses) || plazo_meses == 0 )
{ alert("Debe rellenar el campo 'Plazo'")
return }
if ( isNaN(tipo_mensual) || tipo_mensual == 0.0 )
{ alert("Debe rellenar el campo 'Tipo Nominal'")
return }
plazo_meses = plazo_meses * medida
// EL TIPO DE INTERES VIENE EN AÑOS Y LOS PASAMOS A TIPO INTERES MENSUAL
tipo_mensual = tipo_mensual / 1200.0
y = 1.0 + tipo_mensual
cuota = imp * tipo_mensual * Math.pow(y,plazo_meses) / ( Math.pow(y,plazo_meses) - 1.0 )
document.forms[0].cuota.value = Math.round(cuota *100.00) / 100.00
almacena()
}
//Calcula el importe con plazos, interés y cuota
function calculaimporte() {
if ( hay_cambio() == 0 ) { return }
plazo_meses = parseInt(document.forms[0].plazo.value)
tipo_mensual = parseFloat(document.forms[0].tipo.value)
cuota = parseInt(document.forms[0].cuota.value)
if (document.forms[0].medida.options[0].selected)
{ medida = 12.0
}
else
{ medida = 1.0
}
if ( isNaN(cuota) || cuota == 0 )
{ alert("Debe rellenar el campo 'Importe cuota'")
return }
if ( isNaN(plazo_meses) || plazo_meses == 0 )
{ alert("Debe rellenar el campo 'Plazo'")
return }
if ( isNaN(tipo_mensual) || tipo_mensual == 0.0 )
{ alert("Debe rellenar el campo 'Tipo Nominal'")
return }
if ( tipo_mensual > 20.0 )
{ alert("El Tipo Nominal es superior al 20% y no es aceptable para un préstamo hipotecario.")
return }
plazo_meses = plazo_meses * medida
//Tipo de interés en años, se pasa a mensual
tipo_mensual = tipo_mensual / 1200.0
y = 1.0 + tipo_mensual
imp = cuota / ( tipo_mensual * Math.pow(y,plazo_meses) / ( Math.pow(y,plazo_meses) - 1.0 ) )
document.forms[0].importe.value = Math.round(imp *100.00) / 100.00
almacena()
}
//Calcula los plazos con importe, interés y cuota
function calculaplazo() {
if ( hay_cambio() == 0 ) { return }
imp = parseInt(document.forms[0].importe.value)
cuota = parseInt(document.forms[0].cuota.value)
tipo_mensual = parseFloat(document.forms[0].tipo.value)
if ( isNaN(imp) || imp == 0 )
{ alert("Debe rellenar el campo 'Importe préstamo'")
return }
if ( isNaN(tipo_mensual) || tipo_mensual == 0.0 )
{ alert("Debe rellenar el campo 'Tipo Nominal'")
return }
if ( isNaN(cuota) || cuota == 0 )
{ alert("Debe rellenar el campo 'Importe cuota'")
return }
if ( tipo_mensual > 20.0 )
{ alert("El Tipo Nominal es superior al 20% y no es aceptable para un préstamo hipotecario.")
return }
tipo_mensual = tipo_mensual / 1200.0
y = 1.0 + tipo_mensual
plazo_meses = 1;
cuota_actual = Math.round(imp * tipo_mensual * Math.pow(y,plazo_meses) / ( Math.pow(y,plazo_meses) - 1.0 ))
while (cuota_actual > cuota)
{ ultima_cuota = cuota_actual;
cuota_actual = Math.round(imp * tipo_mensual * Math.pow(y,plazo_meses) / ( Math.pow(y,plazo_meses) - 1.0 ))
plazo_meses++
if (plazo_meses > 360)
{ alert("El número de plazos necesarios excede el limite admitido por un banco (30 años)")
almacena()
return;
}
}
document.forms[0].plazo.value = Math.round(plazo_meses - 1)
document.forms[0].medida.options[1].selected = true
almacena()
}
//Calcula el tipo de interés con importe, plazos y cuota
function calculatipo() {
if ( hay_cambio() == 0 ) { return }
imp = parseInt(document.forms[0].importe.value)
cuota = parseInt(document.forms[0].cuota.value)
plazo_meses = parseInt(document.forms[0].plazo.value)
if (document.forms[0].medida.options[0].selected)
{ medida = 12.0
}
else
{ medida = 1.0
}
if ( isNaN(imp) || imp == 0 )
{ alert("Debe rellenar el campo 'Importe préstamo'")
return }
if ( isNaN(cuota) || cuota == 0 )
{ alert("Debe rellenar el campo 'Importe cuota'")
return }
if ( isNaN(plazo_meses) || plazo_meses == 0 )
{ alert("Debe rellenar el campo 'Plazo'")
return }
plazo_meses = plazo_meses * medida
tipo_mensual = 20.0 / 1200.0
inc_tipo_mensual = 10.0 / 1200.0
y = 1.0 + tipo_mensual
cuota_actual = Math.round(imp * tipo_mensual * Math.pow(y,plazo_meses) / ( Math.pow(y,plazo_meses) - 1.0 ))
while ( cuota_actual != cuota)
{ y = 1.0 + tipo_mensual
cuota_actual = Math.round(imp * tipo_mensual * Math.pow(y,plazo_meses) / ( Math.pow(y,plazo_meses) - 1.0 ))
if (cuota_actual > cuota)
{ // se aplica un interes muy alto, hay que bajarlo
tipo_mensual= tipo_mensual - inc_tipo_mensual
}
else
{// se aplica un interes muy bajo, hay que subirlo
tipo_mensual= tipo_mensual + inc_tipo_mensual
}
if ((tipo_mensual * 1200.0) > 20.0)
{ alert("El tipo de interes a aplicar es superior al interes permitido por un banco (20%)")
almacena()
return
}
inc_tipo_mensual = inc_tipo_mensual / 2.0
}
tipo_mensual = tipo_mensual * 1200.0
document.forms[0].tipo.value = Math.round(tipo_mensual * 100.00) / 100.00
almacena()
}
function nada ()
{
return
}
</script>
<div class="container" style="max-width:600px;">
<div class="row">
<h2 class="text-center"><i class="fas fa-city"></i><i class="fas fa-calculator"></i> <br /> Calculadora Hipotecaria con interés TAE</h2>
<br>
<form name="Calculadora">
<input type="hidden" name="importe_anterior" value>
<input type="hidden" name="plazo_anterior" value>
<input type="hidden" name="tipo_anterior" value>
<input type="hidden" name="cuota_anterior" value>
<input type="hidden" name="medida_anterior" value>
<table class="table table-condensed table-responsive" style="max-width:600px;">
<tr>
<td style="text-align: right;">
<b>Importe a financiar:</b>
</td>
<td>
<input type="number" pattern="[0-9]" class="form-control input-sm" name="importe" onBlur="verificar_numero(this,Calculadora)">
</td>
<td>
<button type="button" style="width:100px;text-align:left;" class="btn btn-sm btn-primary" name="cimporte" onClick="calculaimporte( )"><i class="fas fa-euro-sign"></i> Importe</button>
</td>
</tr>
<tr>
<td style="text-align: right;">
<b>Amortización en</b>
<select name="medida">
<option selected value="1">años</option>
<option value="12">meses</option>
</select>:
</td>
<td>
<input type="number" class="form-control input-sm" name="plazo" onBlur="verificar_numero(this,Calculadora)">
</td>
<td>
<button type="button" style="width:100px;text-align:left;" class="btn btn-sm btn-primary" name="cplazo" onClick="calculaplazo( )"><i class="fas fa-calendar-days"></i> Plazo</button>
</td>
</tr>
<tr>
<td style="text-align: right;">
<b>Interés TAE:</b></td>
<td>
<input type="number" step="0.01" class="form-control input-sm" name="tipo" onBlur="verificar_numero(this,Calculadora)" style="font-family: Verdana">
</td>
<td>
<button type="button" style="width:100px;text-align:left;" class="btn btn-sm btn-primary" name="ctipo" onClick="calculatipo( )"><i class="fas fa-percent"></i> Tipo</button>
</td>
</tr>
<tr>
<td style="text-align: right;">
<b>Cuota mensual:</b>
</td>
<td>
<input type="number" class="form-control input-sm" name="cuota" onBlur="verificar_numero(this,Calculadora)" style="font-family: Verdana"></td>
<td>
<button type="button" style="width:100px;text-align:left;" class="btn btn-sm btn-primary" name="ccuota" onClick="calculacuota()"><i class="fas fa-money-bills"></i> Cuota</button>
</td>
</tr>
<tr>
<td> </td>
<td> </td>
<td>
<button style="width:100px;text-align:left;" type="reset" class="btn btn-sm btn-danger"><i class="fas fa-trash-can"></i> Borrar</button>
</td>
</tr>
</table>
</form>
</div>
<div class="row">
<div class="col-12 text-left">
<ul>
<li>Indica tres variables y pulsa el botón de la cuarta para calcular su valor.</li>
<li>El separador decimal puede ser punto o coma.</li>
<li>No uses separador de miles en el importe o lo tomará como decimal</li>
</ul>
</div>
</div>
</div>
