VaidrollTeam: GENERADOR DE TABLAS DE NÚMEROS PRIMOS EN HTML

Proyecto para generar tablas de números primos.

Este proyecto contiene 2 diferentes generadores de tablas de números primos.

En el primer generador se debe ingresar el número de filas para la tabla y automáticamente se genera la tabla con los números primos.

Para la tabla de números primos en un rango se debe ingresar desde que número quieres empezar y hasta que número debe finalizar la tabla, luego presionar el botón generar tabla.

Los números primos de cada tabla tiene el fondo de color amarillo y se puede cambiar modificando el código "yellow" en las hojas HTML por otro color en ingles.

Al presionar en la siguiente imagen se puede ver el proyecto a tamaño original

Tabla de números primos.

Tabla de números primos en un rango.

Cada hoja HTML tiene su propia tabla de números primos.

GenTablaNumPrimos1.html
GenTablaNumPrimos2.html
style.css

GenTablaNumPrimos1.html

<html>
<!--Busca por VaidrollTeam para más proyectos. -->
<head>
<title>VaidrollTeam</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="text-align: center;">
<h1>Tabla de números primos </h1>
Número de filas de la tabla:
<input type="number" id="final" name="final" min="1" max="100">
<br>
<br>
<br>
<table id="tabla1">
</table>
</div>
</body>
<script>
var tabla 	= document.getElementById("tabla1");
var inputFinal 	= document.getElementById("final");

  inputFinal.addEventListener("input", function() 
  {
    var final = parseInt(inputFinal.value);
    if (final >= 1 && final <= 100) 
	{
      crearTabla(final);
    }
  });

  function crearTabla(final) 
  {
    tabla.innerHTML = "";
    for (var i = 1; i <= final; i++) 
	{
      var fila = document.createElement("tr");
      for (var j = 1; j <= 10; j++) 
	  {
        var celda = document.createElement("td");
        var numero = (i - 1) * 10 + j;
        celda.innerHTML = numero;
        if (esPrimo(numero)) 
		{
          celda.style.backgroundColor = "yellow";
        }
        fila.appendChild(celda);
      }
      tabla.appendChild(fila);
    }
  }

  function esPrimo(numero) 
  {
    for (var i = 2; i < numero; i++) 
	{
      if (numero % i === 0) 
	  {
        return false;
      }
    }
    return numero !== 1;
  }
</script>
<html>

GenTablaNumPrimos2.html

<html>
<!--Busca por VaidrollTeam para más proyectos. -->
<head>
<title>VaidrollTeam</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div style="text-align: center;">
<h1>Tabla de números primos en un rango </h1>
Desde el número:
<input type="number" id="numero1">
<br>
<br>
Hasta el número:
<input type="number" id="numero2">
<br>
<br>
<button onclick="crearTabla()">Generar tabla</button>
<br>
<br>
<br>
<table id="tabla2"></table>
</div>
</body>
<script>
  function crearTabla() 
  {
    var desde = parseInt(document.getElementById("numero1").value);
	var hasta = parseInt(document.getElementById("numero2").value);
    var tabla = document.getElementById("tabla2");
    tabla.innerHTML = "";

    for (var i = desde; i <= hasta; i++) 
	{
      var fila = document.createElement("tr");
      for (var j = 0; j < 10; j++) 
	  {
        var celda = document.createElement("td");
        var numeroCelda = (i - desde) * 10 + j + desde;
        if (numeroCelda >= desde && numeroCelda <= hasta) 
		{
          celda.innerHTML = numeroCelda;
		  celda.style.border = "1px solid black";
          if (esPrimo(numeroCelda)) {
            celda.style.backgroundColor = "yellow";
          }
        }
        fila.appendChild(celda);
      }
      tabla.appendChild(fila);
    }
  }

  function esPrimo(numero) {
    for (var i = 2; i < numero; i++) {
      if (numero % i === 0) {
        return false;
      }
    }
    return numero !== 1;
  }
</script>
</html>

style.css

body
{
background-color:#f2f2f2;
font-family: Arial, sans-serif;
margin:auto;
width:600px;
}
table 
{
width: 100%;
}
th,td
{
padding: 8px;
text-align: center;
}

#tabla1 td 
{
border: 1px solid black;
}

h1
{
padding-top:10%;
}

input
{
width: 15%;
padding: 4px;
font-size:1em;
border-radius:5px;
border:1px solid black;
color:black;
}

button
{
width: 40%;
text-decoration:none;
padding: 10px 30px;
cursor: pointer;
border: 0;
border-radius: 10px;
border:1px solid black;
font-size:18px;
color:white;
background-color: green;
font-weight: bold;
margin-bottom:5%;
}

Nombre: TablaNumPrimos.rar

Tamaño: 2 KB

Descargar Creando link... espera 30 segundos.

Páginas

GENERADOR DE TABLAS DE NÚMEROS PRIMOS EN HTML