Calculadora em JavaScript e HTML/CSS
Publicado por Luis Felipe Almeida Vieira (última atualização em 28/04/2019)
[ Hits: 27.596 ]
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); }
Inserindo arquivo .JS na página
283 Script Úteis em JavaScript para um amplo estudo!
JSOO - JavaScript Orientado a Objeto
Nenhum comentário foi encontrado.
Atualizar o macOS no Mac - Opencore Legacy Patcher
Crie alias para as tarefas que possuam longas linhas de comando - bash e zsh
Criando um gateway de internet com o Debian
Configuração básica do Conky para mostrar informações sobre a sua máquina no Desktop
Aprenda a criar músicas com Inteligência Artificial usando Suno AI
Instalando e usando o Dconf Editor, o "regedit" para Linux
Como instalar o navegador TOR no seu Linux
Instalando Zoom Client no Ubuntu 24.04 LTS
Encriptografa... as particoes com LUKS, o que poderia dar errado? (0)
Qual a relevancia dos valores de bogomips com os Mhz e Ghz[DUVIDA] (2)