1. Este site usa cookies. Ao continuar a usar este site está a concordar com o nosso uso de cookies. Saber Mais.

maquina de calcular javascript

Discussão em 'Web Development' iniciada por alfinete, 24 de Setembro de 2008. (Respostas: 15; Visualizações: 3807)

  1. alfinete

    alfinete Power Member

    code html javascript

    Código:
    
    <!DOCTYPE ht1ml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>menu</title>
        <link rel="stylesheet" type="text/css" href="menu.css" />
    
        <script type="text/JavaScript">
        
          // valorf  valor do primeiro algarismo
          //valorf2  valor do segundo algarismo
          // valorfinal1 valor convertido para duble de valorf
          // valorfinal2 valor convertido para duble de valorf2
          //ponto guarda o valor do botao ponto
          //oper guarda o valor do botão operação clicado
    
         var oper;
         var valor,valorf,valorf2,valorfinal1,valorfinal2,ponto;
    
          //danos o num escolhido  e faz a conta    
          function getnum(valor)
          {
          //alert(valor);
         //alert(ponto);
             if(oper == null)
              {
              
           
                  if (valorf==null)
                  {
                  valorf= valor; 
                  document.getElementById('Txtoper').value=valorf; 
                  }
                  else
                  {
                   //detectaponto
                   if (ponto == null)
                      {
                      valorf= valorf + "" + valor ; 
                      document.getElementById('Txtoper').value=valorf; 
                      }
                      else
                      {
                        valorf= valorf + ponto + valor ; 
                         document.getElementById('Txtoper').value=valorf;
                       
                      }
                      
                  }
            
           } 
           else
           {
               if (valorf2==null)
               {
               valorf2= valor;      
               document.getElementById('Txtoper').value=valorf +"  "+oper+"  "+ valorf2;
               }
                else
                {
                 //detectaponto
                 if (ponto == null)
                      {
                        valorf2= valorf2 +""+ valor ;
                        document.getElementById('Txtoper').value=valorf +"  "+oper+"  "+ valorf2;
                      }
                        else
                      {
                       valorf2= valorf2 + ponto + valor ;
                        document.getElementById('Txtoper').value=valorf +"  "+oper+"  "+ valorf2;
                      }
                }   
           
           }    
          }
          
        
          //danos a operacao escolhida
          function getoper(valor_oper)
          {
          if(oper == null )
             {
              oper=valor_oper;   
              }
              else
              {
              oper=oper;
              }
          }
          
          //capta o ponto
           function getponto(ponto_c)
           {
            if(ponto == null )
             {
              ponto=ponto_c;   
              }
              else
              {
              ponto=ponto;
              }
           }
          
          
          
          function calcula()
          {
          var operacao;
          valorfinal1=parseFloat(valorf);   
          valorfinal2=parseFloat(valorf2);
             
           if (oper!=null && valorf!=null && valorf2!=null)
           {
                switch (oper)
                {
                case "+":
                  {
                  
                  operacao = valorfinal1 + valorfinal2;
                  get_opr(operacao);
                  break;
                  }
                case "-":
                  {
                  operacao = valorfinal1 - valorfinal2;
                  get_opr(operacao);
                  break;
                  }
                
                 case "x":
                  {
                  operacao = valorfinal1 * valorfinal2;
                  get_opr(operacao);
                  break;
                  }
                  case "/":
                  {
                  operacao = valorfinal1 / valorfinal2;
                  get_opr(operacao);
                  break;
                  }
                }
            }
            else
             {
             document.getElementById('lblerro').value=  "obrigatório escolher operação";
             }
           
          }
          
          // da resultado da operacao
          function get_opr(operacao)
          {
          
           //document.getElementById('Txtoper').value= " "+ valorfinal1 + " " + oper + " " + valorfinal2 ;
           document.getElementById('Txtres').value= operacao;
           document.getElementById('lblerro').value= "";
           document.getElementById('conta').style.display = "none";
          }
          
          //limpa dados
          function limpa()
          {
           oper = null;
           valorf=null;
           valorf2=null;
           valorfinal1=null;
           valorfinal2=null;
           ponto=null;
           document.getElementById('Txtoper').value= "";
           document.getElementById('Txtres').value= "";
           document.getElementById('conta').style.display = "inline";
          }
          
          
          
        </script>
    
    </head>
    <body>
        <div class="wraper">
            <div class="menuprinc">
                <table id="conta">
                    <tr>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc1" type="button" value="1" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc2" type="button" value="2" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc3" type="button" value="3" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btn-" type="button" value="-" onclick="javascript:getoper(this.value);" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc4" type="button" value="4" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc5" type="button" value="5" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc6" type="button" value="6" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btn+" type="button" value="+" onclick="javascript:getoper(this.value);" />
                        </td>
                    </tr>
                    
                    <tr>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc7" type="button" value="7" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc8" type="button" value="8" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="Btnc9" type="button" value="9" onclick="javascript:getnum(this.value);" />
                        </td>
                        <td>
                            <input style="width:25px ;height:25px" id="btn_prod" type="button" value="x" onclick="javascript:getoper(this.value);" />
                        </td>
                    </tr>
                    <tr>
                        <td colspan ="2" >
                            <input style="width:65px ;height:25px" id="Btnc0" type="button" value="0" onclick="javascript:getnum(this.value);" />
                        </td>
                          <td >
                            <input style="width:25px ;height:25px" id="btnponto" type="button" value="." onclick="javascript:getponto(this.value);" />
                        </td>
                        <td >
                            <input style="width:25px ;height:25px" id="btn_div" type="button" value="/" onclick="javascript:getoper(this.value);" />
                        </td>
                    </tr>
                 
                </table>
                <table>
               
                   <tr>
                 
                        <td colspan ="2" >
                         <input style="width:65px ;height:25px" id="btn_igual" type="button" value="=" onclick="javascript:calcula();" />
                        </td>
                        <td colspan ="2" >
                           <input style="width:55px ;height:25px" id="btnlimpa" type="button" value="limpar" onclick="javascript:limpa();" />
                        </td>
                    </tr>
              
                
                </table>
                <table>
                    <tr>
                        
                           <td>
                            <input readonly="readonly"  id="Txtoper" type="text" style="width: 100px;" />
                        </td>
                        <td>
                            <input readonly="readonly" id="Txtres" type="text" style="width: 50px;" />
                        </td>
                       
                    </tr>
                    <tr>
                        <td rowspan="4" >
                            <label id="lblerro"  style="width: 100px;color:White; " ></label>
                        </td>
                        
                    </tr>
                </table>
            </div>
        </div>
    </body>
    </html>
    
    

    code css

    Código:
    * { padding: 0; margin: 0; }
    
    body
    {
    }
    .wraper
    {
    position:relative;
    margin: 0 auto;
    top:10px; 
    width:800px;
    height:650px;
    background-color:Gray;  
    } 
    
    
    como podem ver faz bem as contas, so estou a desenvolver isto pra treinar javascript, e decidi começar por uma coisa rasoavelmente simples.

    estou a desenvolver a maquina de calcular para operações simples de 2 algarismos, simples e com casas decimais.

    estou com um dilema

    o probleme é o botão ponto.


    função que capta o valor do ponto

    Código:
         function getponto(ponto_c)
           {
            if(ponto == null )
             {
              ponto=ponto_c;   
              }
              else
              {
              ponto=ponto;
              }
           }
    [code]
    
    
    função que calcula tdo    function getnum(valor)
    
    valor = valor do algarismo construido
    
    criei este if na função descrita a cima
    
    [CODE]if (ponto == null)
                       {
                         valorf2= valorf2 +""+ valor ;
                         document.getElementById('Txtoper').value=valorf +"  "+oper+"  "+ valorf2;
                       }
                         else
                       {
                        valorf2= valorf2 + ponto + valor ;
                         document.getElementById('Txtoper').value=valorf +"  "+oper+"  "+ valorf2;
                       }
    para so por um ponto em cada sequancia de digitos de um algarismo, mas ele põe mais que um".", desde que ja exista um, e eu so quero apenas um ponto

    gostava que me ajudassem a resolver este dilema

    obrigada
     
  2. geoblast

    geoblast Power Member

    associas uma funcao ao onkeypress que leia a tecla e permita apenas numeros e o ponto. Essa função recebe o evento por parâmetro. Crias outra função que verifique qual o campo associado ao evento e o valor desse campo, retornando esse valor. Invocas esta função dentro da primeira e se já existir o ponto no valor impedes o funcionamento da tecla ponto.
     
  3. alfinete

    alfinete Power Member

    ele detecta que p ponto la esta na boa, mas a partir da primeira vez que o ponho , ele quando clico em um numero qualquer ele poe logo automaticamente o ponto sem clica no botão do mesmo..
     
  4. geoblast

    geoblast Power Member

    não tem porque o fazer. algo não deve tar bem. quais são as funções??
     
  5. pekenin

    pekenin Power Member

    Qual o programa indicado para introduzir esse código?
     
  6. geoblast

    geoblast Power Member

    olá, a que código te referes?
     
  7. alfinete

    alfinete Power Member

    ao code html javascript, esta ai tdo
     
  8. alfinete

    alfinete Power Member

    do code referido no reply antes o excerto do mesmo que dá problemas quer para o numero 1 quer para o numero 2 é este

    if (ponto == null)
    {
    valorf= valorf + "" + valor ;
    document.getElementById('Txtoper').value=valorf;
    }
    else
    {
    valorf= valorf + ponto + valor ;
    document.getElementById('Txtoper').value=valorf;

    }
     
  9. p3dro

    p3dro Power Member

    Pelo teu código apartir do momento que selecionas o "." essa condição vai ser sempre verdadeira, daí que cada vez que escolhes um número vai parar ao else e adiciona sempre o ponto.
    Uma solução é verificares se o valorf já tem um ponto ou não. Por ex:

    PHP:
    if (ponto == null || valorf.indexOf(".")!=-1)
    No valorf2 vai ser a mesma coisa:

    PHP:
    if (ponto == null || valorf2.indexOf(".")!=-1)
     
    Última edição: 25 de Setembro de 2008
  10. alfinete

    alfinete Power Member

    muito obrigado p3dro

    funciona bem para o 1º numero no sentido de

    se puseres ',' no primeiro numero quando digitas o 2 ele põe ',' logo a seguir ao 1º algarismo do 2º numero..

    como posso resolver esse problema

    agradecia

    parece que ja resolvi..

    para o 2º fiz

    Código:
     if ((ponto == null && valorf.indexOf(".")!=-1) || valorf2.indexOf(".")!=-1)
     
    Última edição: 25 de Setembro de 2008
  11. alfinete

    alfinete Power Member

    agradecia que me explicassem como posso adaptar esta maquina para fazer contas com n numeros , do tipo 20+20+20+20+20+ .....

    se possivel como adaptar o code para tal

    obrigada
     
  12. p3dro

    p3dro Power Member

    Uma possivel solução, seria trabalhares com arrays.

    Não leves a mal, mas também te dizia, sinceramente, que mais valia começares do 0... tentado estruturar melhor o código

    :beerchug:
     
  13. alfinete

    alfinete Power Member

    sim eu sei , o code esta assim porque eu queria ver uma coisa a funcionar

    mas ja agora gostava de uma logica para fazer a coisa com arrays

    obeigada
     
  14. p3dro

    p3dro Power Member

    Podes por ex. ir guardando os valores inseridos e os operadores em arrays diferentes, depois qdo detectares o "=" fazes as contas respectivas, tens é de ter em atenção as prioridades dos operadores, por ex. o * e / têm prioridade sobre + e -

    Fiz um pequeno exemplo, mas sem recorrer a arrays e fazendo batota :joker: pois para calcular o resultado, recorro directamente ao eval, porém tens de ter em atenção que a expressão a ser avaliada, terá de ser válida, senão o eval vai gerar um erro.


    Código javascript:

    PHP:
    <script type="text/javascript">
      var 
    valid_ops="x+-/"//operadores válidos
      
    var point=0//verificar se o número tem só 1 ponto
      
    var last_el//último char inserido
      
    var result//guardar último resultado, caso depois do operador "=" seja 
                     //utilizado outro operador, permite transpor o resultado

      //shortcut document.getElementById
      
    $ = function(id){return document.getElementById(id);}

      
    //adicionar events aos botões
      
    EventHandlers = function(){
        var 
    num_bts=16;
        var 
    prefix="bt";

        for (var 
    i=1;i<=num_bts;i++){
          $(
    prefix+i).onclick=function(){ProcessInput(this.value);}
        }
        $(
    prefix+(num_bts+1)).onclick=function(){Limpar();}
      }

      
    //limpar informações
      
    Limpar = function(){
        $(
    "Txtoper").value"";
        $(
    "Txtres").value"";
        $(
    "lblerro").innerHTML="";
        
    result=undefined;
        
    point=0;
        
    last_el=undefined;
      }

      
    //verificar char inserido e efectuar respectiva operação
      
    ProcessInput = function(ch){
        var 
    el//elemento a adicionar à textbox

        //é um número
        
    if(!isNaN(ch)){
          if(
    result) {Limpar();} //começar nova conta
          
    el=ch;
        }

        
    //foi inserido 1 ponto, permitir apenas 1 por cada número
        
    else if(ch=="." && point==0){
          if(
    result) {Limpar();} //começar nova conta
          
    el=ch;
          
    point=1;
          if(!
    last_el || isNaN(last_el)) el="0"+ch;
        }

        
    //verificar se é um operador válido e 
        //se o último caracter inserido não é 1 operador
        
    else if(valid_ops.indexOf(ch)>-&& !isNaN(last_el)){
          
    //transpor resultado para nova operação
          
    if(!isNaN(result)) {$("Txtoper").value=resultresult=undefined;}
          
    el=" " ch " ";
          
    point=0;
        }

        
    //calcular resultado se assim se verificar
        
    else if(ch=="=" && CheckOpValid($("Txtoper").value)){
          var 
    op=$("Txtoper").value.replace("x","*");
          
    result=eval(op); //calcular resultado
          
    $("Txtres").value=result;
          
    point=0;
          
    last_el="";
          return ;
        }

        
    //ignorar restante      
        
    else{return;}

        $(
    "Txtoper").value+=el//actualizar textbox com último caracter
        
    last_el=ch//guardar último char inserido
      
    }
     
      
    //verificar se a conta é válida
      
    CheckOpValid = function(str){
        if(!
    str){
          $(
    "lblerro").innerHTML="não foi inserido qualquer valor";
          return;
        }
        else if(
    last_el!="=" && isNaN(last_el)){
          $(
    "lblerro").innerHTML="a operação é inválida, falta inserir um algarismo";
          return;
        }
        $(
    "lblerro").innerHTML="";
        return 
    1//tudo ok
      

      
    window.onload=EventHandlers;
    </
    script>
    html dos botões

    Código:
    <table id="conta">
      <tr>
        <td><input style="width: 25px; height: 25px" id="bt1" type="button" value="1" /></td>
        <td><input style="width: 25px; height: 25px" id="bt2" type="button" value="2" /></td>
        <td><input style="width: 25px; height: 25px" id="bt3" type="button" value="3" /></td>
        <td><input style="width: 25px; height: 25px" id="bt4" type="button" value="-" /></td>
      </tr>
      <tr>
        <td><input style="width: 25px; height: 25px" id="bt5" type="button" value="4" /></td>
        <td><input style="width: 25px; height: 25px" id="bt6" type="button" value="5" /></td>
        <td><input style="width: 25px; height: 25px" id="bt7" type="button" value="6" /></td>
        <td><input style="width: 25px; height: 25px" id="bt8" type="button" value="+" /></td>
      </tr>
      <tr>
        <td><input style="width: 25px; height: 25px" id="bt9" type="button" value="7" /></td>
        <td><input style="width: 25px; height: 25px" id="bt10" type="button" value="8" /></td>
        <td><input style="width: 25px; height: 25px" id="bt11" type="button" value="9" /></td>
        <td><input style="width: 25px; height: 25px" id="bt12" type="button" value="x" /></td>
      </tr>
      <tr>
        <td colspan="2"><input style="width: 65px; height: 25px" id="bt13" type="button" value="0" /></td>
        <td><input style="width: 25px; height: 25px" id="bt14" type="button" value="." /></td>
        <td><input style="width: 25px; height: 25px" id="bt15" type="button" value="/" /></td>
      </tr>
    </table>
    <table>
      <tr>
        <td colspan="2"><input style="width: 65px; height: 25px" id="bt16" type="button" value="=" /></td>
        <td colspan="2"><input style="width: 55px; height: 25px" id="bt17" type="button" value="Limpar" /></td>
      </tr>
    </table>
    <table>
      <tr>
        <td><input readonly="readonly" id="Txtoper" type="text" style="width: 100px;" /></td>
        <td><input readonly="readonly" id="Txtres" type="text" style="width: 50px;" /></td>
      </tr>
      <tr><td rowspan="4"><label id="lblerro" style="width: 100px; color: White;"></label></td></tr>
    </table>
    Fiz alguns testes e deu ok, mas é perfeitamente natural que tenha bugs, aliás 2 tem de certeza :p: não dá para inserir números negativos, por ex. -1+5; não podes mudar o sinal depois de selecionado, por ex. passar a operação de + para *
     
    Última edição: 27 de Setembro de 2008
  15. tomassantos

    tomassantos To fold or to FOLD?

    Quando for grande quero saber fazer calculadoras em Java :D:joker:
     
  16. hehehe eu tambem!!!!
     

Partilhar esta Página