Calculadora em JavaScript e HTML/CSS
Publicado por Luis Felipe Almeida Vieira (última atualização em 28/04/2019)
[ Hits: 28.305 ]
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);
}
tremer o browser quando o visitante acessar seu site
Nenhum comentário foi encontrado.
Patrocínio
Destaques
Artigos
Cirurgia para acelerar o openSUSE em HD externo via USB
Void Server como Domain Control
Modo Simples de Baixar e Usar o bash-completion
Monitorando o Preço do Bitcoin ou sua Cripto Favorita em Tempo Real com um Widget Flutuante
Dicas
Como quebrar senha usando john the ripper
[Resolvido] VirtualBox can't enable the AMD-V extension
Como verificar a saúde dos discos no Linux
Como instalar , particionar, formatar e montar um HD adicional no Linux?
Tópicos
queria saber como posso alterar a frequencia do meu ryzen 2300u pro (3)
Não consigo instalar distro antiga no virtualbox nem direto no hd (22)
Top 10 do mês
-
Xerxes
1° lugar - 148.077 pts -
Fábio Berbert de Paula
2° lugar - 69.204 pts -
Mauricio Ferrari
3° lugar - 21.924 pts -
Buckminster
4° lugar - 20.213 pts -
Alberto Federman Neto.
5° lugar - 19.764 pts -
edps
6° lugar - 19.349 pts -
Daniel Lara Souza
7° lugar - 19.234 pts -
Andre (pinduvoz)
8° lugar - 17.860 pts -
Alessandro de Oliveira Faria (A.K.A. CABELO)
9° lugar - 16.321 pts -
Diego Mendes Rodrigues
10° lugar - 14.301 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:
