Calculadora básica en HTML



Codigo
calculadora.html
<!DOCTYPE html>
<html lang="es">
<head><meta charset="utf-8">
 <title>Calculadora</title>
</head>
<body bgcolor="DBFC95">
 <form name="calculator">
  <table bordercolor="green" border='3' width="200" align="center" bgcolor="A9DCDA">
   <tr>
    <td>
     </center>
     <fieldset style="border:2px groove #ccc; background:#A9DCDA;">
      <legend>
       <b>CALCULADORA BASICA</b>
      </legend>
      <input type="textfield" name="ans" value="" style='width:147px; height:25px'>
      <br>
      <input style='width:35px; height:35px' type="button" value="1" onClick="document.calculator.ans.value+='1'"/>
      <input style='width:35px; height:35px' type="button" value="2" onClick="document.calculator.ans.value+='2'"/>
      <input style='width:35px; height:35px' type="button" value="3" onClick="document.calculator.ans.value+='3'"/>
      <input style='width:35px; height:35px' type="button" value="+" onClick="document.calculator.ans.value+='+'"/>
      <br>
      <input style='width:35px; height:35px' type="button" value="4" onClick="document.calculator.ans.value+='4'"/>
      <input style='width:35px; height:35px' type="button" value="5" onClick="document.calculator.ans.value+='5'"/>
      <input style='width:35px; height:35px' type="button" value="6" onClick="document.calculator.ans.value+='6'"/>
      <input style='width:35px; height:35px' type="button" value="-" onClick="document.calculator.ans.value+='-'"/>
      <br>
      <input style='width:35px; height:35px' type="button" value="7" onClick="document.calculator.ans.value+='7'"/>
      <input style='width:35px; height:35px' type="button" value="8" onClick="document.calculator.ans.value+='8'"/>
      <input style='width:35px; height:35px' type="button" value="9" onClick="document.calculator.ans.value+='9'"/>
      <input style='width:35px; height:35px' type="button" value="*" onClick="document.calculator.ans.value+='*'"/>
      <br>
      <input style='width:35px; height:35px' type="button" value="0" onClick="document.calculator.ans.value+='0'"/>
      <input style='width:35px; height:35px; color:#FF3604' type="reset" value="C">
      <input style='width:35px; height:35px' type="button" value="." onClick="document.calculator.ans.value+='.'"/>
      <input style='width:35px; height:35px' type="button" value="/" onClick="document.calculator.ans.value+='/'"/>
      <br>
      <input style='width:151px; height:35px; margin-left:-4px;' type="button" value="=" onClick="document.calculator.ans.value=eval(document.calculator.ans.value)"/> 
     </fieldset>
     </center> 
    </td>
   </tr>
  </table>
 </form>
</body>
</html>

Puedes Visualizarla AQUI

0 comentarios: