Los códigos más votados de JavaScript

Listado de los códigos más votados desde su publicación.
sin imagen de perfil

Post-IT


JavaScript

estrellaestrellaestrellaestrellaestrella(16)
Publicado el 8 de Julio del 2002 por tecniCam
21.102 visualizaciones desde el 8 de Julio del 2002
Muestra un Post-IT en la pantalla, el cual se puede mover y cerrar. Permite colocar código HTML en su interior.
Imágen de perfil
Val: 938
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Juego de memoria (Memorama)


JavaScript

estrellaestrellaestrellaestrellaestrella(11)
Actualizado el 25 de Noviembre del 2017 por Alejandro (Publicado el 25 de Febrero del 2017)
23.350 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

Cuenta atras hasta una fecha


JavaScript

estrellaestrellaestrellaestrellaestrella(9)
Publicado el 19 de Noviembre del 2006 por Administrador
27.204 visualizaciones desde el 19 de Noviembre del 2006
Código que muestra la cuenta atras hasta una fecha determinada.
Imágen de perfil
Val: 593
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Paint en Canvas JS


JavaScript

estrellaestrellaestrellaestrellaestrella(9)
Actualizado el 17 de Marzo del 2018 por Humberto (Publicado el 10 de Octubre del 2017)
5.148 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.202
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Cuenta atras para hacer una redirección


JavaScript

estrellaestrellaestrellaestrellaestrella(8)
Publicado el 26 de Enero del 2014 por Xavi
24.992 visualizaciones desde el 26 de Enero del 2014
Código que muestra una cuenta atrás de 5 segundos hasta que salta de página.
Imágen de perfil
Val: 1.389
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Generador de Códigos QR con JavaScript


JavaScript

estrellaestrellaestrellaestrellaestrella(8)
Actualizado el 17 de Diciembre del 2017 por ScriptShow (Publicado el 1 de Febrero del 2017)
8.816 visualizaciones desde el 1 de Febrero del 2017
Generador de Códigos QR offline con JavaScript.

Una aplicación muy extendida por la web en sus diversas versiones... Aquí traemos un sencillo script que hace lo mismo, genera Códigos QR apartir de un texto escrito en un Textarea.
Para cualquier duda, leer los créditos incluidos en el archivo JS.

The word 'QR Code' is registered trademark of DENSO WAVE INCORPORATED

Espero sea útil.

Un saludo
sin imagen de perfil

Botón derecho


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 5 de Junio del 2006 por Luis Artur
12.256 visualizaciones desde el 5 de Junio del 2006
código que deshabilita el botón derecho del mouse y la tecla que se encuentra al lado derecho de la tecla Windows del lado derecho del teclado.
sin imagen de perfil

Vision de una Encriptacion de datos


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 30 de Octubre del 2007 por Adriano Flores, Josue
6.451 visualizaciones desde el 30 de Octubre del 2007
Lo que hace este código para codificar es crear dos variables temporales uno para almacenar los datos que deseamos codificar, y otro para almacenar los datos ya codificados.
Se convierte cada carácter de la palabra en código UniCode y sumamos uno a cada carácter, luego esta suma nuevamente le convertimos en carácter y le almacenamos.
Imágen de perfil

Menu desplegable con enlace


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Actualizado el 6 de Septiembre del 2017 por Administrador (Publicado el 4 de Febrero del 2002)
33.681 visualizaciones desde el 4 de Febrero del 2002
Menu desplegable, el cual realiza el enlace una vez seleccionado.
sin imagen de perfil

Select en un formulario


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 18 de Febrero del 2002 por Rafael Avaria
15.544 visualizaciones desde el 18 de Febrero del 2002
Este código permite cambiar el campo select de un formulario al seleccionar una opcion del mismo sin actualizar la pagina.
Imágen de perfil

Copiar al portapapeles


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 29 de Junio del 2009 por Administrador
28.643 visualizaciones desde el 29 de Junio del 2009
Código que muestra como copiar un texto de un formulario al portapapeles. Probado en IE 5,6,7 y Firefox 2.0,3.0
Imágen de perfil
Val: 567
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Función para buscar y filtrar valores en tabla HTML (elemento del DOM)


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 22 de Febrero del 2017 por kip
7.651 visualizaciones desde el 22 de Febrero del 2017
Función que busca y muestra las celdas con el valor tomado de un input text, si no existe el dato o valor se mostrara un mensaje en la tabla.

Screenshot_404

Screenshot_405

Screenshot_406

Es de suma importancia que la tabla tenga una estructura como la siguiente thead -> tr -> th y tbody -> tr -> td:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table>
	<thead>
		<tr>
			<th>
			</th>
			.........
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>
			</td>
			.........
		</tr>
	</tbody>
</table>

Para usarla se debe colocar el archivo btab.js (con el path adecuado) en el archivo HTML de esta forma:

1
<script src="btab.js"></script>

La función recibe tres parámetros:

btab(id_del_input, id_de_tabla, true or false [OPCIONAL] )

El primer parámetro es el el atributo id del input, de alli se obtendra el valor a buscar.
El segundo parámetro es el atributo id de la tabla, donde se buscaran los datos.
Por último y opcional, un booleano sea este true o false indicara si la busqueda sera insensible a mayúsculas, por defecto es sensible a estas (false) y si si desea cambiar esto pasarle como valor true.

La búsqueda se realiza en todas las celdas de la tabla, si en alguna de estas existe el dato de búsqueda se mostrara toda la fila perteneciente a esta celda.

Ejemplo:
Screenshot_402

Es posible buscar mas de un dato en la tabla, para esto se debe separar por una coma , (valor1, valor2, ....) cada valor a buscarse.

Ejemplo:
Screenshot_403

La llamada a la funcion (por si usas jQuery) no se debe colocar dentro de las lineas:
1
$(document).ready(...

Esta funcion se encarga de ejecutarse por si misma cuando el DOM esta completamente cargada para evitar algun problema con los elementos de este.

Si surge algún problema con la función escribirlo por aqui, pronto se mejorara y añadiran mas detalles.

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

Gato (Tres en raya)


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 4 de Marzo del 2017 por Alejandro
14.659 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: 2.268
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


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 17 de Julio del 2017 por xve
7.953 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

Cambiar una imagen al pasar por encima con el ratón


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 5 de Febrero del 2002 por Administrador
39.215 visualizaciones desde el 5 de Febrero del 2002
Este código, modifica una imagen al pasar con el ratón por encima.
sin imagen de perfil

Cambio de color de la barra de scroll


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 16 de Febrero del 2004 por Corpol
23.172 visualizaciones desde el 16 de Febrero del 2004
Código que muestra como cambiar dinámica-mente el color de la barra de scroll del navegador. Genera el código html para pegar dentro de la página con el aspecto deseado.
Imágen de perfil
Val: 274
Bronce
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Geolocalización basada en W3C


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 17 de Enero del 2015 por txema
4.941 visualizaciones desde el 17 de Enero del 2015
La geolocalización es un aspecto de interés generalizado en el mundo web.

W3C, ocupa todo un equipo en su seguimiento y desarrollo.

El código que se presenta, pretende facilitar al webmaster el acceso de la programación básica y completa para sus desarrollos de aplicaciones de diferente orden.
Considero suficientemente comentadas las funciones en el código Javascript.

Lo que se ofrece son datos, sin necesidad de mapas ni soporte externo. Cada cual es libre de adaptarlos a diferentes tipos de mapas (OMS, Google Maps, u otros) .

No obstante, W3C comunica a través de su página http://dev.w3.org/geo/api/spec-source.html las últimas ediciones con acceso en cabecera a las últimas versiones, editores, etc.

Si bien se editan semestralmente nuevas versiones, cualquier noticia sobre modificación, mejora o implementación nueva que aparezca será muy bien recibida por mí
Imágen de perfil
Val: 1.389
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Editor de texto con opciones básicas


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 18 de Diciembre del 2016 por ScriptShow (Publicado el 10 de Diciembre del 2016)
5.308 visualizaciones desde el 10 de Diciembre del 2016
Sencillo Editor basado en "execCommand" incluido en JavaScript. Simplifica bastante el código necesario para ciertos comandos; estos comandos son ampliables siguiendo instruciones y documentación sobre "execCommand".
Es compatible con la mayoría de navegadores, con escasas diferencias. Se ha utilizado a lo largo de años para construir editores más sofisticados.

Es útil para experimentar y ver resultados. Puede ser adaptable con CSS-Style a pequeños proyectos. En fin...


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

Juego de la vida - Canvas (No óptimo)


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 18 de Octubre del 2017 por kip (Publicado el 28 de Septiembre del 2017)
2.130 visualizaciones desde el 28 de Septiembre del 2017
El viejo y conocido 'Juego de la vida' de John Conway en canvas usando un algoritmo simple pero no óptimo.

El algoritmo funciona bien cuando el canvas tiene un tamaño menor a 600 x 600, baja el rendimiento cuando existen muchas células vivas en este, claro que se puede mejorar pero por ahora asi es como quedara.

Screenshot_614

Screenshot_615

Puedes crear las células aleatoriamente o directamente haciendo clic.
Imágen de perfil
Val: 2.268
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Obtener el sistema operativo


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 10 de Octubre del 2017 por xve
5.764 visualizaciones desde el 10 de Octubre del 2017
Este simple código muestra como obtener el sistema operativo del cliente con JavaScript
Imágen de perfil
Val: 2.268
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Como añadir un archivo CSS desde javascript


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 14 de Junio del 2018 por xve
1.052 visualizaciones desde el 14 de Junio del 2018
Este simple código muestra como añadir una hoja de estilos CSS desde javascript.

En este ejemplo, añade la hora de estilo estiloNoche.css en la página a partir de las 21:00 horas
sin imagen de perfil

Muestra la fecha actual


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 18 de Febrero del 2002 por Ajab
21.739 visualizaciones desde el 18 de Febrero del 2002
Muestra la fecha Actual en la página Web
sin imagen de perfil

Simular un GIF animado


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 1 de Octubre del 2002 por Carlos Roberto Guimaraenz
20.801 visualizaciones desde el 1 de Octubre del 2002
A partir de 4 imagenes, este código simula un Gif Animado.
sin imagen de perfil

Desplazamiento de una imagen de fondo


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 27 de Febrero del 2004 por Corpol
26.599 visualizaciones desde el 27 de Febrero del 2004
Código para desplazar lateralmente la imagen de fondo de una web, en ambas direcciones, con velocidad variable.
Imágen de perfil
Val: 2.202
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Formulario para cambiar la contraseña


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 21 de Julio del 2019 por Xavi (Publicado el 17 de Mayo del 2009)
28.590 visualizaciones desde el 17 de Mayo del 2009
Código de ejemplo que muestra el código para validar la nueva contraseña en un formulario para cambiarla. Valida que tenga un tamaño mínimo de 6 caracteres y que contenga números y letras.

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

canvas en pantalla completa


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 18 de Agosto del 2018 por Humberto (Publicado el 20 de Agosto del 2016)
3.195 visualizaciones desde el 20 de Agosto del 2016
el código lo que hace es ponerte la pantalla de canvas a pantalla completa de el navegador
nota:quiero agregar que el código no es mio solamente es que lo quiero compartir con ustedes para que no batallen en la creación de sus juegos xd
Captura-de-pantalla-26
sin imagen de perfil
Val: 24
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Creación de tabla html


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 14 de Febrero del 2017 por Fer
5.378 visualizaciones desde el 14 de Febrero del 2017
Muchos pueden buscar una manera de pedirle al usuario el numero de filas y columnas para crear una tabla en html. Por medio de JavaScript se puede conseguir con este sencillo y funcional código.
Espero les ayude.
Imágen de perfil
Val: 1.389
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Botón "+Info" que aparece al llegar al final de la pagina


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 2 de Julio del 2017 por ScriptShow
1.415 visualizaciones desde el 2 de Julio del 2017
A veces, cuando llegamos al pie de página, aparecen indicadores como recomendaciones, para seguir navegando, etc. Una especie de Flyout, Slides, en fin...

Bien, todos ellos producto de los "nuevos" formatos de diseño. Ya existían en los tiempos del DHTML.
Si mezclamos lo de ahora y lo de antes, conseguimos un resultado parecido, que apenas consume recursos. ¡Vamos a ello!...
Imágen de perfil
Val: 1.389
Plata
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

GRID Responsive JavaScript


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 8 de Septiembre del 2018 por ScriptShow (Publicado el 28 de Septiembre del 2017)
3.362 visualizaciones desde el 28 de Septiembre del 2017
Contiene ejemplos con imágenes incluidas y distribuidas en GRID responsive, adaptable.
Esta versión incluye tres variantes del script. Puedes elegir la opción más adecuada a tu proyecto.

Cambia el número de columnas y tamaño del contenido del GRID con JavaScript compatible.

Origen de las imágenes: https://pixabay.com/

Espero sea útil.

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

Crear los barcos para el juego de Guerra de barcos


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 13 de Enero del 2018 por xve
2.119 visualizaciones desde el 13 de Enero del 2018
Código que genera un array bidimensional donde pone los barcos necesarios para jugar al juego de Guerra de barcos y muestra su posición en la pantalla utilizando canvas.

guerra-de-barcos


Los barcos no se pueden tocar en la cuadricula.
Los tipos de barcos a utilizar en el juego son:
- 1 de 4 posiciones
- 2 de 3 posiciones
- 3 de 2 posiciones
- 4 de 1 posición

Muy agradecido a mi amigo Kip por su ayuda en el desarrollo!!!