Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Shivans

Calculadora

Por , em Javascript

Recommended Posts

Shivans    0

Shivans
Postado

nao sei como atribuir os numeros? como eu faco?

oia o codigo ai!!!

 

HTML

 

<html><head><title></title><link rel="stylesheet" type="text/css" href="calc.css"><script language="javascript" src="calc.js"></head><body onLoad="onOff();"><form name="form_calcula"><table cellpadding="0" cellspacing="0" border="4" align="center"><tr><td><table width="100" cellpadding="2" cellspacing="0" bgcolor="#2F4F4F"><tr>  <td colspan="100%" height="20" align="center"><input type="text" name="visor" class="visor" readonly></td></tr><tr>  <td colspan="2"><input type="button" name="onoff" value="Off" class="botaoLargo" onClick="onOff();"></td>  <td colspan="2"><input type="button" name="botC" value="C" class="botaoLargo"></td></tr><tr>  <td align="center"><input type="button" name="bot7" value="7" class="botao"></td>  <td align="center"><input type="button" name="bot8" value="8" class="botao"></td>  <td align="center"><input type="button" name="bot9" value="9" class="botao"></td>  <td align="center"><input type="button" name="botD" value="%" class="botao"></td></tr><tr>  <td align="center"><input type="button" name="bot4" value="4" class="botao"></td>  <td align="center"><input type="button" name="bot5" value="5" class="botao"></td>  <td align="center"><input type="button" name="bot6" value="6" class="botao"></td>  <td align="center"><input type="button" name="botM" value="x" class="botao"></td></tr><tr>  <td align="center"><input type="button" name="bot1" value="1" class="botao"></td>  <td align="center"><input type="button" name="bot2" value="2" class="botao"></td>  <td align="center"><input type="button" name="bot3" value="3" class="botao"></td>  <td align="center"><input type="button" name="botS" value="-" class="botao"></td></tr><tr>  <td align="center"><input type="button" name="bot0" value="0" class="botao"></td>  <td align="center"><input type="button" name="botP" value="." class="botao"></td>  <td align="center"><input type="button" name="botI" value="=" class="botao"></td>  <td align="center"><input type="button" name="botA" value="+" class="botao"></td></tr></table></td></tr></table></form></body></html>
CSS

 

.botao{width: 100px;height: 40px;}.botaoLargo{width: 150px;height: 30px;}.visorOn{width: 350px;height: 30px;background-color: #5F9EA0;border: 2px;}.visorOff{width: 350px;height: 30px;background-color: #000;border: 2px;}
JavaScript

 

function onOff(){  if(document.form_calcula.onoff.value == "On"){     document.form_calcula.onoff.value = "Off";     document.form_calcula.bot1.disabled = false;     document.form_calcula.bot2.disabled = false;     document.form_calcula.bot3.disabled = false;     document.form_calcula.bot4.disabled = false;     document.form_calcula.bot5.disabled = false;     document.form_calcula.bot6.disabled = false;     document.form_calcula.bot7.disabled = false;     document.form_calcula.bot8.disabled = false;     document.form_calcula.bot9.disabled = false;     document.form_calcula.bot0.disabled = false;     document.form_calcula.botP.disabled = false;     document.form_calcula.botA.disabled = false;     document.form_calcula.botS.disabled = false;     document.form_calcula.botM.disabled = false;     document.form_calcula.botD.disabled = false;     document.form_calcula.botC.disabled = false;     document.form_calcula.botI.disabled = false;     document.form_calcula.visor.className = "visorOn";  }else{     document.form_calcula.onoff.value = "On";     document.form_calcula.bot1.disabled = true;     document.form_calcula.bot2.disabled = true;     document.form_calcula.bot3.disabled = true;     document.form_calcula.bot4.disabled = true;     document.form_calcula.bot5.disabled = true;     document.form_calcula.bot6.disabled = true;     document.form_calcula.bot7.disabled = true;     document.form_calcula.bot8.disabled = true;     document.form_calcula.bot9.disabled = true;     document.form_calcula.bot0.disabled = true;     document.form_calcula.botP.disabled = true;     document.form_calcula.botA.disabled = true;     document.form_calcula.botS.disabled = true;     document.form_calcula.botM.disabled = true;     document.form_calcula.botD.disabled = true;     document.form_calcula.botC.disabled = true;     document.form_calcula.botI.disabled = true;     document.form_calcula.visor.className = "visorOff";  }}

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Amigo, primeiro cria uma id para o texto que você quer que o valor seje atribuido assim

 

<input type="text" name="visor" id="visor" class="visor" readonly>

depois crie uma função em JS como esta

 

function atribui(numero) {	var valor = document.getElementById('visor').value;	valor += numero;	document.getElementById('visor').value = valor;}

por fim, no evento clique do botão envie o valor que você quer

 

<input type="button" name="bot1" value="1" class="botao" onClick="atribui('1');">

Faça isso para todos seus botões

 

Valeu!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Shivans    0

Shivans
Postado

ok agora preciso atribuir funcoes nela do tipo soma subtracao divisao e multiplicacao

e o arquivo tem que ficar separado como faco isso???

 

 

css style

.botao{width: 100px;height: 40px;}.botaoLargo{width: 150px;height: 30px;}.visorOn{width: 350px;height: 30px;background-color: #5F9EA0;border: 2px;}.visorOff{width: 350px;height: 30px;background-color: #000;border: 2px;}

function onoff

 

function onOff(){  if(document.form_calcula.onoff.value == "On"){	 document.form_calcula.onoff.value = "Off";	 document.form_calcula.bot1.disabled = false;	 document.form_calcula.bot2.disabled = false;	 document.form_calcula.bot3.disabled = false;	 document.form_calcula.bot4.disabled = false;	 document.form_calcula.bot5.disabled = false;	 document.form_calcula.bot6.disabled = false;	 document.form_calcula.bot7.disabled = false;	 document.form_calcula.bot8.disabled = false;	 document.form_calcula.bot9.disabled = false;	 document.form_calcula.bot0.disabled = false;	 document.form_calcula.botP.disabled = false;	 document.form_calcula.botA.disabled = false;	 document.form_calcula.botS.disabled = false;	 document.form_calcula.botM.disabled = false;	 document.form_calcula.botD.disabled = false;	 document.form_calcula.botC.disabled = false;	 document.form_calcula.botI.disabled = false;	 document.form_calcula.visor.className = "visorOn";  }else{	 document.form_calcula.onoff.value = "On";	 document.form_calcula.bot1.disabled = true;	 document.form_calcula.bot2.disabled = true;	 document.form_calcula.bot3.disabled = true;	 document.form_calcula.bot4.disabled = true;	 document.form_calcula.bot5.disabled = true;	 document.form_calcula.bot6.disabled = true;	 document.form_calcula.bot7.disabled = true;	 document.form_calcula.bot8.disabled = true;	 document.form_calcula.bot9.disabled = true;	 document.form_calcula.bot0.disabled = true;	 document.form_calcula.botP.disabled = true;	 document.form_calcula.botA.disabled = true;	 document.form_calcula.botS.disabled = true;	 document.form_calcula.botM.disabled = true;	 document.form_calcula.botD.disabled = true;	 document.form_calcula.botC.disabled = true;	 document.form_calcula.botI.disabled = true;	 document.form_calcula.visor.className = "visorOff";  }}

function atribui

 

function atribui(numero) {	var valor = document.getElementById('visor').value;	valor += numero;	valor -= numero;	document.getElementById('visor').value = valor;	}

calcula.html

 

<html><head><title></title><link rel="stylesheet" type="text/css" href="calc.css"><script language="javascript" src="calc.js"><script language="javascript" src="func.js"></head><body onLoad="onOff();"><form name="form_calcula"><table cellpadding="0" cellspacing="0" border="4" align="center"><tr><td><table width="100" cellpadding="2" cellspacing="0" bgcolor="#2F4F4F"><tr>  <td colspan="100%" height="20" align="center">  <input type="text" name="visor" id="visor" class="visor" readonly></td></tr><tr>  <td colspan="2"><input type="button" name="onoff" value="Off" class="botaoLargo" onClick="onOff();"></td>  <td colspan="2"><input type="button" name="botC" value="C" class="botaoLargo" ></td></tr><tr>   <td align="center"><input type="button" name="bot7" value="7" class="botao" onClick="atribui('7');"></td>  <td align="center"><input type="button" name="bot8" value="8" class="botao" onClick="atribui('8');"></td>  <td align="center"><input type="button" name="bot9" value="9" class="botao" onClick="atribui('9');"></td>  <td align="center"><input type="button" name="botD" value="%" class="botao" onClick="atribui('%');"></td></tr><tr>  <td align="center"><input type="button" name="bot4" value="4" class="botao" onClick="atribui('4');"></td>  <td align="center"><input type="button" name="bot5" value="5" class="botao" onClick="atribui('5');"></td>  <td align="center"><input type="button" name="bot6" value="6" class="botao" onClick="atribui('6');"></td>  <td align="center"><input type="button" name="botM" value="x" class="botao" onClick="atribui('x');"></td></tr><tr>  <td align="center"><input type="button" name="bot1" value="1" class="botao" onClick="atribui('1');"></td>  <td align="center"><input type="button" name="bot2" value="2" class="botao" onClick="atribui('2');"></td>  <td align="center"><input type="button" name="bot3" value="3" class="botao" onClick="atribui('3');"></td>  <td align="center"><input type="button" name="botS" value="-" class="botao" onClick="atribui('-');"></td></tr><tr>  <td align="center"><input type="button" name="bot0" value="0" class="botao" onClick="atribui('0');"></td>  <td align="center"><input type="button" name="botP" value="." class="botao" onClick="atribui('.');"></td>  <td align="center"><input type="button" name="botI" value="=" class="botao" onClick="atribui('=');"></td>  <td align="center"><input type="button" name="botA" value="+" class="botao" onClick="atribui('+');"></td></tr></table></td></tr></table></form></body></html>

aonde e como eu coloca funcoes??? deixando num arquivo externo... nao entendi nada!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Edultra    13

Edultra
Postado

Apos criar a função de soma utilize if e else para selecionar as outras funções, utilizei uma vez para fazer uma calculadora com prompt, outro jeito que seria mais facil de fazer para formulario criar uma função calcula bem simples, neste link exemplifica como se faz:

 

http://www.criarweb.com/artigos/352.php

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito