CALCULADORA en HTML + CSS + JAVASCRIPT


Proyecto para crear una calculadora básica en HTML

Calculadora.html

Creamos el diseño.

<html>
<head>
<style>
</style>

<script type="text/javascript">
</script>
</head>
<body>
<center>

<form name="Calculadora">

<table border="3">

<tr>
<td colspan="5">
<input type="text" name="txtboxnros" value="0" disabled>
</td></tr>

<tr>
<td><input type="button" value="1" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="2" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="3" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="+" onclick="ingresaoperacion(this.value)"></td>
<td><input type="button" value="-" onclick="ingresaoperacion(this.value)"></td>
</tr>

<tr>
<td><input type="button" value="4" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="5" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="6" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="*" onclick="ingresaoperacion(this.value)"></td>
<td><input type="button" value="/" onclick="ingresaoperacion(this.value)"></td>
</tr>

<tr>
<td><input type="button" value="7" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="8" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="9" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="^" onclick="ingresaoperacion('**')"></td>
<td><input type="button" value="√" onclick="raiz()"></td>
</tr>

<tr>
<td><input type="button" value="0" onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="." onclick="ingresarnumero(this.value)"></td>
<td><input type="button" value="C" onclick="limpiar()"></td>
<td colspan="2"><input type="button" value="      =      " onclick="resultado()"></td>
</tr>

</table>
</form>
</center>
</body>
</html>

Le damos un poco de estilo.

<style>

input[type=button] 
{
background-color: white;
border: none;
color: black;
font-weight: bold;
padding: 6px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 20px;
margin: 4px; 4px;
cursor: pointer;
box-shadow: 3px 3px 3px black;
}

input[type="text"]
{
border: solid;
color: black;
padding: 15px 32;
text-align: right;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
width: 98%;
box-shadow: 3px 3px 3px black;
}

body
{
background-color: #D4D7DB;
}

table 
{
background-color: #E4E7EA;
padding: 5px 5px;
}

</style>

Le damos vida a nuestra calculadora, realizamos el script para que funcione nuestra calculadora.

<script type="text/javascript">

var numpantalla="0";
var pantallaconnumero="si"; //Si o No
var usarpunto="no"; //Si o No
var numespera=0;
var operapendiente="";
var solucion="";

function ingresarnumero(x)
{
if(x!=".")
{

	if(numpantalla=="0" || pantallaconnumero=="si")
		{
			document.Calculadora.txtboxnros.value=x;
			numpantalla=x;
		}
	else if(x!=".")
		{
			document.Calculadora.txtboxnros.value+=x;
			numpantalla+=x;
		}
}

if(x=="." && usarpunto=="no" && numpantalla=="0")
	{
		document.Calculadora.txtboxnros.value="0.";
		numpantalla=x;
		usarpunto="si";
	}	
else if(x=="." && usarpunto=="no")
	{

		document.Calculadora.txtboxnros.value +=x;
		numpantalla +=x;
		usarpunto="si";
	}
else if(x=="." && usarpunto=="si")
{

}
	pantallaconnumero="no";
}

function ingresaoperacion(y)
{
if(operapendiente =="")
{

numespera=document.Calculadora.txtboxnros.value;
document.Calculadora.txtboxnros.value +=y;
operapendiente = y;
pantallaconnumero = "no";
numpantalla = "";
usarpunto = "no";
_
}

}

function resultado()
{

if(operapendiente != "") 
{
solucion=numespera+operapendiente+numpantalla;
document.Calculadora.txtboxnros.value=eval(solucion);
numpantalla=eval(solucion);
pantallaconnumero="si";
operapendiente = "";
usarpunto = "no";

}

}

function raiz()
{

if(operapendiente == "")
{
document.Calculadora.txtboxnros.value=Math.sqrt(numpantalla);
pantallaconnumero = "no";
operapendiente = "";
usarpunto = "no";
}
}

function limpiar()
{

 numpantalla="0";
 pantallaconnumero="si";
 usarpunto="no"; 
 numespera=0;
 operapendiente="";
 solucion="";
document.Calculadora.txtboxnros.value="0";
}

</script>






  • Notepad++



  • Nombre          : CalculadoraHTML.rar
  • Tamaño          : 1 KB


Fecha:
Etiquetas: , ,