<!DOCTYPE html>
<html>
<header>
<title>calculadora Simples</title>
<h2>Calculadora</h2>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<LINK REL="SHORTCUT ICON" HREF="a.png">
</header>
<body>
<br>
<div id="encaixa">
<p id="caixa"></p>
</div>
<br>
<button id="numero2" class="botao" onclick="numero7()">7</button>
<button id="numero2"class="botao" onclick="numero8()">8</button>
<button id="numero2" class="botao" onclick="numero9()">9</button>
<button id="dividir" class="botao" onclick="divisao()">÷</button>
<br>
<button id="numero2" class="botao" onclick="numero4()">4</button>
<button id="numero2" class="botao" onclick="numero5()">5</button>
<button id="numero2" class="botao" onclick="numero6()">6</button>
<button id="multiplicar" class="botao" onclick="multiplicacao()">×</button>
<br>
<button id="numero1" class="botao" onclick="numero1()">1</button>
<button id="numero2" class="botao" onclick="numero2()">2</button>
<button id="numero2" class="botao" onclick="numero3()">3</button>
<button id="subtrair" class="botao" onclick="subtracao()">-</button>
<br>
<button id="numero0" class="botao" onclick="numero0()">0</button>
<button id="limpar" class="botao" onclick="limpe()">C</button>
<button id="ponto" class="botao" onclick="virgula()"> , </button>
<button id="somar" class="botao" onclick="adicao()"> +</button>
<button id="igual" onclick="calcular()">=</button>
</body>
</html>
<style>
h2{
background-color: turquoise;
width: initial;
}
body{
background-color: skyblue;
}
#caixa{
margin-left: 5px;
}
#encaixa{
height: 40px;
border: solid black 2px;
width: 177px;
}
#igual{
position: absolute;
top: 156px;
width: 40px;
left: 145px;
height: 121px;
}
.botao{
width: 30px;
height: 30px;
}
</style>
<script>
var conteudo_caixa='';
var operacao=0.0;
function checar(){
var som=conteudo_caixa.indexOf('+');
var sub=conteudo_caixa.indexOf('-');
var div=conteudo_caixa.indexOf('÷');
var mult=conteudo_caixa.indexOf('×');
if((som!=(-1))||(sub!=(-1))||(div!=(-1))||(mult!=(-1)))
{
alert('Uma operação por vez');
}
}
function limpe(){
conteudo_caixa='';
document.getElementById("caixa").innerHTML='';
}
function numero0(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'0';
conteudo_caixa=conteudo_caixa+'0';
}
function numero1(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'1';
conteudo_caixa=conteudo_caixa+'1';
}
function numero2(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'2';
conteudo_caixa=conteudo_caixa+'2';
}
function numero3(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'3';
conteudo_caixa=conteudo_caixa+'3';
}
function numero4(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'4';
conteudo_caixa=conteudo_caixa+'4';
}
function numero5(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'5';
conteudo_caixa=conteudo_caixa+'5';
}
function numero6(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'6';
conteudo_caixa=conteudo_caixa+'6';
}
function numero7(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'7';
conteudo_caixa=conteudo_caixa+'7';
}
function numero8(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'8';
conteudo_caixa=conteudo_caixa+'8';
}
function numero9(){
document.getElementById("caixa").innerHTML=conteudo_caixa+'9';
conteudo_caixa=conteudo_caixa+'9';
}
function adicao(){
checar();
operacao=parseFloat(conteudo_caixa,10);
document.getElementById("caixa").innerHTML=conteudo_caixa+'+';
conteudo_caixa=conteudo_caixa+'+';
}
function multiplicacao(){
operacao=parseFloat(conteudo_caixa,10);
document.getElementById("caixa").innerHTML=conteudo_caixa+'×';
conteudo_caixa=conteudo_caixa+'×';
}
function subtracao(){
operacao=parseFloat(conteudo_caixa,10);
document.getElementById("caixa").innerHTML=conteudo_caixa+'-';
conteudo_caixa=conteudo_caixa+'-';
}
function divisao(){
operacao=parseFloat(conteudo_caixa,10);
document.getElementById("caixa").innerHTML=conteudo_caixa+'÷';
conteudo_caixa=conteudo_caixa+'÷';
}
function calcular(){
var resultado=0.0;
if (conteudo_caixa.indexOf('+')!=(-1)){
conteudo_caixa = conteudo_caixa.split("+").pop();
conteudo_caixa=parseFloat(conteudo_caixa,10);
resultado=conteudo_caixa+operacao;
}
else if (conteudo_caixa.indexOf('×')!=(-1)){
conteudo_caixa = conteudo_caixa.split("×").pop();
conteudo_caixa=parseFloat(conteudo_caixa,10);
resultado=conteudo_caixa*operacao;
}
else if (conteudo_caixa.indexOf('-')!=(-1)){
conteudo_caixa = conteudo_caixa.split("-").pop();
conteudo_caixa=parseFloat(conteudo_caixa,10);
resultado=operacao-conteudo_caixa;
}
else if (conteudo_caixa.indexOf('÷')!=(-1)){
conteudo_caixa = conteudo_caixa.split("÷").pop();
conteudo_caixa=parseFloat(conteudo_caixa,10);
resultado=operacao/conteudo_caixa;
}
conteudo_caixa='';
resultado=resultado.toFixed(4);
resultado=resultado.replace(".", ",");
document.getElementById("caixa").innerHTML=resultado;
operacao=0.0;
}
function virgula(){
document.getElementById("caixa").innerHTML=conteudo_caixa+',';
conteudo_caixa=conteudo_caixa+',';
}
</script>