Calificación:
  • 0 voto(s) - 0 Media
  • 1
  • 2
  • 3
  • 4
  • 5
Trucos y efectos de Javascript para tu página web
#1
Solo son códigos sencillos, constan de dos o tres líneas como máximo, puedes copiar y pegar.
El propósito es que puedan ser de utilidad, Todos trabajan perfectamente en cualquier navegador y validan sea cual sea la declaración de la página, ya sea HTML4, XHTML o HTML5.

Mostrar mensajes de bienvenida y despedida en una página


Función muy utilizada para mostrar un saludo o bienvenida cuando el usuario carga la página y es opcional mostrar otro cuando sale de la página o cierra el navegador. Para eso se usan las funciones ONLOAD y ONUNLOAD. 

<script type="text/javascript"> 
window.onload=function(){alert('Bienvenido a esta pagina');} 
window.onunload=function(){alert('Vuelva en otro momento');} 
</script>
 

Si la pagina utiliza el evento onload para iniciar otras funciones es necesario incluir la anterior de la siguiente forma: párrafo con un identificador nombrado: 'link1' (puedes darle otro nombre): 


<script type="text/javascript"> 
window.onload = function() 

funcion1(){alert('Bienvenido a esta pagina');} 
funcion2(); 
funcion3(); 

</script>
 



Añadir efectos a los vínculos

1- Muestra un cuadro de alerta con un mensaje al poner el ratón encima de un vínculo. 


<a href="http://tu-sitio.com" 
onmouseover="javascript:alert('Mensaje');return false">Vínculo</a>
 

2- Muestra un mensaje de alerta al hacer clic sobre un vínculo, antes de enviar al usuario al destino. 


<a href="http://tu-sitio.com" onclick="javascript:alert('Mensaje');">Vínculo</a> 

3- Aumenta el tamaño del texto del vínculo al poner el ratón encima, al quitarlo restaura el texto a su tamaño original. 


<div id="vinc"><a href="http://tu-sitio.com" onmouseover="javascript: void(document.getElementById('vinc').style.fontSize='3em')" onmouseout="javascript: void(document.getElementById('vinc').style.fontSize='1em')"> Vínculo</a></div> 

4- Mensaje de confirmación antes de enviar el usuario a una página. 


<a href="javascript:if (confirm('Quieres entrar a NorfiPC?')) 
{parent.location='http://norfipc.com/index.html';};">Vínculo</a>
 


Contador de visitantes engañoso.

Script curioso pero engañoso para exagerar la supuesta cantidad de visitantes de una pagina. 
Usted es el visitante 42353 de esta página. 

<script type="text/javascript"> 
var ran 
ran = Math.round(Math.random()*50000) 
document.write("Usted es el visitante " + ran + " de esta página."; ) 
</script>
 



Botón para imprimir página


<input type="button" value="Imprime esta página" onclick="window.print()"> 



Crear restricciones al uso del ratón

Deshabilitar el uso del clic derecho por completo 

<script type="text/javascript"> 
document.oncontextmenu = function(){return false} 
</script>
 

Impedir la selección y la copia de texto en una página 

<script type="text/javascript"> 
window.onload = function() 
// Para internet Explorer 
{document.onselectstart = function(){return false;} 
// Para Firefox 
document.onmousedown = function(){return false;}} 
</script>
 



Acción al dar un clic derecho

Mostrar un mensaje o ejecutar otra acción al dar un clic derecho. 

<script type="text/javascript"> 
//<![CDATA[ 
function right(e) { 
if (navigator.appName == 'Netscape' && e.which == 3) { 
alert('Prohibido clic derecho'); 
return false;}else 
if (navigator.appName == 'Microsoft Internet Explorer' 
&& event.button==2) { 
alert('Prohibido clic derecho');return false;}return true;} 
document.onmousedown = right; 
//]]> 
</script>
 


Mostrar la fecha y hora 

Mostrar la fecha y hora en la barra de estado con un mensaje. (Solo Internet Explorer) 

<script type="text/javascript"> 
function hora() { 
var DateString=(new Date()).toString(); 
self.status=DateString.substring(0,3+DateString.lastIndexOf(':' ))+ 
"Cualquier mensaje"; 
setTimeout("hora()",200);} 
hora() 
</script>
 




Identificar el navegador del usuario

Código Browser Sniffer, identifica el navegador del usuario y lo envía a la página preparada para dicho navegador. 

<script type="text/javascript"> 
if(navigator.appName.indexOf("Netscape"; ) != -1){ 
location="netscape.html";} 
if(navigator.appName.indexOf("Microsoft Internet Explorer"; ) != -1){ 
location="internet-explorer.html";} 
</script>
 

Establecer como página de inicio

Propone al usuario establecer esta página como su página de inicio (Solo Internet Explorer) 

<a href="javascript:if 
(document.all){document.body.style.behavior='url(#default#homepage)'; 
document.body.setHomePage('http://norfipc.com');};"> 
Hazme tu página de inicio</a>
 

Guardar una página en los favoritos del navegador

Vinculo que permite al lector agregar una página a sus favoritas. 
Se usa un código Browser Sniffer o sea si el navegador es Internet Explorer se ejecuta una función diferente que si es Firefox. 

<a href="javascript:if(navigator.appName.indexOf('Microsoft Internet Explorer')!=-1){window.external.AddFavorite (''+window.document.URL,''+window.document.title);} if(navigator.appName.indexOf('Netscape')!=-1){window.sidebar.addPanel(''+window.document.title,''+window.document.URL,'')} else{parent.location=(location.href);}">Guardar</a> 



Texto parpadeante

Si deseas insertarle un vínculo al texto parpadeante utiliza el segundo DIV, (solo puede existir en el código in ID único).
 
<script type="text/javascript"> 
window.setInterval (BlinkIt, 500); 
var color = "red"; 
function BlinkIt () { 
var blink = document.getElementById ("blink"; ); 
color = (color == "#ffffff"; )? "red" : "#ffffff"; 
blink.style.color = color; 
blink.style.fontSize='36px';} 
</script> 
<div id="blink">Hola!</div> 
<div id="blink" onclick="parent.location='http://norfipc.com'"> 
Hola!</div>
 

Vínculo para sugerir una página

Permite sugerir una página, enviando por email su título y URL. 

<a href="javascript:location.href='mailto: ?SUBJECT=Te%20sugiero: 
'+document.title+'&amp;BODY='+escape(location.href);void 0"> 
Sugerir esta página</a>
 


Abrir una ventana secundaria

Primero vamos a ver que con una línea de Javascript podemos hacer cosas bastante atractivas. Por ejemplo podemos ver cómo abrir una ventana secundaria sin barras de menús que muestre el buscador Google. El código sería el siguiente. 

<script> 
window.open("http://www.google.com","","width=550,height=420,menubar=no"; ) 
</script>
 


Botón de volver

Otro ejemplo rápido se puede ver a continuación. Se trata de un botón para volver hacia atrás, como el que tenemos en la barra de herramientas del navegador. Ahora veremos una línea de código que mezcla HTML y Javascript para crear este botón que muestra la página anterior en el historial, si es que la hubiera. 

<input type=button value=Atrás onclick="history.go(-1)"> 
No me dejan poner mis web Triste
WWW


Posibles temas similares...
Tema Autor Respuestas Vistas Último mensaje
  JavaScript en 14 minutos Posits 5 208 12-04-2018, 08:44 AM
Último mensaje: easy english
Ladrillo [Aporte] pagina con vídeo de fondo gamemaster94 18 533 02-03-2018, 05:43 PM
Último mensaje: ArtuGar
  Solucionado: Pagina carga como no segura diana30dom 3 219 08-01-2018, 09:15 AM
Último mensaje: Vicen
  PRIMER PAGINA WEB HTML DEL MUNDO Smithcanal 27 1,125 21-10-2017, 01:47 AM
Último mensaje: ReyNexo23
Pregunta Solucionado: Ayuda con página TamiGantcheff 4 318 02-08-2017, 04:17 PM
Último mensaje: Vicen
  [Tutorial] Métodos para redireccionar URLs (HTML, PHP y Javascript wiston3 1 353 01-12-2016, 11:12 PM
Último mensaje: zeuz
  Linux Foundation respalda JavaScript Kiichi 3 402 03-11-2016, 03:43 AM
Último mensaje: habacuc78
  [Aporte] Curso básico de Javascript habacuc78 22 1,496 05-07-2016, 03:53 PM
Último mensaje: escuelasegura
  [Tutorial] Trucos con CSS parte I JancoBH 2 584 13-03-2016, 01:00 AM
Último mensaje: JancoBH
Sonrisa [Tutorial] Cómo utilizar Javascript para actualizar un Título R0bert0 0 704 05-12-2015, 10:07 PM
Último mensaje: R0bert0



Usuarios navegando en este tema: 1 invitado(s)