HTML Calculadora (Excel) em HTML

Thyago Barbosa · 29 de setembro de 2017

Galera, alguém poderia me dizer como eu faço pra fazer uma calculadora em HTML nesse esquema do Excel?

Tipo, funciona assim, eu digito a quantidade de parcela e o valor da parcela, daí na coluna "Total Parc." ficaria a fórmula multiplicando o valor da "Qtd." com o "Valr.".
Na célula "A Vista" é pra mim digitar o valor.
E na "Diferença" eu queria que calculasse o valor "A Vista" - (menos) o "Total Parc."

O resto das células, eu queria que ficasse tudo bloqueado, os únicos que seriam pra digitar seriam os que estão sem nada dentro.

DiF · 29 de setembro de 2017

@Thyago Barbosa Olá,

você pode fazer isso de duas formas:

Por tabelas
Por DIV

No seu caso, recomendo o uso de tabelas, justamente por ser uma calculadora que exige dados tabulares.

Basicamente você cria a estrutura da tabela com 3 <th> para os títulos e conjunto de 5 <tr> contendo 3 <td> cada um.

Depois você estiliza a desejar no CSS.

A parte da mágica será mesmo no jQuery. O javascript da coisa.

Sendo mais objetivo, você vai criar um evento de keyup para o input quantidade parcela, que quando ao digitar nele o valor, vai fazer o calculo e inserir o resultado no input do total da parcela.

Isso será a mesma coisa para o input a vista. vai chamar o evento de keyup e calcular a diferença!

Veja este exemplo online funcionando: https://jsfiddle.net/dife/0gkvp2s6/3/

Ali na parte do Javascript, eu coloquei comentários bem simples e explicativos para você entender.

Thyago Barbosa · 2 de outubro de 2017

@DiF Opa valeu man, mas só avisando que eu não manjo nada de html, nada mesmo kkk, até tentei entender a sua explicação mas fiquei todo perdido kkkkk (não consegui nem salvar pra usar offline kkkk), eu tava querendo esse negócio pra mim usar no trabalho, porque lá n tem acesso à excel, daí queria esse script em html pra mim colocar no bloco de notas e usar offline na máquina.

Ah esse seu que você mandou, como faz pra deixar a atualização do valor do "Valr. Parc." ser instantâneo? Tipo, se eu digitar o valor da "Qtd." e depois digitar o "Valr. Parc.", ele não atualiza o valor "Total Parc.", daí eu tenho que voltar e digitar o valor da "qtd." de novo pra atualizar o valor.

Ah, e se puder, manda todo o script pra mim usar offline, achei um na internet que é mais ou menos o que estou querendo (com as partes da fórmula bloqueada pra alteração), só falta a parte que eu digito o "Á Vista" e a parte que calcula esse valor com o "Total".

Olha aí

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <form action="" method="post">
    Valor Unitário: <input type="text" name="valor_unitario" id="valor_unitario" />
    Quantidade: <input type="text" name="qnt" id="qnt" value="0" />
    Total: <input type="text" name="total" id="total" readonly="readonly" />
  </form>

<script type="text/javascript">
function id(el) {
  return document.getElementById( el );
}
function total( un, qnt ) {
  return parseFloat(un.replace(',', '.'), 10) * parseFloat(qnt.replace(',', '.'), 10);
}
window.onload = function() {
  id('valor_unitario').addEventListener('keyup', function() {
    var result = total( this.value , id('qnt').value );
    id('total').value = String(result.toFixed(2)).formatMoney();
  });

  id('qnt').addEventListener('keyup', function(){
    var result = total( id('valor_unitario').value , this.value );
    id('total').value = String(result.toFixed(2)).formatMoney();
  });
}

String.prototype.formatMoney = function() {
  var v = this;

  if(v.indexOf('.') === -1) {
    v = v.replace(/([\d]+)/, "$1,00");
  }

  v = v.replace(/([\d]+)\.([\d]{1})$/, "$1,$20");
  v = v.replace(/([\d]+)\.([\d]{2})$/, "$1,$2");
  v = v.replace(/([\d]+)([\d]{3}),([\d]{2})$/, "$1.$2,$3");

  return v;
};
</script>

</body>
</html>

DiF · 2 de outubro de 2017

@Thyago Barbosa Olá,

5 minutos atrás, Thyago Barbosa disse:

Ah esse seu que você mandou, como faz pra deixar a atualização do valor do "Valr. Parc." ser instantâneo? Tipo, se eu digitar o valor da "Qtd." e depois digitar o "Valr. Parc.", ele não atualiza o valor "Total Parc.", daí eu tenho que voltar e digitar o valor da "qtd." de novo pra atualizar o valor.

Sim! Dá para fazer. fica assim:

No caso ali se você analisar, temos as variáveis para armazenar o campo da quantidade e do valor certo?

Respectivamente são:

     //input quantidade
	var qtd_parc   = $(".qtd-parc");
    
    //input valor parcela
    var valr_parc  = $(".valr-parc");

Então as variáveis que vamos usar serão qtd_parc e valr_parc.

Agora, o evento que dispara a cada digitação no campo é este:

//quando digita no input qtd parcela
    qtd_parc.on("keyup", function(){
      
         //aqui vai a logica das formulas 
    }

Neste evento estamos dizendo que ao digitar um valor no campo com a classe chamada de qtd_parc vai disparar o evento de keyup.

Para fazer com que o valr_parc seja o campo que vai disparar o cálculo, troque o qtd_parc pelo valr_parc desta maneira:

//quando digita no input valor parcela
    valr_parc.on("keyup", function(){
      
         //aqui vai a logica das formulas 
    }

Para fazer funcionar offline aí, tem duas formas:

Baixando o arquivo core do jquery e colocar junto do seu arquivo html, ou chamando o jquery via CDN, que aí você vai precisar de internet.

Caso seu pc tenha internet, o CDN é a melhor forma de chamar o jquery no seu documento desta forma:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Ele deve ser a primeira coisa a ser chamada antes de qualquer javascript.

Bem, o código lá tem comentários! Depois de estudar um pouco, você vai entender melhor

No mais, deixo em anexo a calculadora. Basta baixar, descompactar e rodar no seu navegador. Lembrando que ele precisa da internet!

calculadora.rar

Thyago Barbosa · 2 de outubro de 2017

@DiF Agora comecei a entender, coloquei o "keyup" nos 2 valores, tanto no "Qtd" quanto no "Valr Parc" dai tá atualizando nos 2 daí olhei aquele outro script que mandei e coloquei o "readonly" onde está programado pra calcular (Valor Total e Diferença).

Ah e eu testei isso dai sem internet e funcionou de boas man, valeu aí pela aula

adicionado 6 minutos depois

@DiF man, outra dúvida, como faço pra trocar o separador de casa decimal pra "," (vírgula) ao invés de "." (ponto)? tipo, pra escrever o número 2,50 ao invés de 2.50?

DiF · 2 de outubro de 2017

@Thyago Barbosa

52 minutos atrás, Thyago Barbosa disse:

como faço pra trocar o separador de casa decimal pra "," (vírgula) ao invés de "." (ponto)?

Nesse caso terias que usar um replace. é um tanto chatinho de fazer, pois como as operações só podem usar ponto para calcular, precisamos pegar o valor digitado com a virgula, e converter para ponto. Então usar este valor novo para fazer o cálculo e depois pegar o resultado e aplicar a virgula no lugar do ponto.

Por exemplo:

var nw_valr_parc = valr_parc.val().replace(",", ".");

Isso pega o valor com vírgula e troca para ponto.

Então para termos o cálculo do total parc usando vírgula e o resultado mostrar também com a vírgula fazemos assim:

//Aqui o valor do valr_parc é com vírgula
valr_parc.on("keyup", function(){
  
       //Armazena em uma nova variável o valor do valr_parc com o ponto
       var nw_valr_parc = valr_parc.val().replace(",", ".");
       
 
         //calcula o total da parcela usando a nova variável criada nw_valr_parc
    	  var multiplica = qtd_parc.val() * nw_valr_parc;
        
        //insere o resultado do cálculo no input do total parcela
        //toFixed(2) limita o valor com duas casas 12.50
        //o replace(".",",") troca o ponto para a vírgula de novo! 
        total_parc.val(multiplica.toFixed(2).replace(".", ","));
       
    });

Fiz uma V2 da calculadora.

Está no anexo abaixo.

PS: É necessário conexão com a internet sim. caso contrário, não funcionará o jQuery. Pois estou usando o CDN online.

calculadora_v2.rar

Thyago Barbosa · 2 de outubro de 2017

@DiF Entendi, eu tinha feito de outro jeito, mas esse jeito aí ficou melhor. Eu tinha colocado mais outro replace nessa variavel, daí ficou aquela que você já tinha deixado, e abaixo eu coloquei outra que substitui a vírgula por ponto, igual o que estava de substituir letra por " ".

E sobre as casas decimais, como faz pra digitar o valor e já ir colocando as casas decimais automaticamente? Tipo, eu digito o número 23523 direto sem vírgula, e ele vai preenchendo em tempo real 235,23 (daí se caso eu quisesse colocar 55 Reais, teria que digitar 5500)? Queria colocar isso daí na variável "a_vista" e na "valr_parc". E outra dúvida, como faz pra colocar a variável das "qtd" como se fosse uma lista? Tipo, eu deixo de 1 à 55, e se eu digitar algum outro número além desse não vai, e também deixar a opção de selecionar com o mouse, abrindo a lista e selecionando.

DiF · 2 de outubro de 2017

@Thyago Barbosa

30 minutos atrás, Thyago Barbosa disse:

E sobre as casas decimais, como faz pra digitar o valor e já ir colocando as casas decimais automaticamente? Tipo, eu digito o número 23523 direto sem vírgula, e ele vai preenchendo em tempo real 235,23

Teria que fazer uma verificação a cada caractere digitado, e testar... pois ele não sabe se 23523 é 23,52 ou 235,23.

Por recomendação, não se preocupe com esses detalhes, até porque por exemplo outro detalhe é, o código não testa se é número ou letra. Não pude fazer isso porque, a virgula não é numérica. Até daria para fazer, mas gastaria muito tempo pesquisando o uso das expressões regulares.

35 minutos atrás, Thyago Barbosa disse:

como faz pra colocar a variável das "qtd" como se fosse uma lista?

Podes substituir o campo input type="text" por input type="number" onde você define o min="1" e max="55"

Selecionar com o mouse, ai já complica, porque aí você deve trocar o campo do tipo input pelo campo select sem possibilidade de digitar.

Por recomendação, use o input type number para fazer a limitação de min e max

Thyago Barbosa · 2 de outubro de 2017

@DiF valeu man, usei todos os negócio que você me falou e deixei assim nesse esquema, dá uma olhada aí. As únicas coisas que queria saber, primeiro é como faz pra auto-completar os números como moeda nos campos de "A Vista" e "Valr. Parc.", tipo, eu digito "2" e ele atualiza pra "R$ 2,00"; digito "3,1" e ele retorna "R$ 3,10" no mesmo lugar que digitei.

A outra coisa é se esse CDN que chama o jQuery é bloqueado pela Segurança da Informação? Tipo, o CDN do script entra no bloqueio de site? Se sim, como faria pra "converter" essa calculadora em offline (sem usar o CDN)? Caso não, pode deixar assim mesmo

calculadorav3.rar

DiF · 3 de outubro de 2017

1 hora atrás, Thyago Barbosa disse:

A outra coisa é se esse CDN que chama o jQuery é bloqueado pela Segurança da Informação? Tipo, o CDN do script entra no bloqueio de site? Se sim, como faria pra "converter" essa calculadora em offline (sem usar o CDN)? Caso não, pode deixar assim mesmo

Eu respondi isso mais acima, leia meu post #04 mais para o final.