E - Múltiplos II

ejercicio Este ejercicio consiste en trabajar con caracteres especiales, tabulaciones HTML y tabulaciones CSS ((white-spacetab-size).

También utilizo un elemento select para que el usuario decida que tipo de lista de números generar.

Además, merece la pena mencionar la estructura switch(true) para poder poner un condicional en cada cláusula case, que de otra manera no se puede hacer.

También se puede seleccionar el número de columnas que utilizará el listado, dejando las columnas de números alineadas a la derecha utilizando secuencia de escape para el espacio en blanco.

Un solo bucle for se encarga de generar las diferentes listas, optimizando de esta forma el código.

Código JavaScript


// ========================================
//  Código JavaScript
//  MÚLTIPLOS
//  (cc) 2017, 3con14.pro
// ========================================

var resultado = document.getElementById('resultado');
function ListaNum(){
  var n1   = document.getElementById('dato1').value;
  var n2   = document.getElementById('dato2').value;
  var tipo = document.getElementById('tipo').value;
  var men  = '';
  var ini  = 0;    // inicio del bucle
  var nl   = 0;     // nueva linea

  if ( EsN(n1) || EsN(n2) || (n1<1) || (n1>9999) || (n2<1) || (n2>16)) {
    men += ' ¡¡ ERROR !! >>> Datos mal escritos';
    resultado.style.backgroundColor = '#f00';
  } else {
    men  = '<pre>';
    resultado.style.backgroundColor = 'inherit';
    tipo = parseInt(tipo);
    if ( tipo === 1) {
      ini = 1;
      tipo++;
    }
    for (i=ini; i<=n1;i+=tipo){
      if ((nl % n2) === 0){
        men += '\n';
      }
      switch (true) {
        case (i<10):
          men += '\   ' + i + '\t';   // 3 espacios
          break;
        case (i<100):
          men += '\  ' + i + '\t';    // 2 espacios
          break;
        case (i<1000):
          men += '\ ' + i + '\t';     // 1 espacios
          break;                
        default:
          men += i + '\t';
          break;
      }
      nl++;
    }
  }
  resultado.innerHTML = men + '</pre><br>Son ' + nl +' numeros';
  // En ES6 podemos usuar "plantillas de cadena de texto" como esta:
  // resultado.innerHTML = men + '</pre><br>' + `Son ${nl} números`;
}

function EsN(n){
  if (isNaN(n) || n ==='') {
    return true;
  } else {
    return false;
  }
}

Código HTML



<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="Curso de JS">
    <meta name="author" content="(cc) 3con14" />
    <title>Caracteres especiales</title>
    <link rel="stylesheet" href="/css/estilos_js.css">
</head>
<body>

<div class="contenedor">
    <div id="titulo">Caracteres especiales</div>
    <div id="info">
        <p>Ejercicio para trabajar con tabuladores, secuencias de escape, etc... y así poder formatear una lista de números.</p>
        <p>El ejemplo genera listas de números pares, impares y múltiplos que puedes alinear en un determinado número de columnas, a tu elección.</p>
        <p>Rango de lista [1,9999]; Rango de columnas [1,13]. Fuera de rango genera error.</p>
    </div>

    <label for="dato1">Listar de números hasta el</label>
    <input type="text" id="dato1" size="4" class="dcha" value="500" onfocus="this.select()">
    <!-- <br> -->
    <label for="dato2">y número de columnas</label>
    <input type="text" id="dato2" size="4" class="dcha" value="10" onfocus="this.select()">
    <br>
    <label for="tipo">Selecciona el tipo de números</label>
    <select id="tipo">
        <option value="2" selected="selected">Números pares</option>
        <option value="1">Números impares</option>
        <option value="3">Múltiplos de 3</option>
        <option value="5">Múltiplos de 5</option>
        <option value="7">Múltiplos de 7</option>
        <option value="11">Múltiplos de 11</option>
    </select>
    <br>
    <button onclick="ListaNum()" class="boton azul">Pulsa</button>

    <div id="resultado" class="tabula"></div>

</div>

<script src="/js/codigo.js"></script>
</body>
</html>

Reglas CSS



/*  ========================================
//  CSS para ejemplos JavaScript
//  MÚLTIPLOS
//  (cc) 2017, 3con14.pro
============================================ */

* { 
  margin     : 0;
  padding    : 0;
  box-sizing : border-box;
  transition : all 0.25s ease-in;
}
:focus { outline: 0 none transparent; }
body {
  min-height       : 100vh;
  font             : 16px/1.2 sans-serif;
  display          : flex;
  background-color : rgba(70, 130, 180, 0.6);
}
h1,h2,h3,h4,h5,h6,p { padding: 0.2rem; }
hr { 
  border           : 0;
  margin           : 0.5em 0;
  height           : 1px;
  background-color : rgba(0, 0, 0, 0.5);
}
ol, ul { margin: 0.5em 0 0.5em 35px; }

.txt-S  { font-size  :  80%;   }
.txt-M  { font-size  :  90%;   }
.txt-L  { font-size  : 110%;   }
.dcha   { text-align : right;  }
.centro { text-align : center; }
.tabula { 
  -moz-tab-size: 5;
  tab-size: 5;
}

.contenedor {
  max-width        : 800px;
  width            : 90%;
  min-height       : 90vh;
  margin           : auto;
  padding          : 2rem;
  border-top       : 10px solid rgba(0, 0,0, 0.2);
  background-color : rgba(0, 0, 0, 0.05);
}
label, input { 
  margin  : 0.5rem 0.1rem 0.5rem 0.1rem;
  padding : 0.3rem 0.2rem 0.2rem 0.2rem;
  border  : 0;
}
input { 
  background-color : rgba(255,255,255,0.2);
  font             : 1.1em "Lucida Console", "Courier New", monospace;
}
textarea {
  max-width  : 100vw;
  width      : 96%;
  min-height : 10vh;
  display    : block;
  border     : 1px solid #fff;
  overflow   : auto;
  padding    : 1em;
  margin     : 0.5em;
  box-shadow : 1px 1px 5px 1px rgba(0, 0, 0, 0.3) inset;
}
.inp-txt { 
  border      : 1px solid #fff;
  font        : 1.1em "Lucida Console", "Courier New", monospace;
  box-shadow  : 0.5px 0.5px 3px 0 rgba(112, 112, 112, 0.8) inset;
}
.inp-chk {
  width          : 1.2rem;
  height         : 1.2rem;
  vertical-align : middle;
  display        : inline-block;
}
#info, #resultado {
  min-height : 10vh;
  margin     : 1em 0;
  padding    : 0.5em;
  overflow   : auto;    
}
#titulo { 
  font : 900 1.3em/1.2 verdana,sans-serif;
  color: rgba(0, 0, 0, 0.6);
}
#info { 
  font             : italic 1em/1.1 serif;
  background-color : rgba(255, 255, 255, 0.1);
  overflow         : auto;  
}
#resultado { 
  background-color : rgba(0, 0, 0, 0.05);
  font             : 100 1.2em/1.2 "Lucida Console", "Courier New", monospace;
}
/* BOTONES */
 button {
  margin    : 0.5em 0.25em;
  padding   : 0.25em 0.5em;
  cursor    : pointer;
  font-size : 1em;
  border    : 0;
 }
.boton {
  text-align    : center; text-decoration : none;
  font-family   : "Lucida Console", "Courier New", monospace;
  display       : inline-block; position : relative;
  background    : #777; color : #FFF;
  text-shadow   : 1px 1px 1px rgba(0, 0, 0, 0.7);
  padding       : 5px 13px; margin : 10px 5px;
  border-radius : 100px; white-space : nowrap;
  border        : 1px solid transparent;
  transition    : all 0.1s ease-in-out;
  border        : 1px solid transparent;  
}
.gris         { background: #777; box-shadow: 0px 3px 0 0 #444; }
.gris:hover   { background: hsla(0, 0%, 57%, 1); }
.rojo         { background: #E74C3C; box-shadow: 0px 3px 0 0 hsla(6, 63%, 36%, 1); }
.rojo:hover   { background: hsla(5, 100%, 70%, 1); }
.verde        { background: #2ECC71; box-shadow: 0px 3px 0 0 hsla(145, 63%, 32%, 1); }
.verde:hover  { background: hsla(145, 70%, 60%, 1); }
.azul         { background: #3498DB; box-shadow: 0px 3px 0 0 hsla(204, 54%, 44%, 1); }
.azul:hover   { background: hsla(204, 77%, 60%, 1); }
.rojo:active, .verde:active, .azul:active, .gris:active { transform: translateY(4px); }
.rojo:hover, .verde:hover, .azul:hover, .gris:hover     { border: 1px solid rgba(255, 255, 255, 0.4); }

.bg-b { background-color: rgba(0, 0, 0, 0.5); color: #fff;}
.bg-w { background-color: rgba(255, 255, 255, 0.5); color #000;}
.bg-r { background-color: rgba(255, 0, 0, 0.5); }
.bg-v { background-color: rgba(0,255, 0, 0.5); }
.bg-a { background-color: rgba(0, 0, 255, 0.5); }
.bg-n,.bg-b,.bg-r, .bg-v, .bg-a { color: #000; padding: 5px 10px; }


/* ESPECÍFICOS */
select {
  font-size  : 1em;
  border     : 0 none transparent;
  box-shadow : 1px 1px 1px 0 rgba(0, 0, 0, 0.5) inset;
}
option { color:#555; }


Demo

multiplos2

Visitas...

Hoy ........ 0

Ayer ....... 1

Mes ........ 37

Total ........ 5556

En línea...

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

< 3con14 - LAB / >

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