<!DOCTYPE html>
<html>
<head>
<title>Calculadora basica</title>
<style>
form{ background-color:white;
}
input[type="text"]{ background-color:black;
border:0px;
width:250px;
height: 40px;
font-size: 20px;
color: white;
text-align: right;
pointer-events: none;
}
input[name="txtcaja1"]{ height: 20px;
}
input[name="txtcaja2"]{ margin-bottom: 5px;
}
input[type="button"]{ width:60px;border:0px;
height: 60px;
color: white;
background-color:cornflowerblue;
font-size: 18px;
font-weight: bold;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
margin-bottom: 5px;
}
body{ background-color:#f1f1f1;
}
</style>
</head>
<body>
<center>
<h1>Calculadora Basica</h1>
<form name="f1"><br>
<input type="text" name="txtcaja1"><br>
<input type="text" name="txtcaja2"><br>
<input type="button" onClick="document.f1.txtcaja2.value=''" value="CE">
<input type="button" onClick="document.f1.reset();" value="C">
<input type="button" onClick="masmenos()" value="±"> <input type="button" onClick="arit('%')" value="%"><br><input type="button" onClick="escribir('7')" value="7"><input type="button" onClick="escribir('8')" value="8"><input type="button" onClick="escribir('9')" value="9"> <input type="button" onclick="arit('/')" value="÷"><br><input type="button" onclick="escribir('4')" value="4"><input type="button" onclick="escribir('5')" value="5"><input type="button" onclick="escribir('6')" value="6"> <input type="button" onclick="arit('*')" value="×"><br><input type="button" onClick="escribir('1')" value="1"><input type="button" onClick="escribir('2')" value="2"><input type="button" onClick="escribir('3')" value="3"> <input type="button" onclick="arit('-')" value="-"><br><input type="button" onClick="escribir('0')" value="0"><input type="button" onClick="escribir('.')" value="."><input type="button" onclick="calcular()" value="="> <input type="button" onclick="arit('+')" value="+"><br></form>
</center>
<script>
function escribir(n){ var caja2 = document.f1.txtcaja2.value;
document.f1.txtcaja2.value = caja2 + n;
}
function arit(o){ var caja1 = document.f1.txtcaja1.value;
var caja2 = document.f1.txtcaja2.value;
if (caja1==""){ document.f1.txtcaja1.value = caja2 + o;
document.f1.txtcaja2.value="";
}
else{ document.f1.txtcaja1.value = caja1 + caja2 + o;
document.f1.txtcaja2.value="";
}
}
function calcular(){ var caja1 = document.f1.txtcaja1.value;
var caja2 = document.f1.txtcaja2.value;
document.f1.txtcaja2.value = eval(caja1 + caja2);
document.f1.txtcaja1.value="";
}
function masmenos(){ var caja2 = document.f1.txtcaja2.value;
if (caja2 > 0){ document.f1.txtcaja2.value= "( -" + caja2 + ")";
}
else{ cajaplus = caja2.replace(/[-|(|)]/g, "");
document.f1.txtcaja2.value = cajaplus;
}
}
</script>
</body>
</html>
se añaden algunas funciones de la calculadora estandar