Códigos Fuente de JavaScript

Mostrando del 31 al 40 de 901 registros
Imágen de perfil
Val: 606
Bronce
Ha aumentado 1 puesto 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)
366 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.277
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 (199 códigos)
470 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.519
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 (149 códigos)
507 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 aumentado 1 puesto 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)
783 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: 3.519
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Incrementar un valor en un tiempo determinado


JavaScript

estrellaestrellaestrellaestrellaestrella(1)
Publicado el 8 de Abril del 2021 por Joel (149 códigos)
471 visualizaciones desde el 8 de Abril del 2021
Este código muestra como incrementar un valor, desde un valor inicial hasta un valor final con un intervalo dado, y en un tiempo determinado.

incrementar-valor-en-un-determinado-tiempo


El elemento que se va a incrementar, tiene que tener el estilo "counter" y hay que definir:
data-from-value -> valor inicial
data-to-value -> valor final
data-increment -> valor de incremento
data-duration -> duración para llegar del valor inicial al valor final

Se muestra la manera de añadir el valor del Euro o porcentaje utilizando el estilo ::after
Imágen de perfil
Val: 2.277
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Convertir las urls de un texto en enlace HTML


JavaScript

Publicado el 5 de Abril del 2021 por Katas (199 códigos)
464 visualizaciones desde el 5 de Abril del 2021
Función que recibe un texto plano, y devuelve el mismo texto pero con las urls en formato HTML (<a href="....">) para que puedan ser pulsadas por el usuario en la web.

1
2
3
4
console.log(urlTextToHTML("la url: https://www.dom.au esta ok")); // "la url: <a href="https://www.dom.au" target="_blank">https://www.dom.au</a> esta ok"
console.log(urlTextToHTML("la url: https://www.dom.au/index.html esta ok")); // "la url: <a href="https://www.dom.au/index.html" target="_blank">https://www.dom.au/index.html</a> esta ok"
console.log(urlTextToHTML("las urls: https://dom.au y https://www.dom.au estan ok")); // "las urls: <a href="https://dom.au" target="_blank">https://dom.au</a> y <a href="https://www.dom.au" target="_blank">https://www.dom.au</a> estan ok"
console.log(urlTextToHTML("texto sin url")); // "texto sin url"

Para quitar el tag html añadido al enlace, puedes utilizar la función urlHTMLToText() https://www.lawebdelprogramador.com/codigo/JavaScript/6994-Quitar-el-codigo-HTML-de-las-urls-de-un-texto.html
Imágen de perfil
Val: 2.277
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Quitar el código HTML de las urls de un texto


JavaScript

Publicado el 5 de Abril del 2021 por Katas (199 códigos)
556 visualizaciones desde el 5 de Abril del 2021
Función que recibe un texto con enlaces en formato HTML, y devuelve el mismo texto pero quitando el formato HTML (<a href="....">).

1
2
3
4
console.log(urlHTMLToText('la url: <a href="https://www.dom.au" target="_blank">https://www.dom.au</a> esta ok')); // "la url: https://www.dom.au esta ok"
console.log(urlHTMLToText('la url: <a href="https://www.dom.au/index.html" target="_blank">https://www.dom.au/index.html</a> esta ok')); // "la url: https://www.dom.au/index.html esta ok"
console.log(urlHTMLToText('las urls: <a href="https://dom.au" target="_blank">https://dom.au</a> y <a href="https://www.dom.au" target="_blank">https://www.dom.au</a> estan ok')); // 'las urls: https://dom.au y https://www.dom.au estan ok'
console.log(urlHTMLToText('texto sin url')); // "texto sin url"

Esta función hace lo contrario que la función urlTextToHTML() https://www.lawebdelprogramador.com/codigo/JavaScript/6993-Convertir-las-urls-de-un-texto-en-enlace-HTML.html
Imágen de perfil
Val: 2.277
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Añadir ceros o cualquier valor delante de un numero


JavaScript

Publicado el 2 de Abril del 2021 por Katas (199 códigos)
451 visualizaciones desde el 2 de Abril del 2021
Función de JavaScript para añadir ceros o cualquier carácter delante de un numero.

1
2
3
4
5
6
7
8
9
10
11
LeadingZero(123, 0); // "123"
LeadingZero(123, 1); // "123"
LeadingZero(123, 2); // "123"
LeadingZero(123, 3); // "123"
LeadingZero(123, 4); // "0123"
LeadingZero(123, 5); // "00123"
LeadingZero(123, 6); // "000123"
LeadingZero("123", 6); // "000123"
LeadingZero(123, 6, "x"); // "xxx123"
LeadingZero(123, 6, "-"); // "---123"
LeadingZero(1, 10, "casa"); // "acasacasa1"