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


329 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 23 de Septiembre del 2018 por Xve (294 códigos)
61.744 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

Reloj analógico


112 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 7 de Marzo del 2018 por Administrador (718 códigos)
16.964 visualizaciones desde el 7 de Marzo del 2018
Excelente reloj analógico que utiliza Javascript para obtener la hora del sistema, pero para mostrar las agujas utiliza los grados (deg) del rotate de CSS para mover las agujas.

reloj-analogico
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


104 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)
169.977 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
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

Gráfico de pastel con cavas en HTML5


96 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 17 de Julio del 2017 por Xve (294 códigos)
24.780 visualizaciones desde el 17 de Julio del 2017
En este código he creado una clase de javascript para generar gráficas de pastel

grafico-pastel


Se puede definir si se desea en formato "donut", si mostramos el tanto por ciento y si mostramos la leyenda.
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

Simular el SLOT de una maquina tragaperras


95 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Actualizado el 25 de Abril del 2018 por Xve (294 códigos) (Publicado el 26 de Febrero del 2018)
36.419 visualizaciones desde el 26 de Febrero del 2018
Aquí os muestro una manera de simular el "slot" de una maquina tragaperras.

He obtenido la idea de la pagina http://odhyan.com/slot/ y lo he modificado para intentar hacerlo mas sencillo con un solo "slot" y sin objetos a modo de practica.

slot-inicial slot-funcionando

slot
Imágen de perfil

Contador Dinámico con JS solamente


88 visualizaciones el último mes

JavaScript

Publicado el 20 de Diciembre del 2024 por Alejandro
536 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.448
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Juego de memoria (Memorama)


79 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(13)
Actualizado el 25 de Noviembre del 2017 por Alejandro (9 códigos) (Publicado el 25 de Febrero del 2017)
48.295 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
Val: 1.807
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Convertir un array de javascript a PHP


77 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 8 de Febrero del 2018 por Xavi (548 códigos)
18.016 visualizaciones desde el 8 de Febrero del 2018
Este código muestra como enviar un array de JavaScript a PHP.

Como el JavaScript se ejecuta en el navegador y el PHP en el servidor, tenemos que enviar el array de valores de JavaScript al servidor en formato JSON mediante AJAX, para poder recuperar-lo desde PHP.

Para enviar los datos mediante AJAX, utilizar el comando $.post() de JQuery.
Imágen de perfil

Creación y resolución de un laberinto


75 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 3 de Junio del 2019 por Administrador (718 códigos)
9.716 visualizaciones desde el 3 de Junio del 2019
- Toda la programación está hecha en JavaScript.
- La visualización de los laberintos se basa en el elemento canvas de HTML5. Para los símbolos uso imágenes de 16×16 píxeles y para mostrar la solución uso círculos y rectángulos dibujados.
- La generación de laberintos se hace por backtracking y se obtiene un laberinto perfecto: cualesquiera dos puntos están conectados por exactamente un camino y no hay bucles. Lo elegí porque visualmente me pareció más atractivo.
- La salida (el cohete) y la llegada (la casita) las elijo para que estén lo más separadas posible, para conseguir que la solución sea un camino largo. En algunas ocasiones la curva resultante me recuerda a la curva de Peano.
- La solución del laberinto se obtiene buscando los puntos muertos, celdas que están rodeadas de tres muros; cuando se eliminan todos, las celdas que quedan son las que forman la solución. También me pareció más adecuada para su visualización.
- Para mostrar la solución utilizo un temporizador JavaScript ¡para cada paso! Nunca pensé que eso podría funcionar. Con la inocencia del novato, pensé en usar el equivalente en JavaScript a una función sleep() hasta que descubrí que ni existía ni se consideraba correcto escribirla, por lo que tuve que pensar un buen rato cómo conseguir lo que quería con temporizadores. Bueno, parece que funciona :)

laberinto

laberinto-resuelto
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

Cuantas cajas caben en un contenedor


72 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 29 de Octubre del 2019 por Joel (150 códigos)
9.691 visualizaciones desde el 29 de Octubre del 2019
Este código realiza el calculo para ver cuantas cajas pueden caber en un contenedor dado, probando de poner las cajas en todas sus posiciones.

cajas-dentro-contenedor
Imágen de perfil
Val: 606
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Crear una factura con JavaScript


71 visualizaciones el último mes

JavaScript

Publicado el 13 de Abril del 2021 por Info (100 códigos)
18.998 visualizaciones desde el 13 de Abril del 2021
Este código muestra como crear el cuerpo de una factura, permitiendo entrar el nombre de un producto, la cantidad y el importe.
En cada entrada, se calcula el importe del producto, subtotal, el 21% de IVA (Impuesto en España) y el total de la factura.
Cada vez que se introduce un producto, se añade una nueva fila para añadir un nuevo producto de manera automática.

factura-con-javascript
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

Dibujar una pirámide con asteriscos


71 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 15 de Abril del 2020 por Katas (200 códigos)
8.372 visualizaciones desde el 15 de Abril del 2020
Crear una función que reciba un numero entero positivo y que devuelva un array que su contenido sea una pirámide de asteriscos con la altura recibida.

5e8ca23d8b2de-triangulo-asteriscos


1
2
3
4
5
piramide(1); // ["*"]
piramide(2); // [" *", "***"]
piramide(3); // ["  *", " ***", "*****"]
piramide(4); // ["   *", "  ***", " *****", "*******"]
piramide(5); // ["    *", "   ***", "  *****", " *******", "*********"]

Para mostrar la pirámide en web o consola, se puede utilizar join()

Para web:
1
2
3
document.write("<pre>");
document.write(piramide(10).join("\n"));
document.write("</pre>");

Para la consola:
1
console.log(piramide(10).join("\n"));
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


70 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(62)
Publicado el 30 de Junio del 2020 por Terry (3 códigos)
30.910 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
sin imagen de perfil

Paint en Canvas JS


69 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)
16.645 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
Val: 2.288
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Determinar si un array de números son consecutivos


59 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(2)
Publicado el 15 de Noviembre del 2019 por Katas (200 códigos)
17.536 visualizaciones desde el 15 de Noviembre del 2019
Función que recibe un array de números y determina si son consecutivos.
Para determinar si son consecutivos, se ejecuta un bucle (recude) donde se resta el valor anterior con el valor actual+1. Si al final el resultado es 0 todos son consecutivos.

1
2
3
4
5
6
7
8
9
sonConsecutivos([4,3,2,1]);                 // 0 SI
sonConsecutivos([5,4,3,2,1,0,-1,-2]);       // 0 SI
sonConsecutivos([1,2,3,4,5,6,7,8,9,10,11]); // 0 SI
sonConsecutivos([-5,-4,-3,-2]);             // 0 SI
sonConsecutivos([5,3,2,1]);                 // 1 NO
sonConsecutivos([1,2,4,5]);                 // 1 NO
sonConsecutivos([]);                        // -1 NO
sonConsecutivos([5]);                       // -1 NO
sonConsecutivos(["casa"]);                  // -1 NO
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

Evento al pasar con el ratón por encima de un elemento


56 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(3)
Publicado el 1 de Octubre del 2016 por Xve (294 códigos)
47.162 visualizaciones desde el 1 de Octubre del 2016
Este simple código muestra como ejecutar una función de javascript al pasar el ratón por encima de un elemento, y ejecutar otra función javascript al dejar de pasar el ratón por encima.
Es similar al $.hover() de jquery en javascript.
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

Calcular la mediana de una lista de numeros


52 visualizaciones el último mes

JavaScript

Publicado el 26 de Marzo del 2021 por Katas (200 códigos)
9.150 visualizaciones desde el 26 de Marzo del 2021
La mediana es el "número en el medio" de una lista ordenada de números si es par, en el caso de que sea impar, tenemos que encontrar el par central de números, y después calcular su valor medio.

1
2
3
4
5
mediana([1, 2, 3, 4, 5]); // 3
mediana([1, 2, 3, 4]); // 2.5
mediana([1, 2, 3]); // 2
mediana([1, 2]); // 1.5
mediana([1]); // 1


En el caso de que sea par, con la función slice() obtenemos un array con los dos valores del centro, el cual pasamos a la función reduce para que los sume y el resultado lo dividimos entre 2 para obtener la media.
1
arr.slice(l/2-1, l/2+1).reduce((a,b) => a+b)/2

En el caso de que sea impar, simplemente obtenemos el valor del medio con slice()
1
arr.slice((l/2), l/2+1)[0]
Imágen de perfil
Val: 211
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Determinar el tipo de triángulo


52 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 8 de Mayo del 2019 por Joan (121 códigos)
22.258 visualizaciones desde el 8 de Mayo del 2019
Programa que lea los lados de 4 triángulos, e indica:
- De cada uno de ellos, qué tipo de triángulo es: equilátero (tres lados iguales), isósceles (dos lados iguales), o escaleno (ningún lado igual)
- Cantidad de triángulos de cada tipo
- Tipo de triángulo del que hay menor cantidad
- Tipo de triángulo del que hay mayor cantidad

triangulo
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

Gato (Tres en raya)


52 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(12)
Publicado el 4 de Marzo del 2017 por Alejandro (9 códigos)
40.864 visualizaciones desde el 4 de Marzo del 2017
Otro sacado del libro, obviamente corregido pues tenia varios bugs.
1.- Siempre hacia la misma jugada.
2.- Al presionar fuera del área para marcar o en una ya marcada dejaba de funcionar.
3.- Al ganar decía pensando, la maquina hacia una marca mas y luego decía Ganaste.
4.- Al terminar el juego no había nada mas que hacer.

Ahora Varia la jugada y no falla al clikar en otras áreas, si ganas lo avisa al momento y presionando de nuevo comienza un juego nuevo.
Gato
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

Dibujo del árbol de navidad


51 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 14 de Enero del 2018 por Xavi (548 códigos) (Publicado el 2 de Junio del 2017)
19.210 visualizaciones desde el 2 de Junio del 2017
Este simple código, muestra como dibujar dos tipos de árbol de navidad con asteriscos.

arbol-de-navidad
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

Indicador de máximo y mínimo con mas de una aguja


50 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 1 de Octubre del 2019 por Joel (150 códigos)
1.907 visualizaciones desde el 1 de Octubre del 2019
Aquí les muestro una manera de crear un indicador con mínimo y máximo con varias agujas, utilizando únicamente CSS para crear el dibujo y JavaScript para mover las agujas.

indicador-minimo-maximo-con-4-agujas

Continuación del código de https://www.lawebdelprogramador.com/codigo/CSS/5543-Indicador-de-minimo-y-maximo-con-aguja.html
sin imagen de perfil

BOOTSTRAP DATA-TABLE DINAMICA FETCH


50 visualizaciones el último mes

JavaScript

Publicado el 10 de Enero del 2023 por Jefferson (11 códigos)
2.118 visualizaciones desde el 10 de Enero del 2023

Suelo trabajar con Bootstrap y ya no queria usar JQuery para manejar la libreria DataTable.

Se que existen muchas librerias DataTable con Vanilla Javascript, Vue, React, etc..

Pero queria tener algo sencillo, de solo configurar 3-4 variables y armar mi datatable dinamica.

Pues bien como suelo usar Bootstrap me ahorre de hacer el css y solo me hice el js.

Lo publico por si alguien desea usarlo y/o se animan para crear un nucleo solido con funciones mas complejas.

Repito cualquier error por favor háganlo saber (que debo tener), ya que lo hice al paso y aun no lo uso en producción.



img3
sin imagen de perfil

Calculadora Basica


48 visualizaciones el último mes

JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Actualizado el 17 de Marzo del 2018 por Anonymous (35 códigos) (Publicado el 15 de Marzo del 2017)
75.456 visualizaciones desde el 15 de Marzo del 2017
Esta es una calculadora un poco mas compleja que la que había hecho anteriormente