Los códigos más votados de JavaScript

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

Post-IT


JavaScript

estrellaestrellaestrellaestrellaestrella(16)
Publicado el 08 de Julio del 2002 por tecniCam
20.683 visualizaciones desde el 08 de Julio del 2002. Una media de 28 por semana
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

Juego de memoria (Memorama)


JavaScript

estrellaestrellaestrellaestrellaestrella(10)
Actualizado el 25 de Noviembre del 2017 por Alejandro (Publicado el 25 de Febrero del 2017)
14.700 visualizaciones desde el 25 de Febrero del 2017. Una media de 175 por semana
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
24.848 visualizaciones desde el 19 de Noviembre del 2006. Una media de 42 por semana
Código que muestra la cuenta atras hasta una fecha determinada.
Imágen de perfil

Paint en Canvas JS


JavaScript

estrellaestrellaestrellaestrellaestrella(9)
Actualizado el 17 de Marzo del 2018 por Humberto (Publicado el 10 de Octubre del 2017)
3.235 visualizaciones desde el 10 de Octubre del 2017. Una media de 63 por semana
Es una beta del paint para canvas que incluye varias herramientas que te servirán para el dibujo básico

Captura-de-pantalla-66

Botón derecho


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 05 de Junio del 2006 por Luis Artur
12.089 visualizaciones desde el 05 de Junio del 2006. Una media de 21 por semana
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.

Vision de una Encriptacion de datos


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 30 de Octubre del 2007 por Adriano Flores, Josue
6.257 visualizaciones desde el 30 de Octubre del 2007. Una media de 14 por semana
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

Cuenta atras para hacer una redirección


JavaScript

estrellaestrellaestrellaestrellaestrella(7)
Publicado el 26 de Enero del 2014 por Xavi
19.526 visualizaciones desde el 26 de Enero del 2014. Una media de 84 por semana
Código que muestra una cuenta atrás de 5 segundos hasta que salta de página.
Imágen de perfil

Menu desplegable con enlace


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Actualizado el 06 de Septiembre del 2017 por Administrador (Publicado el 04 de Febrero del 2002)
32.636 visualizaciones desde el 04 de Febrero del 2002. Una media de 42 por semana
Menu desplegable, el cual realiza el enlace una vez seleccionado.

Select en un formulario


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 18 de Febrero del 2002 por Rafael Avaria
15.381 visualizaciones desde el 18 de Febrero del 2002. Una media de 21 por semana
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
27.560 visualizaciones desde el 29 de Junio del 2009. Una media de 63 por semana
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

Confirmar el envió de un formulario mediante una ventana modal


JavaScript

estrellaestrellaestrellaestrellaestrella(6)
Publicado el 14 de Noviembre del 2017 por xve
2.152 visualizaciones desde el 14 de Noviembre del 2017. Una media de 49 por semana
Este código muestra una simple manera de solicitar una confirmación a cualquiera de nuestros formularios antes de ser enviado.


mensaje-confirmacion-enviar-formulario1

mensaje-confirmacion-enviar-formulario2
Imágen de perfil

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


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 05 de Febrero del 2002 por Administrador
37.145 visualizaciones desde el 05 de Febrero del 2002. Una media de 49 por semana
Este código, modifica una imagen al pasar con el ratón por encima.

Cambio de color de la barra de scroll


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 16 de Febrero del 2004 por Corpol
22.970 visualizaciones desde el 16 de Febrero del 2004. Una media de 35 por semana
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

Geolocalización basada en W3C


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 19 de Enero del 2015 por txema (Publicado el 17 de Enero del 2015)
4.080 visualizaciones desde el 17 de Enero del 2015. Una media de 21 por semana
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

Generador de Códigos QR con JavaScript


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Actualizado el 17 de Diciembre del 2017 por ScriptShow (Publicado el 01 de Febrero del 2017)
5.214 visualizaciones desde el 01 de Febrero del 2017. Una media de 63 por semana
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
Imágen de perfil

Gato (Tres en raya)


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 04 de Marzo del 2017 por Alejandro
7.435 visualizaciones desde el 04 de Marzo del 2017. Una media de 91 por semana
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

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)
1.323 visualizaciones desde el 28 de Septiembre del 2017. Una media de 28 por semana
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

Obtener el sistema operativo


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 10 de Octubre del 2017 por xve
2.671 visualizaciones desde el 10 de Octubre del 2017. Una media de 56 por semana
Este simple código muestra como obtener el sistema operativo del cliente con JavaScript
Imágen de perfil

Como añadir un archivo CSS desde javascript


JavaScript

estrellaestrellaestrellaestrellaestrella(5)
Publicado el 14 de Junio del 2018 por xve
759 visualizaciones desde el 14 de Junio del 2018. Una media de 42 por semana
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

Muestra la fecha actual


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 18 de Febrero del 2002 por Ajab
20.881 visualizaciones desde el 18 de Febrero del 2002. Una media de 28 por semana
Muestra la fecha Actual en la página Web

Simular un GIF animado


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 01 de Octubre del 2002 por Carlos Roberto Guimaraenz
20.113 visualizaciones desde el 01 de Octubre del 2002. Una media de 28 por semana
A partir de 4 imagenes, este código simula un Gif Animado.

Desplazamiento de una imagen de fondo


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 27 de Febrero del 2004 por Corpol
26.450 visualizaciones desde el 27 de Febrero del 2004. Una media de 35 por semana
Código para desplazar lateralmente la imagen de fondo de una web, en ambas direcciones, con velocidad variable.
Imágen de perfil

Formulario para cambiar la contraseña


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 17 de Mayo del 2009 por Xavi
25.237 visualizaciones desde el 17 de Mayo del 2009. Una media de 56 por semana
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.
Imágen de perfil

Cifrado César


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 08 de Septiembre del 2015 por Administrador
7.660 visualizaciones desde el 08 de Septiembre del 2015. Una media de 49 por semana
En criptografía, el cifrado César, también conocido como cifrado por desplazamiento, código de César o desplazamiento de César, es una de las técnicas de codificación más simples y más usadas. Es un tipo de cifrado por sustitución en el que una letra en el texto original es reemplazada por otra letra que se encuentra un número fijo de posiciones más adelante en el alfabeto. Por ejemplo, con un desplazamiento de 3, la A sería sustituida por la D (situada 3 lugares a la derecha de la A ), la B sería reemplazada por la E, etc.
Imágen de perfil

canvas en pantalla completa


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 18 de Agosto del 2018 por Humberto (Publicado el 20 de Agosto del 2016)
2.550 visualizaciones desde el 20 de Agosto del 2016. Una media de 28 por semana
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
Imágen de perfil

Saltar campos de formulario con la tecla enter


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 07 de Octubre del 2016 por xve
5.109 visualizaciones desde el 07 de Octubre del 2016. Una media de 49 por semana
Este simple ejemplo, muestra como movernos entre los <input> de un formulario pulsando la tecla "enter"
Al llegar al ultimo <input> envía el formulario.
Imágen de perfil

Editor de texto con opciones básicas


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Actualizado el 18 de Diciembre del 2016 por ScriptShow (Publicado el 10 de Diciembre del 2016)
3.120 visualizaciones desde el 10 de Diciembre del 2016. Una media de 35 por semana
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

Creación de tabla html


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 14 de Febrero del 2017 por Fer
2.613 visualizaciones desde el 14 de Febrero del 2017. Una media de 35 por semana
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

Efecto Máquina de Escribir con JS


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 15 de Febrero del 2017 por abzer0x
3.370 visualizaciones desde el 15 de Febrero del 2017. Una media de 42 por semana
Un simple efecto que simula una maquina de escribir utilizando javascript.
Imágen de perfil

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


JavaScript

estrellaestrellaestrellaestrellaestrella(4)
Publicado el 22 de Febrero del 2017 por kip
4.465 visualizaciones desde el 22 de Febrero del 2017. Una media de 56 por semana
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
Revisar política de publicidad