E - Múltiplos I

ejercicio 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

m 001 pares

Visitas...

Hoy ........ 0

Ayer ....... 0

Mes ........ 72

Total ........ 5726

En línea...

Hay 16 invitados y ningún miembro en línea

< 3con14 - LAB / >

1998 - 2017, www.3con14.biz
(cc) Jesús Plaza M.
RECONOCIMIENTOS