<!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