Informática, Snippets

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>&nbsp;</td>
                <td>&nbsp;</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>
Back to list

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *