Calcolatore di interessi con jQuery

Pubblicato da Artigiani Del Web in data

 

Vediamo come scrivere un calcolatore di interessi con jQuery





FACCIAMO LA PARTE HTML 





<!DOCTYPE html>
<html>
<head>
	<title>Calcolatore</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="Language" content="it-it" />
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

</head>

<body >



					<h3>INSERISCI IMPORTO QUI</h3>
	            <input  id="valore" name="valore" type="text" />
	            			
            		
            		
					<h3>24 MESI</h3>
            		<div class="wrapper">
            					<div>Interessi Netti</div>
            					<div  id="interessi2">0,00 €</div>
            				</div>
            				<div>
            					<div>Montante Netto</div>
            					<div id="montante2">0,00 €</div>
            				</div>
            		</div>
            		

					<h3>36 MESI</h3>
            		<div class="wrapper">
            					<div>Interessi Netti</div>
            					<div  id="interessi2">0,00 €</div>
            				</div>
            				<div>
            					<div>Montante Netto</div>
            					<div id="montante2">0,00 €</div>
            				</div>
            		</div>
            		

					<h3>48MESI</h3>
            		<div class="wrapper">
            					<div>Interessi Netti</div>
            					<div  id="interessi3">0,00 €</div>
            				</div>
            				<div>
            					<div>Montante Netto</div>
            					<div id="montante3">0,00 €</div>
            				</div>
            		</div>
           

ADESSO LO SCRIPT

			
<script>
 jQuery(function () {
	 
	 // FUNZIONE DI CALCOLO 
	function calcolaTasso(valore, percentuale) {
			
			var interesse = (valore / 100) * percentuale;
			var montante = valore + interesse;

				// CONTROLLO NUMER0
				if (isNaN(valore)){
					//alert("Inserire un numero");
					 jQuery('#errore').html(' Inseire un numero');
				} else {
					jQuery('#errore').html('');
				}
				
			return [interesse.toFixed(2), montante.toFixed(2)];
	}
	 

	 
		//CAMBIA I VALORI NELLA PAGINA
		jQuery("#valore").on('keyup keypress blur change', function() { 
		
		//  VALORE INSERITO 
		var valore =  parseFloat(parseInt(jQuery("#valore").val(), 10) );

		//  CALCOLI
		var calcolo1 = calcolaTasso(valore, 1.60);
		var interesse1 = calcolo1[0];
		var montante1 = calcolo1[1];
		
		var calcolo2= calcolaTasso(valore, 2.10);
		var interesse2 = calcolo2[0];
		var montante2 = calcolo2[1];
		
		var calcolo3= calcolaTasso(valore, 2.60);
		var interesse3 = calcolo3[0];
		var montante3 = calcolo3[1];
		
		
		//  STAMPA
		jQuery('#interessi1').html(' ' + interesse1+ ' &euro;');
		jQuery('#montante1').html(' ' + montante1+ ' &euro;');
		
		jQuery('#interessi2').html(' ' + interesse2+ ' &euro;');
		jQuery('#montante2').html(' ' + montante2+ ' &euro;');
		
		jQuery('#interessi3').html(' ' + interesse3+ ' &euro;');
		jQuery('#montante3').html(' ' + montante3+ ' &euro;');
	   
	})
});

</script>

Fatto! :) 

Commenti

Posta un commento