Códigos Fuente de JavaScript

Mostrando del 51 al 60 de 916 registros
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

Dado un array de valores, devolver el indice del elemento mas grande


JavaScript

Publicado el 29 de Abril del 2021 por Katas (200 códigos)
1.054 visualizaciones desde el 29 de Abril del 2021
Esta función recibe un array de valores y tiene que devoler el indice del elemento mas grande

Para este ejemplo, he utilizado la función reduce()
1
arr.reduce((acum, el, i) => acum[0] > el ? acum : [el, i], [0, 0])[1];
(acum, el, i) -> En cada iteración del bucle, se obtiene el valor acumulado (por defecto es [0, 0]), el valor y el indice del elemento.
[0, 0] -> En el array acum tenemos dos valores, el primero es el valor mas grande encontrado, y en el segudo el indice de dicho valor.
acum[0] > el ? acum : [el, i] -> Si el ultimo valor guardado es superior al valor actual del array, entonces, devolvemos simplemente la variable acum, pero si no es así, devolvemos un array con el valor y el indice de ese elemento.

1
2
3
indiceDelMasGrande([85, 100, 90]); // 1
indiceDelMasGrande([8, 8, 8]); // 2
indiceDelMasGrande([850, 100, 90]); // 0
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

Recorrer todos los elementos superiores a un elemento dado en el DOM


JavaScript

Publicado el 28 de Abril del 2021 por Joel (150 códigos)
3.270 visualizaciones desde el 28 de Abril del 2021
Esta función recorre de manera recursiva todos los elementos del DOM desde un elemento dado hasta el tag <html>.
La función tiene que recibir el elemento inicial donde empezar a recorrer el DOM y opcionalmente, se puede especificar el valor que quieres de devuelva de cada uno de los elemento que va encontrando en el DOM. Si no se especifica ningún valor, simplemente devuelve el elemento para poder gestionarlo.

1
2
3
4
5
6
7
recorrerElDom(document.querySelector("ul")); // [div, body, html]
recorrerElDom(document.querySelector("ul"), "tagName"); // ["DIV", "BODY", "HTML"]
recorrerElDom(document.querySelector("ul"), "offsetWidth"); // [469, 469, 485]
recorrerElDom(document.getElementById("segundoLi"), "nextSibling"); // [text, text, null, null]
recorrerElDom(document.getElementById("segundoLi")); // [ul, div, body, html]
recorrerElDom(document.getElementById("segundoLi"), "tagName"); // ["UL", "DIV", "BODY", "HTML"]
recorrerElDom(document.querySelector("span"), "tagName"); // ["P", "DIV", "LI", "UL", "DIV", "BODY", "HTML"]
Imágen de perfil
Val: 606
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Subir un elemento desde la parte inferior del navegador hasta la parte superior


JavaScript

Publicado el 20 de Abril del 2021 por Info (100 códigos)
1.450 visualizaciones desde el 20 de Abril del 2021
Este código muestra como poder mostrar unos elementos de HTML subiéndolos desde la parte inferior hasta la parte superior del navegador.

Para ello, se ha creado una clase que va recibiendo el id del elemento y devuelve dos funciones, una para mostrar el elemento y otra función para esconderlo. Estas funciones hay que llamarlas desde los elementos que queramos que abra y cierra los elementos.

En este ejemplo, veras que dos capas se abren con un botón, y una tercera se abre con un enlace. De igual manera para cerrar los elementos, en uno hay que pulsar sobre el mismo elemento, otro hay que pulsar sobre un botón, y el tercero hay que darle a un enlace.

CPT2104201248-403x491
Imágen de perfil

Juego del pong en JavaScript


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 17 de Abril del 2021 por Administrador (718 códigos)
5.325 visualizaciones desde el 17 de Abril del 2021
Código que muestra como hacer el juego del pong en javascript con dos usuarios utilizando el mismo teclado.
El usuario de la izquierda utiilza las teclas Q y A y el usuario de la derecha las teclas O y L

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

Mover una cortina por encima de una imagen


JavaScript

Publicado el 16 de Abril del 2021 por Info (100 códigos)
1.207 visualizaciones desde el 16 de Abril del 2021
Este código permite sobreponer parte de una imagen encima de la otra, y con el ratón mover parte de la imagen superior sobre la imagen inferior.

cortina-por-encima-imagen


Para este efecto se utilizan dos imágenes, la que esta encima y la que se encuentra debajo, y pulsando sobre la imagen o arrastrando el ratón, podemos descubrir mas o menos la imagen inferior.
El encargado de crear este efecto es el estilo clip-path https://developer.mozilla.org/en-US/docs/Web/CSS/clip-path

Para el ejemplo, he utilizado una imagen a color, y la misma imagen en escala de grises para visualizar el efecto.
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 valor es numérico o un objeto Number()


JavaScript

Publicado el 14 de Abril del 2021 por Katas (200 códigos)
885 visualizaciones desde el 14 de Abril del 2021
Tres funciones para determinar diferentes tipo de números.

isNumberValue() Determina si es una variable con un valor numérico

isNumberObject() Determina si es un objeto Number()

isNumber() Determina si es una variable numero o un objeto Number(). Utiliza las dos funciones anteriores.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
isNumberValue(10); // true
isNumberValue(-10.2); // true
isNumberValue("10"); // false
isNumberValue("casa"); // false
isNumberValue(new Number(5)); // false
 
isNumberObject(new Number(5)); // true
isNumberObject(5); // false
isNumberObject("10"); // false
 
isNumber(new Number(5)); // true
isNumber(new Number(5.2)); // true
isNumber(new Number(-1.5)); // true
isNumber(new Number(-0.0)); // true
isNumber(new Number(0.0)); // true
isNumber(new Number(0)); // true
isNumber(new Number(1e5)); // true
isNumber(5); // true
isNumber(5.2); // true
isNumber(-1); // true
isNumber(-0.0); // true
isNumber(0.0); // true
isNumber(0); // true
isNumber(1e5); // true
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

Rotar diferentes grupos de imágenes a diferente velocidad en milisegundos


JavaScript

Publicado el 13 de Abril del 2021 por Joel (150 códigos)
1.270 visualizaciones desde el 13 de Abril del 2021
Función que permite rotar un grupo de imágenes a una velocidad especificada en milisegundos, y permite indicar si al finalizar la rotación vuelve a empezar desde el principio.

Para cada rotación de imágenes, la función tiene que recibir:
- los milisegundos que se mostrara cada imagen
- array con la ubicación de las imágenes
- id del elemento <img> donde mostrar las imagenes
- un valor boleano que determina si cuando finalicen las imagenes, empieza desde el inicio nuevamente (por defecto es true)

En este gif, se muestran varios grupos de imágenes que se mueven a diferente velocidades.
rotar-imagenes-cada-n-milisegundos
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


JavaScript

Publicado el 13 de Abril del 2021 por Info (100 códigos)
17.298 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