Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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"; }}
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!!!
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:
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!!!