Calculadora em JavaScript e HTML/CSS
Publicado por Luis Felipe Almeida Vieira (última atualização em 28/04/2019)
[ Hits: 27.914 ]
Uma calculadora simples, feita usando botões em HTML e JavaScript.
<!DOCTYPE html> <html> <head> <meta charset='utf-8' lang='pt-br'> <link rel="stylesheet" href="_css/style.css"> <script src="_js/calc.js"></script> </head> <body> <div> <h1 id='title'>Online Calculator</h1> <div class='main'> <form name='form'> <input class="textview" name='textview'> </form> <table> <td> <input type="button" class='button' onclick='c()' value="C"> <input type="button" class='button' onclick="back()" value="<"> <input type="button" class='button' onclick="insert('/')" value="/"> <input type="button" class='button' onclick="insert('*')" value="*"> </td> <tr> <td> <input type="button" class='button' onclick="insert(7)" value="7"> <input type="button" class='button' onclick="insert(8)" value="8"> <input type="button" class='button' onclick="insert(9)" value="9"> <input type="button" class='button' onclick="insert('+')" value="+"> </td> </tr> <tr> <td> <input type="button" class='button' onclick="insert(4)" value="4"> <input type="button" class='button' onclick="insert(5)" value="5"> <input type="button" class='button' onclick="insert(6)" value="6"> <input type="button" class='button' onclick="insert('-')" value="-"> </td> </tr> <tr> <td> <input type="button" class='button' onclick="insert(1)" value="1"> <input type="button" class='button' onclick="insert(2)" value="2"> <input type="button" class='button' onclick="insert(3)" value="3"> <input type="button" class='button' onclick='equal()' value="="> </td> </tr> <tr> <td> <input type="hidden"> <input type='button' value='0' onclick="insert(0)" class='button' id='n0'> <input type='button' value='.' onclick="insert('.')" class='button' id='n0'> </td> </tr> </form> </div> </div> </body> </html> (CSS): *{ padding: 0; margin: 0; } #title{ font-family: Arial, Helvetica, sans-serif; font-size: 20px; margin: 0px; } .main{ margin: 0 auto; } #n0{ margin-left: 54px; } .button{ width: 50px; height: 50px; font-size: 25px; margin: 2; } .textview{ width: 211px; height: 30px; } (JavaScript): function insert(num){ document.form.textview.value = document.form.textview.value + num; } function equal(){ exp = document.form.textview.value; if(exp){ document.form.textview.value = eval(exp); } } function c(){ document.form.textview.value = ""; } function back(){ var exp = document.form.textview.value; document.form.textview.value = exp.substring(0, exp.length-1); }
Colocando áudio em sua página HTML
Capturando o nome do browser, vesão, código e plataforma do visitante
Nenhum comentário foi encontrado.
Enviar mensagem ao usuário trabalhando com as opções do php.ini
Meu Fork do Plugin de Integração do CVS para o KDevelop
Compartilhando a tela do Computador no Celular via Deskreen
Como Configurar um Túnel SSH Reverso para Acessar Sua Máquina Local a Partir de uma Máquina Remota
Configuração para desligamento automatizado de Computadores em um Ambiente Comercial
Compartilhamento de Rede com samba em modo Público/Anônimo de forma simples, rápido e fácil
Cups: Mapear/listar todas as impressoras de outro Servidor CUPS de forma rápida e fácil
Criando uma VPC na AWS via CLI
Arch Linux - Guia para Iniciantes (2)
Problemas ao instalar o PHP (11)
Tem como instalar o gerenciador AMD Adrenalin no Ubuntu 24.04? (15)
Tenho dois Link's ( IP VÁLIDOS ), estou tentando fazer o failover... (0)