E - Múltiplos I
Este ejercicio consiste en un script que muestra en pantalla los números pares, impares y múltiplos de 3, 5 y 7.
Cada una de las opciones se ejecuta mediante un botón que llama a una función con 3 parámetros: (cantidad de números a mostrar, inicio, múltiplo). En la función, y dentro del bucle for, he colocado un if para formatear los números de manera que quedan alineados a la derecha.
Para realizar el script he utilizado: function, un for y un if...elseif..else. Los datos se muestran en pantalla utilizando innerHTML. También he enlazado una hoja de estilos básica.
Código JavaScript
// ========================================
// Código JavaScript
// PARES, IMPARES Y MÚLTIPLOS
// (cc) 2017, 3con14.pro
// ========================================
// Estas variables son para formatear los números en pantalla,
// ocultando los ceros de la izquierda con color transparente
var cero3 = '<span style="color:transparent;">000</span>';
var cero2 = '<span style="color:transparent;">00</span>';
var cero1 = '<span style="color:transparent;">0</span>';
var sp = '<span style="color:#a00;">| </span>';
function Mul(n, a, b) {
var resp = "";
for (var i = a; i < n; i += b) {
if (i < 10) {
resp += cero3 + i + sp;
}
else if (i > 9 && i < 100) {
resp += cero2 + i + sp;
}
else if (i > 99 && i < 1000) {
resp += cero1 + i + sp;
}
else {
resp += i + sp;
}
}
solucion.innerHTML = resp;
}
Código HTML
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="author" content="(cc) 3con14" />
<link rel="stylesheet" href="/code/css/estilos.css">
<title>TAREA M_001 - Pares, Impares...</title>
</head>
<body>
<h4>Divisibilidad, n = 10.000</h4>
<div id="botones">
<button onclick="Mul(10000,0,2);"> Pares </button>
<button onclick="Mul(10000,1,2);"> Impares </button>
<button onclick="Mul(10000,0,3);"> Múltiplos de 3 </button>
<button onclick="Mul(10000,0,5);"> Múltiplos de 5 </button>
<button onclick="Mul(10000,0,7);"> Múltiplos de 7 </button>
</div>
<div id="solucion"></div>
<script src="/code/js/codigo.js"></script>
</body>
</html>
Reglas CSS
/* ========================================
// Hoja de estilos CSS
// PARES, IMPARES Y MÚLTIPLOS
// (cc) 2017, 3con14.pro
============================================ */
* {
box-sizing:border-box;
transition: all 0.25s ease-in;
}
:focus { outline: 0; }
body {
background-color: tan;
margin: 2em;
}
#solucion {
margin-top: 1em;
font: 16px/1 monospace;
}
#botones {
background-color: rgba(0,0,0,0.1);
display: flex;
flex-wrap: wrap;
justify-content: space-around;
}
button {
border: 0;
padding: 0.2em 0.5em;
margin: 0.3em 0.2em;
font-size: 100%;
}
button:hover {
cursor: pointer;
box-shadow: 0 0 10px 2px #f33;
}
button:focus {
box-shadow: 0 0 10px 2px #0f0;
}
button:active {
box-shadow: 0 0 2px 2px #a66 inset;
}
Demo
