Tabla de multiplicar
Este ejercicio consiste utilizar varios bucles for encadenados para construir la tabla de multiplicar.
Merece la pena mencionar que, a la vez, que construimos la tabla añadimos un atributo data a cada td con el resultado de la multiplicación. Dicho atributo lo utilizamos más tarde al producirse :hover con CSS para mostrar el resultado por encima de la celda donde está posicionado el cursor, haciendo uso del pseudoelemento :before.
Código JavaScript
// ========================================
// Código JavaScript
// TABLA DE MULTIPLICAR
// (cc) 3con14.pro
// ========================================
var resultado = document.getElementById('resultado');
function TablaMultiplicar(){
var n = document.getElementById('dato').value;
var m;
var tabla = '';
if (isNaN(n) || n === '') {
tabla = '¡¡ Error !! >>> Dato mal escrito.';
resultado.style.backgroundColor = '#f00';
} else {
tabla = '<table>';
resultado.style.backgroundColor = 'inherit';
n = parseInt(n);
m = n+9;
tabla += '<tr><td></td>';
for (var k=1; k<=10;k++) {
tabla += '<td>' + k + '</td>';
}
tabla += '</tr>';
for (var i=n;i<=m;i++) {
tabla += '<tr><td>'+ i +'</td>';
for (var j=1; j<=10;j++){
tabla += '<td data-n="'+ i +'x'+ j +'=' + (i*j) +'">' + (i*j) + '</td>';
}
tabla += '</tr>';
}
tabla += '</tabla>';
}
resultado.innerHTML = tabla;
}
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>Tabla de Multiplicar</title>
<link rel="stylesheet" href="/css/estilos_js.css">
</head>
<body>
<div class="contenedor">
<div id="titulo">Tabla de Multiplicar avanzada</div>
<div id="info">
<p>Tabla de Multiplicar 10x10, de 100 elementos, comenzando en el número indicado.</p>
</div>
<label for="dato">La tabla comienza en: </label>
<input type="text" id="dato" size="4" class="dcha" value="1" onfocus="this.select()">
<br>
<button onclick="TablaMultiplicar()" class="boton azul">Ver tabla</button>
<div id="resultado"></div>
</div>
<script src="/js/codigo.js"></script>
</body>
</html>
Reglas CSS
El código CSS es el mismo de otros ejercicios salvo la parte final de tablas.
/* =============================================
// Hoja de estilos CSS
// TABLA DE MULTIPLICAR
// (cc) 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 : tan;
}
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; }
.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 : 5vh;
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 hsla(0, 0%, 27%, 1); }
.gris:hover { background: hsla(0, 0%, 57%, 1); }
.rojo { background: #E74C3C; box-shadow: 0px 3px 0 0 hsla(6, 63%, 26%, 1); }
.rojo:hover { background: hsla(5, 100%, 70%, 1); }
.verde { background: #2ECC71; box-shadow: 0px 3px 0 0 hsla(145, 63%, 22%, 1); }
.verde:hover { background: hsla(145, 70%, 60%, 1); }
.azul { background: #3498DB; box-shadow: 0px 3px 0 0 hsla(204, 54%, 34%, 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-n { 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-w,.bg-r, .bg-v, .bg-a { color: #000; padding: 5px 10px; }
/* TABLAS
===================================================================== */
table {
margin : auto;
width : 100%;
}
td {
text-align : right;
padding : 4px;
}
td { background-color: rgba(255, 0, 0, 0.1); }
tr { background-color: rgba(255, 0, 0, 0.1); }
tr:first-child { background-color: rgba(0, 0, 0, 0.2); }
td:first-child { background-color: rgba(255, 128, 0, 0.2); }
tr:hover { background-color: rgba(255, 255, 255, 0.3); }
td:hover { box-shadow: 0 0 0 2px #fff; cursor: pointer; }
table td:hover:before{
content : attr(data-n);
padding : 10px;
position : absolute;
transform : translate(-70%,-120%);
font : 1.1em/1 sans-serif;
color : #fff;
text-shadow : 2px 2px 6px #333;
background-color : rgba(255, 0, 0, 1);
}
