Jump to content

Archived

This topic is now archived and is closed to further replies.

Mylla D.

Calculadora em HTML/Javascript sem eval function

Recommended Posts

Oi gente ^^

 

Tenho que fazer uma calculadora em javascript que só faça soma e subtração, sem usar a função eval!

Já olhei em 8475853443753450642 fóruns e não encontrei nada que pudesse me ajudar efetivamente. O pessoal pra resolver o problema de ter duas variáveis somando, acaba usando dois <input type="text"> só que eu só posso usar um... realmente não estou conseguindo desenvolver esse código, se alguém puder ajudar POR FAVOR AJUDE hahaha tenho até as 22:00 pra entregar esta bagaça.

 

O que eu tenho por enquanto é isso (com eval):

 

-----------------HTML-----------------

 

<form name="form">
<table>
<tr>
<input type="text" id="tela">
</tr>
<tr>
<td><input type="button" value="7" onclick="verConta(value);"></td>
<td><input type="button" value="8" onclick="verConta(value);"></td>
<td><input type="button" value="9" onclick="verConta(value);"></td>
</tr>
<tr>
<td><input type="button" value="4" onclick="verConta(value);"></td>
<td><input type="button" value="5" onclick="verConta(value);"></td>
<td><input type="button" value="6" onclick="verConta(value);"></td>
</tr>
<tr>
<td><input type="button" value="1" onclick="verConta(value);"></td>
<td><input type="button" value="2" onclick="verConta(value);"></td>
<td><input type="button" value="3" onclick="verConta(value);"></td>
</tr>
<tr>
<td><input type="button" value="-" onclick="verConta(value);"></td>
<td><input type="button" value="0" onclick="verConta(value);"></td>
<td><input type="button" value="+" onclick="verConta(value);"></td>
</tr>
<tr>
<td><input type="button" value="CL" onclick="CL()"></td>
<td><input type="button" value="=" onclick="verResultado();"></td>
<td><input type="button" value=""></td>
</tr>
</table>
</form>
-----------------JAVASCRIPT-----------------
function verConta(valor){
document.getElementById('tela').value += valor;
}
function CL(){
document.getElementById('tela').value ="";
}
function verResultado(valor){
var total = 0;
total = document.getElementById('tela').value;
CL();
document.getElementById('tela').value = eval(total);
}
:(

Share this post


Link to post
Share on other sites

Não foi muito específico. Digitei um bloco de comandos adicionais no seu código para ver se entende ele. (este é um método um pouco amplo para o usuário declarar o número digitado - fiz um tamanho limitado que aceita apenas 5 números)

var numberOrder=[0,0,0,0,0];//5. Pode mais se quiser, de acordo com os loops.

function verConta(valor){
    var i;
    valor=parseFloat(valor);
    for(i=0;5>i;i++){
        if(numberOrder[i]===0){
            if(numberOrder[i+1]!==0){
                //Valor adicionado à sequência...
                numberOrder[i]=valor;
                break
            }
        }else{
            break
        }
    }
    var numberToAdd,
        parsedNumber=0;
    //Interpretando a sequência.
    //quinta ordem (dezena de milhar)
    numberToAdd=[0,10000,20000,30000,40000,50000,60000,70000,80000,90000];
    parsedNumber+=numberToAdd[numberOrder[0]];
    //quarta ordem (milhar)
    numberToAdd=[0,1000,2000,3000,4000,5000,6000,7000,8000,9000];
    parsedNumber+=numberToAdd[numberOrder[1]];
    //terceira ordem (centena)
    numberToAdd=[0,100,200,300,400,500,600,700,800,900];
    parsedNumber+=numberToAdd[numberOrder[2]];
    //segunda ordem (dezena)
    numberToAdd=[0,10,20,30,40,50,60,70,80,90];
    parsedNumber+=numberToAdd[numberOrder[3]];
    //primeira ordem (unidade)
    parsedNumber+=numberOrder[4];
    document.getElementById("tela").value=parsedNumber
}

function CL(){
    numberOrder=[0,0,0,0,0];
    document.getElementById("tela").value=""
}


function verResultado(valor){
    CL()
    //...
}

Isso é base para digitar o número. PS: o exemplo do usuário acima tem um código diferente, talvez seja mais prático.

Share this post


Link to post
Share on other sites

  • Similar Content

    • By Sapinn
      Opa galera tudo firmesa? Então, tenho um codigo que faz uma barra aparecer toda vez que eu role a pagina até um certo ponto e tudo funciona normal. Eu gostaria de saber se tem como fazer uma transição nessa barra para ele ir aparecendo devagarzinho com a opacidade em 0 e vai subindo até chegar a 1 coisa de um 0.8s. Não sei como fazer ou se tem como fazer preciso de ajuda.
       
      Codigo js 
       
      window.onscroll = function(){
          var top = window.pageXOffset || document.documentElement.scrollTop
          var barra = document.querySelector(".barra");
          if(top > 900){
              barra.style.display = 'flex';
      //aqui tentei adicionar uma class direto do css para fazer o efeito transition mas sem sucesso.
              barra.classList.add('transition');
          }else{
             barra.style.display = 'none';
          }
      }
       
       
      Codigo css
      .barra{
          width: 100%;
          height: 70px;
          background-color: #090b13;
          display: none;
          justify-content: space-between;
          position: fixed;
          opacity: 0;
      }
      .transition{
          transition: 1s;
          opacity: 0.7;
          
      }
       
      codigo HTML
       
      <div class="barra" >
              <img src="assets/images/logo-nopad.svg" alt="">
              <button class="botao-assinatura-header">Assine Agora</button>
        </div>
       
       
    • By AlexandrePrezzi
      Preciso de uma ajuda....
       
      Tenho um código que gera um botao  dropdown e dentro dele gera um segundo nivel....
       
      <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script> <style> .dropdown-submenu { position: relative; } .dropdown-submenu .dropdown-menu { top: 0; left: 100%; margin-top: -1px; } </style> </head> <body> <div class="container"> <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">Tutorials <span class="caret"></span></button> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">HTML</a></li> <li><a tabindex="-1" href="#">CSS</a></li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Segundo <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> <li><a tabindex="-1" href="#">2nd level dropdown</a></li> </ul> </li> <li class="dropdown-submenu"> <a class="test" tabindex="-1" href="#">Primeiro <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a tabindex="-1" href="#">3nd level dropdown</a></li> <li><a tabindex="-1" href="#">4nd level dropdown</a></li> </ul> </li> </ul> </div> </div> <script> $(document).ready(function(){ $('.dropdown-submenu a.test').on("click", function(e){ $(this).next('ul').toggle(); e.stopPropagation(); e.preventDefault(); }); }); </script> </body> </html> o que acontece 
       
      Se eu clico em "Primeiro" abre um menu de subitens ao lado .... quando eu clico de novo ele fecha (ate ai ok)

      Mas supondo que eu clique em "Primeiro"  (abre ao lado) ... mas sem clicar pra fechar eu clico em "Segundo" (abre o submenu ao lado mas sem fechar o primeiro).
      e isso acaba deixando empilhado..
       
      Gostaria q quando tu clica em Segundo (caso o primeiro esteja expandido ele feche)  e vice-versa.
       
      Na imagem coloquei o q esta acontecendo.....

    • By henriquers
      Estou com um problema com o Select2, ele tem um campo de busca mas não esta filtrando corretamente e não estou entendo o motivo, sem utilizar o AJAX colocando os options manualmente ele funciona corretamente, mas trazendo os dados via AJAX ele não funciona o campo de busca.
      Se aguem poder me dar uma luz agradeço a ajuda.
       

       
      Nessa imagem estou tentando filtrar apenas para os itens que tenha LUVA na descrição, mas não funciona, posso colocar qual quer coisa que ele não faz o filtro
       
      Abaixo segue meu codigo
       
      HTML
      <!DOCTYPE HTML PUBLIC> <HTML> <HEAD> <TITLE> Select2 </TITLE> <link href="select2/select2.css" rel="stylesheet" type="text/css" /> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/i18n/pt-BR.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.css" rel="stylesheet"/> <script> $(document).ready(function(){ $("#selUser").select2({ language: "pt-br", ajax: { url: "get_dados.php", type: "GET", dataType: 'json', delay: 200, data: function (params) { return { q: params.term, // search term page: params.page }; }, processResults: function (response) { return { results: response }; }, cache: true }, width: "20%", closeOnSelect: true, }); }); </script> </head> <body> <select id='selUser' style='width: 200px;'> <option value='0'>- Search user -</option> </select> </body> </html> get_dados.php
      <?php include './conn_orcl.php'; $select="SELECT PRO_CODPRO PRODUTO,TRIM(PRO_DESCRI) DESCRICAO FROM F_PRODS WHERE PRO_LOCEST='ALMOX' AND PRO_STATUS = 'AT' ORDER BY DESCRICAO"; $parse=oci_parse($conn,$select); oci_execute($parse); $data = array(); while($row=oci_fetch_array($parse)){ $data[] = array("id"=>$row['PRODUTO'], "text"=>$row['PRODUTO']." - ".$row['DESCRICAO']); }; echo json_encode($data); ob_end_flush(); oci_free_statement($parse); oci_close($conn); ?>  
    • By João Carlos de Jesus
      Eu queria que opacity só funcionasse no id direcionado, menos na imagem
       
      <style> #test:not(.teste){ color:blue; -webkit-opacity:0.5; } </style> <div id="test"> <div> <h2>Olá</h2> </div> <img class="teste"src="https://www.prestus.com.br/wp-content/uploads/2018/07/script-de-atendimento-1-1024x683.jpg"style="width:100px;height:100px;"/> </div>  
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.