Calculadora em JavaScript/CSS

28 de setembro de 2008 15 respostas

rdof_81 28 de setembro de 2008

Criei uma calculadora em JavaScript e CSS, esou divulgando aki p auxiliar no material de estudos e tb para comentários q saum tds bem vindos, inclusive críticas.

Abçs a Tds

<html><head><title>Calculadora</title></head><body>
<script type="text/javascript">
<!--
	var Accum = 0;
	var FlagNewNum = false;
	var PendingOp = "";	

	//Abaixo estamos adcionando os valores de cada botão ao parametro Num
	function NumPressed(Num) {
		if (FlagNewNum) {
			document.frm_calc.txt_01.value  = Num;
			FlagNewNum = false;
   		}
		else {
			if (document.frm_calc.txt_01.value == "0")
				document.frm_calc.txt_01.value = Num;
			else
				document.frm_calc.txt_01.value += Num;
   		}
	}

	//Valores de exibição quando apertado o botão igual
	function Operation(Op) {
		if (document.frm_calc.txt_01.value == ""){
			alert("O Campo esta vázio digite um valor");
			document.frm_calc.txt_01.value ="0"; }
		else{
			if (FlagNewNum && PendingOp != "=");
			else	{
				FlagNewNum = true;
				if ( '+' == PendingOp )
					Accum += parseFloat(document.frm_calc.txt_01.value);
					else if ( '-' == PendingOp )
					Accum -= parseFloat(document.frm_calc.txt_01.value);
					else if ( '/' == PendingOp )
					Accum /= parseFloat(document.frm_calc.txt_01.value);
					else if ( '*' == PendingOp )
					Accum *= parseFloat(document.frm_calc.txt_01.value);
				else
					Accum = parseFloat(document.frm_calc.txt_01.value);
					document.frm_calc.txt_01.value = Accum;
					PendingOp = Op;
			}
   		}
	}

	//Atribuindo o ponto( . ) aos valores numéricos
	function Ponto() {
		var curtxt_01 = document.frm_calc.txt_01.value;
		if (FlagNewNum) {
			curtxt_01 = "0.";
			FlagNewNum = false;
   		}
		else {
		if (curtxt_01.indexOf(".") == -1)
			curtxt_01 += ".";
   		}
		document.frm_calc.txt_01.value = curtxt_01;
	}
-->
</script>
<form name="frm_calc" acton>
<center>
<table width="200" cellpadding="3" cellspacing="5" style="color:#FFB90F; background-color:#000000; border:2pt solid#FFB90F">
	<tr>
	<td colspan="5"align="Center" bgColor="#FFB90F"><Font Face="Verdana" Size="4" Color="#000000"><b>Calculadora</b></font></td>
	</tr>
	<tr>
	<td colspan="3" align="center" border:2pt solid#FFB90F><input type="text" name="txt_01" value="0" style="color:#000000; background-color:#CFCFCF;border:2pt solid#FFB90F"></td>
	<td><center><input type="reset" value="AC" onclick="" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="=" name="btn_igual" onclick="Operation('=')" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	</tr>
	<tr>
	<td><center><input type="button" value="7" name="btn_7" onclick="NumPressed(7)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="8" name="btn_8" onclick="NumPressed(8)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="9" name="btn_9" onclick="NumPressed(9)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="+" name="btn_soma" onclick="Operation('+')" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="-" name="btn_subt" onclick="Operation('-')" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	</tr>
	<tr>
	<td><center><input type="button" value="4" name="btn_4" onclick="NumPressed(4)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="5" name="btn_5" onclick="NumPressed(5)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="6" name="btn_6" onclick="NumPressed(6)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="*" name="btn_mult" onclick="Operation('*')" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="/" name="btn_divi" onclick="Operation('/')" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	</tr>
	<tr>
	<td><center><input type="button" value="1" name="btn_1" onclick="NumPressed(1)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="2" name="btn_2" onclick="NumPressed(2)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="3" name="btn_3" onclick="NumPressed(3)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="0" name="btn_0" onclick="NumPressed(0)" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	<td><center><input type="button" value="." name="btn_pont" onclick="Ponto()" style="color:#FFB90F; background-color:#000000; cursor:hand; padding:9px; border:0"></center></td>
	</tr>
</table>
</form></center>
</body>
</html>

15 Respostas

wbdsjunior 29 de set. de 2008

Caro rdof_81!

Meus parabéns.

Apenas um detalhe importante… A tags e da HTML cairam em desuso… use as propriedades color, font e text-align do css.

Abraço.

rdof_81 29 de set. de 2008

Valeu wbdsjunior mt obrigado…

Valeu pela dica, mt obrigado msm…

Continuem postando…

Abrçs

rdof_81 8 de out. de 2008

Próximo passo uma calculadora científica, alguém tem uma base?

Abrçs

rdof_81 15 de out. de 2008

Mt obrigado a tds pelo apoio…

bbmany 16 de out. de 2008

Digamos que possua uma página em JSP com um botão-link para chamar a calculadora. O preciso fazer para que ela seja aberta em uma poup-up???

bbmany 16 de out. de 2008

Resposta à minha pergunta
Em uma página criamos a função popup() em JavaScript que ira chamar a página com a calculadora:

<script languague="javascript"> function popup(){ window.open('Calc.html','popup','width=230,height=230,scrolling=no,top=1,left=1') } </script>
Depois criamos um link chamando a função popup:

Essa foi uma das formas que encontrei.
Inté.

thiago_rainmaker 16 de out. de 2008

kara, legal, mas tenta manter o arquivo css separado do html
tipo assim css fica responsavel só por formatação, arquivo js fica responsavel so pelo comportamento e o arquivo html so pela informação …
assim o seu código vai ficar mais limpo e facil de entender,

mas ficou massa man… isso ai

bbmany 16 de out. de 2008

Olá thiago_rainmaker, será que você poderia nos ajudar a remodelar a estrutura?

thiago_rainmaker 16 de out. de 2008

testei aqui sua calculadora na minha máquina e esta dando incompatibilidade.
estou usando o firefox 3 e o SO ubuntu,
prometo postar um modelo de calculadora nos padrões que t falei até o final da semana, mas vam algumas dicas ai
a recomendação da W3C é q so se use tabelas para dados tabelares, com relação ao css seria mais ou menos assim , vc cria uma folha de estilos style.css, nesse arquivo vao ficar todas as suas formatações ( tamanhos, cores … ), vc vai criar no html classe para representar seus elementos input e no css vc vai criar uma chamada para essa classe, assim n vai precisar ficar repetindo cor e tamanho toda vez q for colocar um imput, e tb n vai ficar enchendo seu código html de formatação.
esse sistema tem várias vantagens alem do carregamento ficar mais dinamico, caso você queira mudar as formatações da sua aplicação , essa tarefa se torna mais simples pois se quiser mudar a cor de todos os input’s vai mudar em um único lugar, facilita sua vida rs

bom , hj anoite quando tiver para fazer posto uma calculadora com JS, DOM, HTML e CSS nos padrões q t disse

flwwww

doug 16 de out. de 2008

Olá
Estou vendo que vc´s estão desenvolvendo uma calculadora…
Talvez vale a pena adicionar o plugin do mozilla chamado firebug… ele detecta
alguns errinhos de css ou de javascript… pode ser até isso que tenha como pegar esse causador da incompatibilidade… vou baixar o código em breve volto a comentar!!

Espero ter ajudado
Flwsss

thiago_rainmaker 18 de out. de 2008

como prometido ai vai o código da calculadora

código HTML da calculadora

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
&lt;title&gt;.:: Calculadora  ::.&lt;/title&gt;
&lt;!-- Chamada para a folha de estilos --&gt;
&lt;link href="style.css" type="text/css" rel="stylesheet" /&gt;
&lt;!-- Chamada para o arquivo JS --&gt;
&lt;script type="text/ecmascript" src="functions.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;form action="#" method="post" id="formulario"&gt;
	&lt;div id="geral"&gt;
        &lt;div id="visao"&gt;
            &lt;input type="text" id="operacao" /&gt;
            &lt;input type="text" id="num" /&gt;<br />
            &lt;input type="text"  class="tela" id="visor" /&gt;
        &lt;/div&gt;
        <br />
        &lt;input type="button" value="CE" onclick="limpar()" class="btn" /&gt;<br />
        &lt;input type="button" value="1" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="2" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="3" onclick="setValue(value)"class="btn" /&gt;
        &lt;input type="button" value="+" onclick="cont(value)" class="btn" /&gt;<br />
        &lt;input type="button" value="4" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="5" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="6" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="-" onclick="cont(value)" class="btn" /&gt;<br />
        &lt;input type="button" value="7" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="8" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="9" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="*" onclick="cont(value)"  class="btn" /&gt;<br />
        &lt;input type="button" value="0" onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="." onclick="setValue(value)" class="btn" /&gt;
        &lt;input type="button" value="/" onclick="cont(value)" class="btn" /&gt;
        &lt;input type="button" value="=" onclick="exe()" class="btn" /&gt;
	&lt;/div&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;

Código CSS Arquivo style.css

/*
 Desenvolvido por Thiago Fernandes	
 [email removido] - [email removido]
*/
#formulario{
	background:url(img/bg.gif);
	width:200px;
	height:250px;
}
.btn{
	width:40px;
}
.tela{
	width:155px;
	text-align: right;
}
#operacao{
	width:20px;
	height:10px;
	font-size:10px;
}
#num{
	width:130px;
	text-align:right;
	height:10px;
	font-size:10px;
}
#geral{
	margin-top:20px;
	margin-left:10px;
}
#visao{
	background:url(img/visor.gif);
	width:175px;
	margin-top:15px;
	float:left;
	height:50px;
}
#visao input{
	border:0px;
	margin-left:5px;	
}

comportamento da calculadora - arquivo Function.js

/*
 Desenvolvido por Thiago Fernandes	
 [email removido] - [email removido]
*/
function setValue(value){
	obj = document.getElementById('visor');
	obj.value = obj.value+value;
}
function limpar(){
	obj = document.getElementById('visor');	
	obj.value = '';
}
function cont(value){
	obj = document.getElementById('visor');
	objNum = document.getElementById('num');
	objOperacao = document.getElementById('operacao');
	objNum.value = obj.value;
	obj.value = '';
	objOperacao.value = value;
}
function exe(){
	obj = document.getElementById('visor');
	objNum = document.getElementById('num');
	objOperacao = document.getElementById('operacao');
	switch (objOperacao.value){
		case "+":
			result = parseFloat(obj.value) + parseFloat(objNum.value);
		break;
		case "-":
			result = parseFloat(objNum.value) - parseFloat(obj.value);
		break;
		case "*":
			result = parseFloat(obj.value)*parseFloat(objNum.value);
		break;
		case "/":
			result = parseFloat(objNum.value)/parseFloat(obj.value);
		break;
	}
	objNum.value = '';
	objOperacao.value = '';
	obj.value = result;
}

eu criei uma pasta de imagens com o nome img e coloquei mais duas imagens para deixar a calculadora mais styleeeee

nao da pra enviar por aki, mas quem tiver quiser, manda um e-mail [email removido] q eu envio o arquivo .zip

observe q se vc quiser mecher o estilo da calculadora , vai mecher so no style.css, se vc quer mecher na funcionabilidade dela vai mecher so no functions.css, e o código html fica bem mais limpo, somente com o form e nada mais… isso facilita muito a vida em projetos grandes…
flw um abraço pra vc´s

bbmany 18 de out. de 2008

Muito obrigada Thiago.
É sempre muito bom aprender novas formas e padrões de desenvolvimento.

PS.: Aguardo as imagens para visualizar o “produto” final.

marcosalex 18 de out. de 2008

renatosilva 19 de out. de 2008

Fiz uma em 2002…

cacha 21 de out. de 2008

saudaçoes…
pow show d bola cara…
eu sou iniciante e javascript…
teria como vc me ajudar fazer uma agenda telefonica?

Criado 28 de setembro de 2008

Ultima resposta 21 de out. de 2008

Respostas 15

Participantes 8

15 Respostas

Topicos relacionados