Foros aprenderaprogramar.com
Aprender a programar => C, C++, C#, Java, Visual Basic, HTML, PHP, CSS, Javascript, Ajax, Joomla, MySql y más => Mensaje iniciado por: paramonso en 19 de Octubre 2017, 12:16
-
Hola. Dejo la solucion al ejercicio CU01134E del curso de programación web con lenguaje JavaScript.
<!DOCTYPE html>
<html><head><title>Ejemplo aprenderaprogramar.com</title><meta charset="utf-8">
<style type="text/css">
body {font-family: sans-serif; text-align:center;}
#calculadora { font: bold 14px Arial,sans-serif; background-color: #9DD2EA;
border-radius: 3px; height: auto; margin: 0 auto; padding: 20px 20px 9px; width: 295px;
}
.parteSuperior .pantalla {
background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 17px;
height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 180px;
}
.teclas, .parteSuperior {overflow: hidden; }
.teclas span, .parteSuperior span.limpiar { background-color: #FFFFFF; border-radius: 3px; color: #888888;
cursor: pointer; float: left; height: 36px; line-height: 36px; margin: 0 7px 11px 0;
text-align: center; transition: all 0.4s ease 0s; width: 66px;
}
.parteSuperior span.limpiar { background-color:#FF7C87;}
.teclas span.operador { background-color: #FFDAB9; margin-right: 0; }
.teclas span.igual { background-color: #F1FF92; color: #888E5F;}
.parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }
.teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover { background-color: #9C89F6;
color: #FFFFFF; box-shadow:2px 2px 2px 2px white;
color:white;}
#contenedor {width:585px;margin: 40px auto; overflow:hidden;}
#marcaNumeros, #marcaOperadores, #marcarC, #marcarPunto, #marcarVisor, #Reset {padding:15px; width: 90px; display: inline-block;
margin: 10px; cursor: pointer; color: white; border-radius: 40px; background: rgb(202, 60, 60);}
#marcaNumeros:hover, #marcaOperadores:hover, #marcarC:hover, #marcarPunto:hover,
#marcarVisor:hover, #Reset:hover{background: rgb(66, 184, 221);}
#calculadora, span{box-shadow:2px 2px 2px 2px black;color:black;}
</style>
<script type="text/javascript">
function marcarOperadores() {
var listaNodosOperadores = document.querySelectorAll("#calculadora .teclas span.operador");
var nodoIgual = document.querySelector (".igual");
for (var i=0; i<listaNodosOperadores.length; i++) {
listaNodosOperadores[i].style.backgroundColor = "yellow";
listaNodosOperadores[i].style.color = "black";
}
nodoIgual.style.backgroundColor = "yellow";
nodoIgual.style.color = "black";
nodoIgual.style.border = "solid 1px";
}
function marcarNumeros() {
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
for (var i=0; i<listaNodosNumeros.length; i++) {
listaNodosNumeros[i].style.backgroundColor = "black";
listaNodosNumeros[i].style.color = "white";
listaNodosNumeros[i].style.border = "solid 1px";
}
}
function marcarC() {
var listaNodosC = document.querySelector(".limpiar");
listaNodosC.style.backgroundColor = "red";
listaNodosC.style.color = "white";
listaNodosC.style.border = "solid 1px";
}
function marcarPunto() {
var listaNodosPunto = document.querySelector(".punto");
listaNodosPunto.style.backgroundColor = "MediumVioletRed";
listaNodosPunto.style.color = "white";
listaNodosPunto.style.border = "solid 1px";
}
function marcarVisor() {
var listaNodosVisor = document.querySelector(".pantalla");
listaNodosVisor.style.backgroundColor = "navy";
listaNodosVisor.style.color = "white";
listaNodosVisor.style.border = "solid 1px";
}
function Reset()
{
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span");
for (var i=0; i<listaNodosNumeros.length; i++)
{
var p=i;
if(p%4==3){listaNodosNumeros[i].style.backgroundColor = "#FFDAB9";}
else if(i==14){listaNodosNumeros[i].style.backgroundColor = "#F1FF92";}
else{listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";}
listaNodosNumeros[i].style.color = "#888888";
}
var listaNodosVisor = document.querySelector(".pantalla");
listaNodosVisor.style.backgroundColor = "rgba(0, 0, 0, 0.2)";
var listaNodosC = document.querySelector(".limpiar");
listaNodosC.style.backgroundColor = "#FF7C87";
listaNodosC.style.color = "#888888";
}
</script>
</head>
<body>
<div id="cabecera">
<h2>Cursos aprenderaprogramar.com</h2>
<h3>Ejemplo calculadora JavaScript</h3>
</div>
<!-- Calculadora -->
<div id="calculadora">
<!-- pantalla y tecla limpiar -->
<div class="parteSuperior">
<span class="limpiar" onclick="pulsada('C')">C</span>
<div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->
</div>
<div class="teclas">
<!-- operadores y otras teclas -->
<span class = "numero" onclick="pulsada('7')">7</span>
<span class = "numero" onclick="pulsada('8')">8</span>
<span class = "numero" onclick="pulsada('9')">9</span>
<span class="operador" onclick="pulsada('+')">+</span>
<span class = "numero" onclick="pulsada('4')">4</span>
<span class = "numero" onclick="pulsada('5')">5</span>
<span class = "numero" onclick="pulsada('6')">6</span>
<span class="operador" onclick="pulsada('-')">-</span>
<span class = "numero" onclick="pulsada('1')">1</span>
<span class = "numero" onclick="pulsada('2')">2</span>
<span class = "numero" onclick="pulsada('3')">3</span>
<span class="operador" onclick="pulsada('/')">÷</span>
<span class = "numero" onclick="pulsada('0')">0</span>
<span class ="punto" onclick="pulsada('.')">.</span>
<span class="igual" onclick="pulsada('=')">=</span>
<span class="operador" onclick="pulsada('*')">x</span>
</div>
</div>
<div id="contenedor">
<div id="marcaNumeros" onclick="marcarNumeros()"> Marcar números </div>
<div id="marcaOperadores" onclick="marcarOperadores()" >Marcar operadores</div>
<div id="marcarC" onclick="marcarC()"> Marcar tecla C </div>
<div id="marcarPunto" onclick="marcarPunto()" >Marcar punto</div>
<div id="marcarVisor" onclick="marcarVisor()"> Marcarvisor </div>
<div id="Reset" onclick="Reset()" >Reset</div>
</div>
</body>
</html>
;)
-
Buenas paramonso por favor, a la hora de poner título a los temas seguir las indicaciones que están en https://www.aprenderaprogramar.com/foros/index.php?topic=1460.0
Ejercicio bien resuelto
Salu2