Los códigos más visitados de JavaScript

Listado de los códigos más visitados durante los últimos 30 días
Imágen de perfil
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Calcula tu peso recomendado con JavaScript


46 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 23 de Septiembre del 2018 por Xve (294 códigos)
63.691 visualizaciones desde el 23 de Septiembre del 2018
Este código calcula el peso recomendado utilizando la formula:
50 + ( ( Altura - 150) / 4) * 3 ) + ( Edad - 20 ) / 4
En caso de ser una mujer, hay que multiplicar el resultado por 0.9.

peso-recomendado
Imágen de perfil
Val: 58
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Caja de comentarios HTML y Javascript


38 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(62)
Publicado el 30 de Junio del 2020 por Terry (3 códigos)
31.333 visualizaciones desde el 30 de Junio del 2020
Capture

Hola amigos despues de mucho tiempo vuelvo con este pequeno y simple caja de comentarios en javascript espero les sirva de alguna forma.
pongo el codigo HTML y Javascript

Mis mejores deseos para todos en este foro
Imágen de perfil
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Pelota rebotando


27 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 19 de Mayo del 2014 por Xavi (548 códigos)
19.258 visualizaciones desde el 19 de Mayo del 2014
Código que muestra una pelota rebotando por la pantalla.
Gracias a la aportación de Jecht en los foros.
Imágen de perfil
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar la imagen cada 5 segundos en una clase


25 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 7 de Septiembre del 2020 por Joel (150 códigos)
2.943 visualizaciones desde el 7 de Septiembre del 2020
Siguiendo el código de Xavi (https://www.lawebdelprogramador.com/codigo/JavaScript/2654-Cambiar-la-imagen-cada-5-segundos.html), lo he puesto dentro de una clase para que se pueda utilizar varias veces en una misma pagina.

Se ha creado una clase que recibe el array bidimensional con las imágenes y urls, el elemento que contendrá el link y la imagen, y los milisegundos que quieras que vaya rotando las imágenes.
Imágen de perfil
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar la imagen cada 5 segundos


24 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(93)
Actualizado el 25 de Julio del 2019 por Xavi (548 códigos) (Publicado el 21 de Abril del 2014)
170.856 visualizaciones desde el 21 de Abril del 2014
Simple código que muestra como cambiar una imagen de nuestra pagina cada 5 segundos por otra imagen de forma aleatoria o secuencial

Hay tres versiones:
- una sin enlace aleatorio
- una con enlaces (link) en las imágenes de forma aleatoria
- una con enlaces (link) en las imágenes de forma secuencial
sin imagen de perfil

Paint en Canvas JS


24 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(12)
Actualizado el 21 de Abril del 2020 por Anonymous (35 códigos) (Publicado el 10 de Octubre del 2017)
17.339 visualizaciones desde el 10 de Octubre del 2017
Es una beta del paint para canvas que incluye varias herramientas que te servirán para el dibujo básico

Captura-de-pantalla-66
Imágen de perfil

Contador Dinámico con JS solamente


24 visualizaciones el último mes

JavaScript

Publicado el 20 de Diciembre del 2024 por Alejandro
972 visualizaciones desde el 20 de Diciembre del 2024
Este código sirve para crear una cuenta regresiva que muestra el tiempo restante hasta una fecha y hora específicas, como el lanzamiento de un producto, un evento o una página web. Se actualiza en tiempo real y muestra los días, horas, minutos y segundos restantes de forma dinámica.

Es ideal para incluir en páginas web o proyectos donde quieras mantener a tus usuarios informados sobre el tiempo restante para un hito importante. Cuando el temporizador llega a cero, se puede mostrar un mensaje personalizado, como "¡Ya estamos en directo!" o cualquier texto que elijas. Ni necesitas más pildoras de Javascript, soy Alejandro Tamargo Desarrollador Web en Asturias
Imágen de perfil
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Calcular el numero de semanas, días y horas


22 visualizaciones el último mes

JavaScript

Actualizado el 22 de Septiembre del 2020 por Xavi (548 códigos) (Publicado el 21 de Septiembre del 2014)
9.025 visualizaciones desde el 21 de Septiembre del 2014
Simple código que muestra como dada una cantidad de horas, devuelve el numero de semanas, días y horas que corresponden al numero de horas dadas.

calcular-semanas-dias-y-horas
Imágen de perfil
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Seleccionar la opción de menú según la pagina donde estamos con JavaScript


22 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 30 de Junio del 2020 por Joel (150 códigos) (Publicado el 28 de Junio del 2020)
2.992 visualizaciones desde el 28 de Junio del 2020
Código de busca la url de la pagina donde nos encontramos dentro de las urls del menú de nuestra pagina y añade un estilo a dicho enlace para diferenciarlo del resto. En este ejemplo se añade el estilo CSS "selected" que lo pone en negrita.

Puedes ver el mismo código en JQuery en: https://www.lawebdelprogramador.com/codigo/JQuery/6329-Seleccionar-la-opcion-se-menu-segun-la-pagina-donde-estamos-con-JQuery.html
Imágen de perfil
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Combinaciones únicas o permutaciones incompletas en array


21 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 18 de Septiembre del 2017 por Kip (28 códigos)
14.254 visualizaciones desde el 18 de Septiembre del 2017
Código creado a partir de un tema del foro http://www.lawebdelprogramador.com/foros/JavaScript/1622319-Combinaciones-en-array.html, muy débil ya que no obtiene las permutaciones completas pero es posible obtener las combinaciones únicas en su totalidad, tal como comenta el usuario:

Estimados, alguna idea de algoritmo en javascript para generar las combinaciones posibles de n numero de elementos en un array sin repeticion, pongo un ejemplo practico, si tengo "[A,B,C,D]", me retorne en un array
"[A-B-C-D,A-B-C,A-B-D,A-C-D,B-C-D,A-B,A-C,A-D,B-C,B-D,C-D,A,B,C,D]", cualquier idea me sirve muchas gracias.


El algoritmo es simple, creo un array temporal y en base a este creo las combinaciones tomando en cuenta el número de combinaciones, este número es creado a partir del tamaño del array principal.

No es perfecto para arrays con un tamaño muy elevado.

Por defecto trae las permutaciones, se deberia enviar un true para que traiga combinaciones unicas.

Ejemplo permutaciones

1
console.log(combinations(['A', 'B', 'C', 'D']));

Obtendriamos algo asi:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
[ 'A-B-C-D',
  'A-C-D-B',
  'A-D-B-C',
  'B-C-D-A',
  'B-D-A-C',
  'B-A-C-D',
  'C-D-A-B',
  'C-A-B-D',
  'C-B-D-A',
  'D-A-B-C',
  'D-B-C-A',
  'D-C-A-B',
  'A-B-C',
  'A-C-D',
  'A-D-B',
  'B-C-D',
  'B-D-A',
  'B-A-C',
  'C-D-A',
  'C-A-B',
  'C-B-D',
  'D-A-B',
  'D-B-C',
  'D-C-A',
  'A-B',
  'A-C',
  'B-C',
  'B-D',
  'C-D',
  'C-A',
  'D-A',
  'D-B',
  'A',
  'B',
  'C',
  'D' ]

Como se ve, faltan ciertas permutaciones, ya que fue pensado mas bien para obtener combinaciones unicas.

Ejemplo combinaciones

1
console.log(combinations(['A', 'B', 'C', 'D'], true));

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
[ 'A-B-C-D',
  'A-B-C',
  'A-C-D',
  'A-B-D',
  'B-C-D',
  'A-B',
  'A-C',
  'B-C',
  'B-D',
  'C-D',
  'A-D',
  'A',
  'B',
  'C',
  'D' ]
Imágen de perfil
Val: 2.288
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cambiar el titulo de la pagina cuando se cambia de pestaña en el navegador


20 visualizaciones el último mes

JavaScript

Publicado el 2 de Marzo del 2021 por Katas (200 códigos)
2.280 visualizaciones desde el 2 de Marzo del 2021
Este simple código muestra como utilizando el evento visibilitychange (https://developer.mozilla.org/en-US/docs/Web/API/Document/visibilitychange_event) podemos cambiar el titulo que aparece en la pestaña del navegador cuando obtiene el foco y cuando lo pierde.
sin imagen de perfil

Juego del Pong en Canvas


20 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 14 de Junio del 2016 por Pablo Elias (3 códigos) (Publicado el 8 de Junio del 2016)
12.766 visualizaciones desde el 8 de Junio del 2016
Ejemplo de un juego hecho en canvas usando JavaScript.
Es el clásico juego de Pong. Se puede jugar solo o con alguien más.

juego-pong-canvas
Imágen de perfil
Val: 2.288
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear un array de 10x10 con números aleatorios y ordenarlo verticalmente y horizontalmente


20 visualizaciones el último mes

JavaScript

Publicado el 25 de Marzo del 2021 por Katas (200 códigos)
5.700 visualizaciones desde el 25 de Marzo del 2021
Mediante el generador de números aleatorios llenar una tabla de dos dimensiones (10,10) con números enteros comprendidos entre el 0 y el 99. La tabla deberá visualizarse en pantalla así como los números que se van generando, colocándoles en cada casilla de la tabla.
Ordenar la matriz anterior por filas y columnas, de menor a mayor.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
Array original
 
[18, 80, 92, 90, 72, 29, 56, 20, 55, 22]
[91, 33, 73, 95, 22, 19, 67, 83, 98, 95]
[71, 60, 60, 24, 0, 56, 51, 93, 74, 88]
[61, 93, 83, 87, 30, 69, 41, 21, 66, 46]
[19, 16, 94, 57, 13, 97, 80, 51, 14, 52]
[41, 74, 94, 67, 40, 0, 47, 68, 39, 58]
[97, 37, 4, 38, 34, 31, 24, 68, 4, 54]
[37, 86, 42, 49, 0, 37, 40, 62, 85, 47]
[70, 68, 82, 47, 28, 55, 36, 30, 33, 80]
[29, 43, 32, 13, 89, 94, 59, 16, 41, 81]
 
Array ordenado horizontalmente
 
[18, 20, 22, 29, 55, 56, 72, 80, 90, 92]
[19, 22, 33, 67, 73, 83, 91, 95, 95, 98]
[0, 24, 51, 56, 60, 60, 71, 74, 88, 93]
[21, 30, 41, 46, 61, 66, 69, 83, 87, 93]
[13, 14, 16, 19, 51, 52, 57, 80, 94, 97]
[0, 39, 40, 41, 47, 58, 67, 68, 74, 94]
[4, 4, 24, 31, 34, 37, 38, 54, 68, 97]
[0, 37, 37, 40, 42, 47, 49, 62, 85, 86]
[28, 30, 33, 36, 47, 55, 68, 70, 80, 82]
[13, 16, 29, 32, 41, 43, 59, 81, 89, 94]
 
Array ordenado verticalmente
 
[0, 4, 16, 19, 34, 37, 38, 54, 68, 82]
[0, 14, 22, 29, 41, 43, 49, 62, 74, 86]
[0, 16, 24, 31, 42, 47, 57, 68, 80, 92]
[4, 20, 29, 32, 47, 52, 59, 70, 85, 93]
[13, 22, 33, 36, 47, 55, 67, 74, 87, 93]
[13, 24, 33, 40, 51, 56, 68, 80, 88, 94]
[18, 30, 37, 41, 55, 58, 69, 80, 89, 94]
[19, 30, 40, 46, 60, 60, 71, 81, 90, 97]
[21, 37, 41, 56, 61, 66, 72, 83, 94, 97]
[28, 39, 51, 67, 73, 83, 91, 95, 95, 98]


Para ordenar horizontalmente, se va recorriendo cada uno de las filas que contiene un array cada una, y se va ordenando con sort(). la función sort() ordena el array in-place, que significa que una vez se ejecuta sort() ya queda modificado.
1
arr.map(a => a.sort((a,b) => a-b));


Para ordenar verticalmente, recorremos el array por sus 10 elementos (del 0 a 9)
1
for (let i=0; i<arr.length; i++) {
y por cada uno de estos valores, obtenemos el valor de indice que hemos obtenido de cada uno de los arrays que contiene. Con esto conseguimos un array con los 10 elementos verticales de la fila "i". en primero lugar la primera columna, segunda columna, etc...
1
let arrVert=arr.map(a => a[i]);
Ordenamos sus valores:
1
arrVert.sort((a,b) => a-b);
Reemplazamos cada uno de los elementos en el array original por los que hemos ordenado
arr.map((a, index) => a[i]=arrVert[index]);


La explicación de como crear el array de 10x10 aquí: https://www.lawebdelprogramador.com/codigo/JavaScript/6969-Crear-un-array-bidimensional-de-10x10-con-numeros-aleatorios.html
Imágen de perfil
Val: 14
Ha disminuido su posición en 68 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Chat Web


20 visualizaciones el último mes

JavaScript

Publicado el 11 de Septiembre del 2018 por Jose Velasquez (3 códigos)
3.463 visualizaciones desde el 11 de Septiembre del 2018
A continuación un código de chat para su web solo cambiar los datos del Facebook, Whatsapp y la personalización de colores e imagen del chat

Sin-titulo

Saludos
Imágen de perfil
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Juego de adivinar un número aleatorio


20 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 16 de Diciembre del 2013 por Xavi (548 códigos)
35.772 visualizaciones desde el 16 de Diciembre del 2013
Juego en el que especificas un número de respuestas, y tienes que encontrar un numero comprendido entre 1 y 100 en el numero de respuestas indicado.
Imágen de perfil
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Albumes de fotos con carga independiente


20 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Actualizado el 20 de Febrero del 2019 por Scriptshow (141 códigos) (Publicado el 19 de Enero del 2017)
3.398 visualizaciones desde el 19 de Enero del 2017
Visor de imágenes por álbumes con carga independiente...
Para evitar la espera al cargar álbumes que contienen muchas imágenes, sería aconsejable repartir en varios apartados, clasificados por contenidos, las diferentes fotos.

El Script se fundamenta en varios Arrays que contienes las imágenes. Cada Array, está definido por una variable, que nos facilita su localización. Si clicamos en un enlace, invocamos el Array correspondiente incluido en una función, cargándose sólo esas imágenes...
El objetivo es poder ampliar casi indefinidamente el sistema, sin tener que esperar a que carguen todas las imágenes.

Espero sea útil.

Un saludo
Imágen de perfil
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Validar los campos de un formulario con JavaScript


19 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(8)
Actualizado el 4 de Febrero del 2020 por Xve (294 códigos) (Publicado el 14 de Octubre del 2014)
26.995 visualizaciones desde el 14 de Octubre del 2014
En este código se muestra como verificar la entrada de cuadros de texto (<input type="text"...), uno que tiene que tener como mínimo un carácter, y el otro que tiene que tener 4 caracteres exactos. Los limites de los campos se guarda en un dataset en cada <input>.
Si no se cumple con la condición, se marca el recuadro del input en color rojo y no deja enviar el formulario.

Va verificando cada input a medida que vamos escribiendo y luego los verifica todos cuando enviamos el formulario.

validar-formulario
Imágen de perfil
Val: 1.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Juego de memoria (Memorama)


18 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(14)
Actualizado el 25 de Noviembre del 2017 por Alejandro (9 códigos) (Publicado el 25 de Febrero del 2017)
49.045 visualizaciones desde el 25 de Febrero del 2017
Hice modificaciones a un código que saque de un libro ya que:
1.- Las cartas no siempre generaban pares
2.- Podía voltear mas de 2 cartas sin cubrirlas
3.- Cuando se terminaban las cartas quedaba el fondo

Así que las cartas ya siempre son en pares y limita a descubrir solo 2.
Al terminar las cartas dice "juego terminado" y al clickar comienza uno nuevo.

Es muy sencillo pero es base para desarrollos mas complejos, si tengo oportunidad luego lo publico con imágenes jeje

memorama

memorama11
Imágen de perfil

Juego de adivinar las banderas


18 visualizaciones el último mes

JavaScript

Publicado el 6 de Noviembre del 2017 por Administrador (718 códigos)
5.105 visualizaciones desde el 6 de Noviembre del 2017
En este juego, tienes que ir identificando la bandera según el país que se indica en texto. tienes un total de 5 minutos para identificar todas las banderas, pero cada vez que haces un error te penaliza en el tiempo.

banderas
Imágen de perfil
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Sistema de encuestas en JavaScript


18 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 26 de Junio del 2018 por Xavi (548 códigos)
15.113 visualizaciones desde el 26 de Junio del 2018
Este simple código es de ejemplo para ver como utilizar un array bidimensional en Javascript para simular el guardado de los resultados de una encuesta.

encuensta-javascript


NOTA; Unicamente es de ejemplo, ya que no guarda en ningún lugar los resultados de la encuesta.
Imágen de perfil
Val: 553
Bronce
Ha aumentado 1 puesto en JavaScript (en relación al último mes)
Gráfica de JavaScript

Máscara solo mayúsculas en input o textarea


18 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 16 de Junio del 2017 por Kip (28 códigos)
4.410 visualizaciones desde el 16 de Junio del 2017
Código simple que permite establecer una máscara a un input o textarea, convirtiendo todas las letras en mayúsculas, ya sea escribiendo o pegando contenido en alguno de los dos elementos.

Para aplicar la máscara debes agregar la clase 'upper' a tu elemento y colocar el codigo al final, antes del cierre de etiqueta del body o dentro de la función que establezcas como ejecución en el evento window.onload
Imágen de perfil
Val: 2.019
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Sidenav Menú Vertical


18 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Actualizado el 4 de Octubre del 2020 por Scriptshow (141 códigos) (Publicado el 15 de Enero del 2017)
4.317 visualizaciones desde el 15 de Enero del 2017
Menú vertical con efecto opacity sobre fondo de imágenes...

Tiene la particularidad de no utilizar librerías varias, ni tampoco frameworks alguno; además, ocupa al completo sólo 1,43 KB (1.466 bytes) todo el código. Es altamente compatible y adaptable.

Espero sea útil.

Un saludo
Imágen de perfil
Val: 2.288
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Eliminar diacriticos (acentos, diéresis, tildes, ...) de una cadena con JavaScript


17 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 27 de Junio del 2020 por Katas (200 códigos)
5.761 visualizaciones desde el 27 de Junio del 2020
Desde ES6 existe el método normalize() (https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/normalize) para llevar a la forma descompuesta de normalización en Unicode.

En la forma NFD, los diacríticos son caracteres diferentes, lo que hace es separar cualquier carácter base de su acento, diéresis, ...
Y lo importante es que todas las marcas diacriticas están en el rango U+0300 - U+036F, por lo cual ya podemos hacer un simple replace sobre la forma NFD de esos rangos.

diacriticos

En la imagen la forma NFD separa el carácter base

1
2
eliminarDiacriticos("lá chòcölatìna MÓRDÌDÁ"); // la chocolatina MORDIDA
eliminarDiacriticos("España"); // Espana
Imágen de perfil
Val: 18
Ha aumentado su posición en 5 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

Instalación de Librerías de JavaScript en cualquier S.O.


17 visualizaciones el último mes

JavaScript

Publicado el 23 de Mayo del 2020 por Hdb Programming (46 códigos)
2.219 visualizaciones desde el 23 de Mayo del 2020
Con este comando podremos instalar librerías de JavaScript mediante tu terminal favorita, Powershell, CMD, Terminal de Mac, Terminal de Linux; para así agregarle más funciones a tu código de JavaScript

Enlace a la web de npm (en la que podrás encontrar más librerias para JavaScript):
https://www.npmjs.com/