Calculadora em JavaScript e HTML/CSS
Publicado por Luis Felipe Almeida Vieira (última atualização em 28/04/2019)
[ Hits: 28.092 ]
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); }
Tabela com efeito Hover em JavaScript
Mostrar e Esconder DIV com HTML, JavaScript e CSS
HTA - HTML Application Um exemplo com todas as propriedades
Nenhum coment�rio foi encontrado.
Atualizando o Passado: Linux no Lenovo G460 em 2025
aaPanel - Um Painel de Hospedagem Gratuito e Poderoso
O macete do Warsaw no Linux Mint e cia
Visualizar arquivos em formato markdown (ex.: README.md) pelo terminal
Dando - teoricamente - um gás no Gnome-Shell do Arch Linux
Como instalar o Google Cloud CLI no Ubuntu/Debian
Mantenha seu Sistema Leve e Rápido com a Limpeza do APT!
Procurando vídeos de YouTube pelo terminal e assistindo via mpv (2025)
O 1º artigo a gente nunca esquece (1)
Pastas da raiz foram para a área de trabalho [RESOLVIDO] (9)
Problema ao atualizar archlinux nvidia [RESOLVIDO] (3)