Calculadora em JavaScript e HTML/CSS
Publicado por Luis Felipe Almeida Vieira (última atualização em 28/04/2019)
[ Hits: 27.562 ]
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
JSOO - JavaScript Orientado a Objeto
Script de um programa de HTML em java
Nenhum comentário foi encontrado.
Agora temos uma assistente virtual no fórum!!! (247)
Manutenção de sistemas Linux Debian e derivados com apt-get, apt, aptitude e dpkg
Melhorando o tempo de boot do Fedora e outras distribuições
Como instalar as extensões Dash To Dock e Hide Top Bar no Gnome 45/46
Como Atualizar Fedora 39 para 40
Instalar Google Chrome no Debian e derivados
Consertando o erro do Sushi e Wayland no Opensuse Leap 15
Instalar a última versão do PostgreSQL no Lunix mantendo atualizado
Flathub na sua distribuição Linux e comandos básicos de gerenciamento