Visualización
Explicación
Se trata de una calculadora realizada en la web con elementos html js y css completamente funcional, que actúa como una de sobremesa, con la diferencia,a demás, que se puede clicar y mover por la página al antojo del usuario, a parte de hacerla aparecer y desaparecer clicando los botones.
HTML
<!DOCTYPE html>
<html lang="es">
<head>
<title>Calculadora</title>
<meta content="text/html; charset=iso-8859-1">
<meta name="Description" content="Una caqlculadora elaborada con javascript">
<LINK REL="stylesheet" HREF="calculadora.css" TYPE="text/css">
<SCRIPT src="jquery-1.10.2.js"></script>
<script src="jquery-ui.js"></script>
<script src="main.js"></script>
<scriptsrc="jquery-1.9.0.js"></script>
<script>
$(function() {
$( "#draggable" ).draggable();
});
$(document).ready(function(){
$('.fade').click(function(){
$('#contenido').toggle('fade',1500);
});
$('.explode').click(function(){
$('#contenido').toggle('explode',1500);
});
});
</script>
</head>
<body>
<div><button class="fade">Desvanecer</button><button class="explode">Explotar</button></div>
<div id="draggable">
<div id="contenido" style="display:none;">
<FORM id="calculadora" NAME="Calc">
<input class="escribir" type="text" name="dato" value=0 readonly="readonly" name="ver"/>
<img class="imagen1" src="8.png" alt="numero8">
<img class="imagen2" src="4.png" alt="numero4">
<table>
<tr>
<th><INPUT class="teclas" TYPE="button" NAME="1" VALUE=" 1 " OnClick="Calc.dato.value += '1'"></th>
<th><INPUT class="teclas" TYPE="button" NAME="2" VALUE=" 2 " OnCLick="Calc.dato.value += '2'"></th>
<th><INPUT class="teclas" TYPE="button" NAME="3" VALUE=" 3 " OnClick="Calc.dato.value += '3'"></th>
<th><INPUT class="operador" TYPE="button" NAME="+" VALUE=" + " OnClick="Calc.dato.value += ' + '"></th>
</tr>
<tr>
<th><INPUT class="teclas" TYPE="button" NAME="4" VALUE=" 4 " OnClick="Calc.dato.value += '4'"></th>
<th><INPUT class="teclas" TYPE="button" NAME="5" VALUE=" 5 " OnCLick="Calc.dato.value += '5'"></th>
<th><INPUT class="teclas" TYPE="button" NAME="6" VALUE=" 6 " OnClick="Calc.dato.value += '6'"></th>
<th><INPUT class="operador" TYPE="button" NAME="-" VALUE=" - " OnClick="Calc.dato.value += ' - '"></th>
</tr>
<tr>
<th><INPUT class="teclas" TYPE="button" NAME="7" VALUE=" 7 " OnClick="Calc.dato.value += '7'"></th>
<th><INPUT class="teclas" TYPE="button" NAME="8" VALUE=" 8 " OnCLick="Calc.dato.value += '8'"></th>
<th><INPUT class="teclas" TYPE="button" NAME="9" VALUE=" 9 " OnClick="Calc.dato.value += '9'"></th>
<th><INPUT class="operador" TYPE="button" NAME="*" VALUE=" x " OnClick="Calc.dato.value += ' * '"></th>
</tr>
<tr>
<th><INPUT class="botoncillo" class="limpiar" TYPE="button" NAME="limpiar" VALUE=" c " OnClick="Calc.dato.value = ''"></th>
<th><INPUT class="teclas"TYPE="button" NAME="0" VALUE=" 0 " OnClick="Calc.dato.value += '0'"></th>
<th><INPUT class="botoncillo" TYPE="button" NAME="=" VALUE=" = " OnClick="Calc.dato.value = eval(Calc.dato.value)"></th>
<th><INPUT class="operador" TYPE="button" NAME="/" VALUE=" / " OnClick="Calc.dato.value += ' / '"></th>
</tr>
</table>
</FORM>
</div>
</div>
</body>
</html>
CSS
body {
font-family: sans-serif;
text-align:center;
}
#calculadora {
font: bold 14px Arial,sans-serif;
background-color: #9DD2EA;
border-radius: 3px;
height: 500px;
padding: 20px;
width: 302px;
position: relative;
top:300px;
left:300px;
}
.teclas{
background-color: #FFFFFF;
border-radius: 3px;
color: #888888;
cursor: pointer;
float: left;
height: 36px;
line-height: 0px;
margin: 0 7px 11px 0;
text-align: center;
transition: all 0.4s ease 0s;
width: 66px;
border:0px;
font: bold 14px Arial,sans-serif;
}
.operador {
background-color: #FFDAB9;
margin-right: 0;
border-radius: 3px;
width: 66px;
height: 36px;
line-height: 0px;
border:0px;
margin: 0 7px 11px 0;
font: bold 14px Arial,sans-serif;
cursor: pointer;
}
.escribir{
text-align:right;
width: 200px;
height: 50px;
border-radius: 3px;
border:0px;
background-color: #E0F8E0;
font: bold 14px Arial,sans-serif;
}
.botoncillo{
background-color: #F3F781;
margin-right: 0;
border-radius: 3px;
width: 66px;
height: 36px;
line-height: 0px;
border:0px;
margin: 0 7px 11px 0;
font: bold 14px Arial,sans-serif;
cursor: pointer;
}
table{
width:320px;
height:320px;
margin-top: 50px;
padding-right:300px;
}
.imagen1{
position: absolute;
top:440px;
left: 150px;
}
.imagen2{
position: absolute;
top:80px;
}
.teclas:hover {
background: #F2F5A9 ;
}
.botoncillo:hover {
background: #F2F5A9 ;
}
.operador:hover {
background: #F2F5A9 ;
}
#draggable {
width: 302px;
height: 500px;
padding: 0.5em;
border:1px;
}
#contenido{
border-radius: 20px;
height: 500px;
opacity: 0.9;
display:none;
}
JS
No lo adjunto, por ser excesivamente largo, pero se puede encontrar en éstas páginas
http://codigos-taz.blogspot.com.es/2013/02/efecto-aparecer-y-desaparecer-un-div.html
http://codigos-taz.blogspot.com.es/2013/02/efecto-aparecer-y-desaparecer-un-div.html
No hay comentarios:
Publicar un comentario