Ejemplo Javascript: calculadora básica

 

Logotipo-JS-150x150

Ejemplo de código fuente en JavaScript de una calculadora básica y sencilla para realizar operaciones matemáticas estándar de sumar, restar, multiplicar y dividir.

 

 

Descripción del ejemplo

El ejemplo está basado en el ejemplo-javascript-operaciones-de-sumar-restar-multiplicar-y-dividir/pero mejorándolo un poco más para que pueda funcionar como una calculadora sencilla y estándar.

 

Código

Éste sería el método de JavaScript con el que se harían las diferentes operaciones:


function operaciones(op)
{

    var ops = {
        sumar: function sumarNumeros(n1, n2) {
            return (parseInt(n1) + parseInt(n2));
        },

        restar: function restarNumeros(n1, n2) {
            return (parseInt(n1) - parseInt(n2));
        },
        
        multiplicar: function multiplicarNumeros(n1, n2) {
            return (parseInt(n1) * parseInt(n2));
        },

        dividir: function dividirNumeros(n1, n2) {
            return (parseInt(n1) / parseInt(n2));
        }


    };

	var operacion;

	switch(op) {
		case 'sumar':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "+";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "suma";
			break;
		case 'restar':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "-";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "resta";
			break;
		case 'multiplicar':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "*";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "multiplicacion";
			break;
		case 'dividir':
			var operando1 = document.getElementById("resultado").value;
			document.getElementById("resultado").value = operando1 + "/";
			operacion = document.getElementById("resultado").value;
			document.getElementById("memoria").value = "division";
			break;
			
		case 'igual':	
			
			operacion = document.getElementById("resultado").value;
			
			var memoriaop = document.getElementById("memoria").value;
			
			switch(memoriaop) {
				case 'suma':
					var operandos = operacion.split("+");
					var resultado = ops.sumar(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;
				case 'resta':
					var operandos = operacion.split("-");
					var resultado = ops.restar(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;
				case 'multiplicacion':
					var operandos = operacion.split("*");
					var resultado = ops.multiplicar(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;
				case 'division':
					var operandos = operacion.split("/");
					var resultado = ops.dividir(operandos[0], operandos[1]);
					document.getElementById("resultado").value = resultado;
					break;					
			
			}	
			

			break;
			

	}


}

 

Y éste sería el código HTML del formulario donde realizaremos las operaciones:



<form>

<table style="border: 3px solid #000; text-align:center;">
 <tr style="text-align:center;">
 <td colspan = "4">
 <input id="resultado" type="text" value="0" size="20" style="border: 3px solid blue; padding: 10px;" /><input id="memoria" type="hidden" value="0" />
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="7"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=7}else{ var str2='7'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="8"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=8}else{ var str2='8'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="9"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=9}else{ var str2='9'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="/"
 onClick="operaciones('dividir'); return false;"
 style="width:55px">
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="4"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=4}else{ var str2='4'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="5"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=5}else{ var str2='5'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="6"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=6}else{ var str2='6'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="*"
 onClick="operaciones('multiplicar'); return false;"
 style="width:55px">
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="1"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=1}else{ var str2='1'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="2"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=2}else{ var str2='2'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="3"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=3}else{ var str2='3'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px">
 </td>
 <td>
 <input type="button" value="-" 
 onClick="operaciones('restar'); return false;"
 style="width:55px">
 </td>
 </tr>

 <tr style="text-align:center;">
 <td>
 <input type="button" value="0"
 onClick="var str1=document.getElementById('resultado').value; if(str1 == '0'){document.getElementById('resultado').value=0}else{ var str2='0'; var res = str1.concat(str2);document.getElementById('resultado').value=res;}"
 style="width:55px"> 
 </td>
 <td colspan="2">
 <input type="button" value="="
 onClick="operaciones('igual'); return false;"
 style="width:110px">
 </td>
 <td>
 <input type="button" value="+"
 onClick="operaciones('sumar'); return false;"
 style="width:55px">
 </td>
 </tr>


</table>

</form>

 

 

Demo del ejemplo

 

 

Descargar


 

Valoración General

[Valoraciones:  3    Promedio:  4.7 de 5]