Calculadora em JavaScript e HTML/CSS
Publicado por Luis Felipe Almeida Vieira (última atualização em 28/04/2019)
[ Hits: 28.080 ]
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);
}
283 Script Úteis em JavaScript para um amplo estudo!
Nenhum coment�rio foi encontrado.
Patrocínio
Destaques
Artigos
Aprenda a Gerenciar Permissões de Arquivos no Linux
Como transformar um áudio em vídeo com efeito de forma de onda (wave form)
Como aprovar Pull Requests em seu repositório Github via linha de comando
Dicas
Quebra de linha na data e hora no Linux Mint
Organizando seus PDF com o Zotero
Tópicos
tentando instalar em um notebook antigo o Linux LegacyOS_2023... [RESO... (8)
Problema com Conexão Outlook via Firewall (OpenSUSE) com Internet Fibr... (5)
Top 10 do mês
-
Xerxes
1° lugar - 76.846 pts -
Fábio Berbert de Paula
2° lugar - 62.881 pts -
Mauricio Ferrari
3° lugar - 18.488 pts -
Buckminster
4° lugar - 17.321 pts -
Alberto Federman Neto.
5° lugar - 15.509 pts -
Daniel Lara Souza
6° lugar - 14.783 pts -
edps
7° lugar - 14.316 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
8° lugar - 13.543 pts -
Diego Mendes Rodrigues
9° lugar - 13.539 pts -
Andre (pinduvoz)
10° lugar - 10.906 pts
Scripts
A maior comunidade GNU/Linux da América Latina! Artigos, dicas, tutoriais, fórum, scripts e muito mais. Ideal para quem busca auto-ajuda.
Site hospedado por:
