Código del ejercicio CU01134E del curso JavaScript desde cero.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Ejemplo aprenderaprogramar.com</title>
<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;
}
#contenedor {
width:500px;
margin: 40px auto;
overflow:hidden;
}
#marcaNumeros, #marcaOperadores, #marcaC, #marcaPunto, #marcaPantalla, #restablecer {
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, #marcaC:hover, #marcaPunto:hover, #marcaPantalla:hover, #restablecer:hover {
background: rgb(66, 184, 221);
}
</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';
listaNodosOperadores[i].style.border='solid 1px';
}
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 nodoC=document.querySelector('.limpiar')
nodoC.style.backgroundColor='red';
nodoC.style.color='white';
}
function marcarPunto(){
var nodoPunto=document.querySelector('.punto');
nodoPunto.style.backgroundColor='purple';
nodoPunto.style.color="white";
}
function marcarPantalla(){
var nodoPantalla=document.querySelector('.pantalla');
nodoPantalla.style.backgroundColor='#0040FF';
}
function restablecer(){
var listaNodosOperadores=document.querySelectorAll('#calculadora .teclas span.operador');
var nodoIgual=document.querySelector('.igual');
var listaNodosNumeros = document.querySelectorAll("#calculadora .teclas span.numero");
var nodoC=document.querySelector('.limpiar')
var nodoPunto=document.querySelector('.punto');
var nodoPantalla=document.querySelector('.pantalla');
for(var i=0;i<listaNodosOperadores.length;i++){
listaNodosOperadores[i].style.backgroundColor='#FFDAB9';
listaNodosOperadores[i].style.color='#888888';
listaNodosOperadores[i].style.border='none';
}
nodoIgual.style.backgroundColor='#F1FF92';
nodoIgual.style.color='#888888';
nodoIgual.style.border='none';
for (var i=0; i<listaNodosNumeros.length; i++) {
listaNodosNumeros[i].style.backgroundColor = "#FFFFFF";
listaNodosNumeros[i].style.color = "#888888";
listaNodosNumeros[i].style.border = "none";
}
nodoC.style.backgroundColor='#FF9FA8';
nodoC.style.color='#888888';
nodoPunto.style.backgroundColor='#FFFFFF';
nodoPunto.style.color="#888888";
nodoPantalla.style.backgroundColor='rgba(0,0,0,0.2)';
}
</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="marcaC" onclick="marcarC()" >Marcar botón C</div>
<div id="marcaPunto" onclick="marcarPunto()" >Marcar botón punto</div>
<div id="marcaPantalla" onclick="marcarPantalla()" >Marcar pantalla</div>
<div id="restablecer" onclick="restablecer()" >Restablecer ajustes</div>
</div>
</body>
</html>
Gracias.
Tema: JavaScript querySelectorAll devuelve un NodeList no-vivo o estático CU01134E (Leído 1937 veces)
RSS -
WAP2