Calculadora (Modelo C)
Este modelo se ha creado dentro de una tabla para controlar mejor el espacio
de las teclas y tener un mejor orden, el Elemento <table>
principal se le han incluido tres <tr> filas, en la primera y la
última hemos utilizado el atributo colspan=2 para que ocupen la pantalla
principal y la tecla de enter, para que arroje el resultado. para evitar la
apariencia desordenada de las teclas de suma, resta, multiplicación y división
se han colocado en una sola columna
0 | |||
El Código
------------------------------------
<table border="1" cellpadding="10" cellspacing="10" style="margin: 0px auto;">
<tbody>
<tr>
<td colspan="4" id="pantalla" style="background-color: navy; color: white; font-size: 20px; height: 40px; width: 100%;">0</td>
</tr>
<tr>
<td colspan="2"><button onclick="document.getElementById('pantalla').innerHTML = '';" style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">C</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '7'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">7</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '8'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">8</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '9'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">9</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '+'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">+</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '4'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">4</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '5'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">5</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '6'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">6</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '-'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">-</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '1'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">1</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '2'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">2</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '3'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">3</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '*'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">*</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '0'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">0</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '.'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">.</button></td>
<td><button onclick="Alfonso()" style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">=</button></td>
<td><button style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">/</button></td>
</tr>
</tbody>
</table><br />
<script>
function Alfonso() {
var resultado = pantalla.textContent;
var revision= resultado;
if (revision === "") { document.getElementById('pantalla').innerHTML = "0";
} else {document.getElementById("pantalla").innerHTML = eval(resultado);}
<table border="1" cellpadding="10" cellspacing="10" style="margin: 0px auto;">
<tbody>
<tr>
<td colspan="4" id="pantalla" style="background-color: navy; color: white; font-size: 20px; height: 40px; width: 100%;">0</td>
</tr>
<tr>
<td colspan="2"><button onclick="document.getElementById('pantalla').innerHTML = '';" style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">C</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '7'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">7</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '8'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">8</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '9'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">9</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '+'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">+</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '4'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">4</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '5'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">5</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '6'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">6</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '-'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">-</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '1'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">1</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '2'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">2</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '3'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">3</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '*'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">*</button></td>
</tr>
<tr>
<td><button onclick="document.getElementById('pantalla').innerHTML += '0'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">0</button></td>
<td><button onclick="document.getElementById('pantalla').innerHTML += '.'; " style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">.</button></td>
<td><button onclick="Alfonso()" style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">=</button></td>
<td><button style="background-color: #4caf50; color: white; font-size: 20px; height: 40px; width: 100%;">/</button></td>
</tr>
</tbody>
</table><br />
<script>
function Alfonso() {
var resultado = pantalla.textContent;
var revision= resultado;
if (revision === "") { document.getElementById('pantalla').innerHTML = "0";
} else {document.getElementById("pantalla").innerHTML = eval(resultado);}
}
</script>
<div><br /></div>
hasta aquí el código
-----------------------------------
Estilo de Presentación de la calculadora en la tabla
Los estilos son una parte muy importante del código:
<table border="1" cellpadding="10" cellspacing="10" style="margin: 0
auto;">
en este caso mostramos los bordes de las celdas, luego un espacio
alrededor de la celda y el texto de 10 unidades, y centramos toda la
tabla con respecto a la página web
<td colspan="2">
en este caso estamos extendiendo las columnas en dos unidades,
fusionamos la col-1 mas col-2
<td width: 100%; height: 100%; text-align: center; font-size:
2px;>
Aquí el caso la altura de las letras es al 100% según la página, y la
alineación del texto central .
Este es el estilo de la celda:
style="background-color: #4caf50; color: white; font-size: 20px;
height: 40px; width: 100%;"
Este estilo se define asi: style=" ... atributos
... "
Tiene los siguientes atributos:
Color de fondo: background-color:
#4caf50;
Color de letra: color:
white;
Tamaño de letra: font-size: 20px;
Altura de 40 píxeles: height: 40px;
Con 100% extendido en la pantalla: width: 100%;
observar que cada atributo debe llevar punto y coma al final ( ;
)
Como Funciona la calculadora
En este modelo utilizamos un Script con una función llamada:
Alfonso()
que evalúa: eval(resultado)
la expresión matemática contenida en: var resultado =
pantalla.textContent;
que fue extraída de la celda: <td
id="pantalla">
la expresión matemática fue insertada en "pantalla" mediante
el mecanismo:
onclick="document.getElementById('pantalla').innerHTML += ' ... Digito ...
';
Donde cada uno de los botones que se encuentra en cada celda está
encargado de adicionar un "Digito"
<button ... procedimiento ...
>1</button>
el procedimiento ocurre cuando hacemos click:
onclick=" ... proceso ... "
activando el proceso :
document.getElementById('pantalla').innerHTML += '1';
adicionando al contenido de la celda llamada:
"pantalla"
document.getElementById('pantalla').innerHTML
lo que se encuentre entre comillas después del signo:
+
+= '1' en este caso el digito:
'1'
Comentarios
Publicar un comentario