JavaScript: Calcular desconto

admin 27 de setembro de 201120 de outubro de 2016 4 Comments getElementById, isNaN, onBlur, onkeyup, parseFloat, toFixed

Aprenda neste post, como calcular desconto de um valor.

O desconto pode ser em porcentagem (%) e/ou em valor real (R$).

<html>
<head>
<title>Javascript: Calcular Desconto</title>
<script type="text/javascript">
function calcValor(){
    // zerando total
    document.getElementById("total").value = '0';
 
    // valor líquido
    var VTOTALLIQUIDO = parseFloat(document.getElementById("valor1").value);
 
    // desconto em porcentagem
    var DESCONTO1 = parseFloat(document.getElementById("desconto1").value);
    if( isNaN ( DESCONTO1 ) ){
    	DESCONTO1 = 0;
    }
    var PDESCONTO = parseFloat( ( VTOTALLIQUIDO * DESCONTO1 ) / 100 );
 
    // desconto em valor
    var VDESCONTO = parseFloat(document.getElementById("desconto2").value);
    if( isNaN ( VDESCONTO ) ){
    	VDESCONTO = 0;
    }
 
    var TOTAL = parseFloat(VTOTALLIQUIDO) - parseFloat(PDESCONTO) - parseFloat(VDESCONTO);
 
    document.getElementById("total").value = 'R$ ' + TOTAL.toFixed(2);
}
</script>
 
<style type="text/css">
table tr td {
    padding: 5px;
}
table tr td.dir {
    padding-right: 15px;
    text-align: right;
    width: 120px;
}
</style>
</head>
<body>
<p>Calcular valor do desconto:</p>
<table cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td class="dir">campo 1:</td>
      <td><input type="text" name="valor1" id="valor1" value="550.25" /></td>
    </tr>
    <tr>	
      <td class="dir">desconto %:</td>
      <td><input type="text" name="desconto1" id="desconto1" onblur="calcValor()" /></td>
    </tr>
    <tr>
      <td class="dir">desconto R$:</td>
      <td><input type="text" name="desconto2" id="desconto2" onblur="calcValor()" /></td>
    </tr>
    <tr>
      <td class="dir">valor total:</td><td><input type="text" name="total" id="total" value="0.00" /></td>
    <tr>            
</table>
</body>
</html>

Explicando:

O cálculo ocorrerá quando o cursor sair dos campos desconto1 e/ou desconto2. Você pode trocar o evento pelo onkeyup().

Clique neste link para ver o script em funcionamento.

function calcValor(){ // zerando total document.getElementById("total").value = '0'; // valor líquido var VTOTALLIQUIDO = parseFloat(document.getElementById("valor1").value); // desconto 1 - porcentagem var DESCONTO1 = parseFloat(document.getElementById("desconto1").value); var PDESCONTO = parseFloat( (VTOTALLIQUIDO * DESCONTO1)/100 ); var TOTAL = parseFloat(VTOTALLIQUIDO) - parseFloat(PDESCONTO); document.getElementById("total").value = 'R$ ' + TOTAL.toFixed(2); }

<p>Calcular valor do desconto:</p> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td class="dir">campo 1:</td> <td><input type="text" name="valor1" id="valor1" value="550.25" /></td> </tr> <tr> <td class="dir">desconto %:</td> <td><input type="text" name="desconto1" id="desconto1" onkeyup="calcValor()" /></td> </tr> <tr> <td class="dir">valor total:</td><td><input type="text" name="total" id="total" value="0.00" /></td> <tr> </table>

4 thoughts on “JavaScript: Calcular desconto”

Seu código foi muito útil pra mim e te agradeço por isso, mas permita-me lapidá-lo ?
Visto que o mercado de hoje não calcula o valor em reais e sim o desconto percentual, fiz a seguinte alteração também visando mais rapidez colocando OnKeyUp em vez de blur:

Calcular Desconto

Resposta

FABIO

4 de fevereiro de 2020 em 12:25

Sempre que estou com um problema o site de vocês tem o que eu preciso de forma simples e direta. Sou extremamente grato a vocês do Linha de Comando.
😀
Resposta
- Tiago
  
  4 de fevereiro de 2020 em 15:26
  
  Valeu pelo feedback Fabio.
  Resposta
André Mendanha

11 de novembro de 2020 em 21:11

Boa noite a todos!
Estou com dificuldade para resolver uma atividade.
Tenho que fazer um código em javascript o seguinte:
Um laptop, se forem compradas menos de cinco unidades, custa R$ 1.200,00. Se forem adquiridas cinco ou mais unidades, o produto custará R$ 1.050,00. Escreva uma função que receba por parâmetro o número de laptops comprados, calculando e exibindo, em uma mensagem de alerta, o custo total da compra.
Alguém pode me ajudar? Não esquecendo de comentar o código para que eu possa estudá-lo 😉
Resposta

Você pode gostar também

JavaScript: Escapar uma String

JavaScript: Tipos primitivos

JavaScript: getElementById + CSS + Flash

4 thoughts on “JavaScript: Calcular desconto”

Deixe um comentário Cancelar resposta