JavaScript: Calcular desconto

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.

Um comentário em “JavaScript: Calcular desconto

  • 18 de outubro de 2016 em 13:20
    Permalink

    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

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

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *