Comparta los 55 consejos clásicos más utilizados en Javascript

Autor：Eve Cole Fecha de actualización：2025-01-17 19:12:01

1. oncontextmenu="window.event.returnValue=false" bloqueará completamente el botón derecho del mouse

<table border oncontextmenu=return(false)><td>no</table> se puede utilizar para la tabla

2. <body onselectstart="return false"> Cancelar la selección y evitar la copia

3. onpaste="return false" no puede pegar

4. oncopy="return false;" oncut="return false;" para evitar la copia

5. <link rel="Icono de acceso directo" href="favicon.ico"> Reemplace la barra de direcciones de IE con su propio icono

6. <link rel="Bookmark" href="favicon.ico"> puede mostrar su icono en favoritos

7. <input style="ime-mode:disabled"> Cerrar el método de entrada

8. Lleva siempre un marco

if (window == top)top.location.href = "frames.htm"; //frames.htm es una página web de marco

// --></script>

9. Evite ser incriminado

<IDIOMA DE ESCRITURA=JAVASCRIPT><!--

if (ubicación.superior! = ubicación propia)ubicación.superior=ubicación propia;

// --></SCRIPT>

10. Las páginas web no se guardarán como

11. <input type=button value="/Ver el código fuente de la página web

onclick="ventana.ubicación = "view-source:"+ "//www.VeVB.COm"">

12. Confirmar al eliminar

<a href=""javascript :if(confirm("¿Está seguro de que desea eliminar?"))location="boos.asp?&areyou=delete&page=1"">Eliminar</a>

13. Obtener la posición absoluta del control.

Copie el código de código de la siguiente manera:

//Javascript

función getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

mientras(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetIzquierda;

}

alerta("top="+t+"/nleft="+l);

}

</script>

//VBScript

función obtenerIE()

tenue t,l,a,b

establecer a = documento.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetIzquierda

mientras que a.tagName<>"CUERPO"

establecer a = a.offsetParent

t=t+a.offsetTop

l=l+a.desplazamientoIzquierda

encaminarse a

msgbox "top="&t&chr(13)&"left="&l,64,"Obtener la posición del control"

función final

--></script>

14. El cursor se detiene al final del texto en el cuadro de texto.

Copie el código de código de la siguiente manera:

funcióncc()

{

var e = evento.srcElement;

var r =e.createTextRange();

r.moveStart("carácter",e.value.length);

r.collapse(verdadero);

r.select();

}

</script>

15. Determina la fuente de la página anterior.

javascript:

documento.referente

16. Minimizar, maximizar, cerrar ventana

Este ejemplo es para IE.

17. Teclas de función de escudo Shift, Alt, Ctrl

<guión>

función mirar(){

si (evento.shiftKey)

alert("¡Prohibido presionar la tecla Shift!"); //Se puede reemplazar con ALT CTRL;

}

document.onkeydown=mirar;

</script>

18. Las páginas web no se almacenarán en caché

O <META HTTP-EQUIV="expires" CONTENT="0">

19. ¿Cómo hacer que la forma sea menos cóncava y convexa?

<tipo de entrada=estilo de texto="frontera-izquierda: ninguna; frontera-derecha: ninguna; frontera-superior: ninguna; frontera-inferior:

1 sólido #000000"></textarea>

20. ¿Cuál es la diferencia entre <div><span>&<capa>?

<div>(división) se utiliza para definir grandes secciones de elementos de página, lo que provocará saltos de línea.

<span> se utiliza para definir elementos dentro de la misma línea. La única diferencia con <div> es que no provoca saltos de línea.

<layer> es una etiqueta de ns, que no es compatible con ie. Es equivalente a <div>.

21. Haz que la ventana emergente esté siempre en la parte superior:

22. ¿Sin barras de desplazamiento?

Que no haya barras verticales:

</cuerpo>

Deje las barras en blanco:

</cuerpo>

¿Quitar ambos? más simple

</cuerpo>

23. ¿Cómo eliminar la línea de puntos alrededor de la imagen después de hacer clic en el enlace de la imagen?

24. Formulario de envío de procesamiento de correo electrónico

<nombre del formulario="form1" método="publicar" acción=mailto:******@***.com

enctype="texto/plain">

</formulario>

25. ¿Cómo escribir el código para actualizar la ventana principal en la ventana secundaria abierta?

ventana.abridor.ubicación.recargar()

26.Cómo configurar el tamaño de la página abierta

Abrir ubicación de la página<body onload="top.moveBy(300,200);">

27. Cómo agregar una imagen de fondo no completa a la página para que la imagen de fondo no se mueva cuando se abre la página.

cuerpo

{imagen de fondo:url(/logo.gif); repetición de fondo:no-repetir;

posición de fondo: centro; archivo adjunto de fondo: fijo}

</ESTILO>

28. Comprobar si una cadena se compone enteramente de números.

función checkNum(str){return str.match(//D/)==null}

alerta(checkNum("1232142141"))

alerta(checkNum("123214214a1"))

// --></script>

29. Obtén el tamaño de una ventana.

documento.cuerpo.clientWidth; documento.cuerpo.clientHeight;

30. Cómo determinar si es un personaje

if (/[^/x00-/xff]/g.test(s)) alert("Contiene caracteres chinos");

else alert("todos los caracteres");

31.El número de líneas de texto adaptativo TEXTAREA

<filas del área de texto = 1 nombre = s1 columnas = 27 en cambio de propiedad

="this.style.posHeight=this.scrollHeight">

</textarea>

32. Fecha menos número de días es igual a la segunda fecha

funcióncc(dd,papá)

{

//Se puede agregar manejo de errores

var a = nueva fecha (dd)

a = a.valorDe()

a = a - papá * 24 * 60 * 60 * 1000

a = nueva fecha (a)

alert(a.getFullYear() + "Año" + (a.getMonth() + 1) + "Mes" + a.getDate() + "Día")

}

CC("23/12/2002",2)

</script>

33. ¿Qué radio se selecciona?

función comprobarme()

para cada ob en radio1

si ob.marcado entonces

ventana.alerta ob.valor

función final

</script><BODY>

<ENTRADA nombre="radio1" tipo="radio" valor="/estilo" marcado>Estilo

<ENTRADA nombre="radio1" tipo="radio" valor="/blog/barcode">Código de barras

</BODY></HTML>

34. Los guiones nunca salen mal

<!-- Ocultar

función matarErrores() {

devolver verdadero;

}

ventana.onerror = killErrors;

// -->

</SCRIPT>

35. La tecla ENTER puede mover el cursor al siguiente cuadro de entrada.

36. Verifique la velocidad del enlace de un sitio web:

Agregue el siguiente código al área <cuerpo>:

tiempo=1

establecerIntervalo("tim++",100)

b=1

var autourl=nueva matriz()

autourl[1]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.njcatv.net"

autourl[2]="javacool.3322.net"

autourl[3]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.sina.com.cn"

autourl[4]="www.nuaa.edu.cn"

autourl[5]=1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>www.cctv.com"

función trasero(){

***("<nombre del formulario=autof>")

for(var i=1;i<autourl.length;i++)

***("<tipo de entrada=nombre de texto=txt"+i+" tamaño=10 valor="/En prueba...> =》<tipo de entrada=texto

nombre=url"+i+" tamaño=40> =》<tipo de entrada=valor del botón="/blog/GO

onclick=ventana.open(this.form.url"+i+".valor)><br>")

***("<tipo de entrada=valor de envío=Actualizar></formulario>")

}

culata()

función automática (url) {

documento.formularios[0]["url"+b].valor=url

si(tim>200)

{document.forms[0]["txt"+b].value="/Tiempo de espera del enlace"}

demás

{document.forms[0]["txt"+b].value="/blog/time"+tim/10+"segundos"}

b++

}

función ejecutar(){for(var i=1;i<autourl.length;i++)***("<img src=http://"+autourl+"/"+Math.random()+" ancho=1 altura=1

onerror=auto("http://"+autourl+"")>")}

ejecutar()</script>

37. Varios estilos de cursores.

automático: cursor estándar

predeterminado: flecha estándar

mano: cursor de mano

espera: espera el cursor

texto: cursor en forma de I

texto vertical: cursor horizontal en forma de I

no-drop: el cursor no se puede arrastrar

no permitido: cursor no válido

ayuda:?Cursor de ayuda

desplazamiento total: indicador de dirección triangular

mover: mover el objetivo

punto de mira: marca de cruz

cambiar tamaño

n-cambiar tamaño

nw-redimensionar

w-redimensionar

cambiar tamaño

redimensionar

cambio de tamaño

38. Efectos especiales para entrada y salida de página.

Ingrese a la página<meta http-equiv="Page-Enter" content="revealTrans(duration=x, Transition=y)">

Salir de la página<meta http-equiv="Page-Exit" content="revealTrans(duration=x, Transition=y)">

Estos son algunos efectos especiales cuando la página se carga y se llama. duración representa la duración del efecto especial, en segundos. La transición indica qué efecto especial usar, el valor es 1-23:

0 encogimiento de rectángulo

1 expansión rectangular

reducción de 2 círculos

3 expansión circular

4 Actualizar de abajo hacia arriba

5 Actualizar de arriba a abajo

6 actualizar de izquierda a derecha

7 Actualizar de derecha a izquierda

8 persianas verticales

9 persianas horizontales

10 persianas horizontales desplazadas

11 persianas verticales desplazadas

diferencial de 12 puntos

13 Actualizar de izquierda a derecha

14 Actualizar desde el centro hacia la izquierda y hacia la derecha

15 del medio a arriba y abajo

16 arriba y abajo hasta el medio

17 de abajo a la derecha a arriba a la izquierda

18 de arriba a la derecha a abajo a la izquierda

19 de arriba a la izquierda a abajo a la derecha

20 de abajo izquierda a arriba derecha

21 barras horizontales

22 barras verticales

23 Seleccione aleatoriamente uno de los 22 tipos anteriores

39. Salta dentro del tiempo especificado.

40. Si se recupera la página web

Los valores de los atributos incluyen lo siguiente:

El valor del atributo es "todos": se recuperarán los archivos y se podrán consultar los enlaces de la página;

El valor del atributo es "ninguno": el archivo no se recupera y los enlaces de la página no se consultan;

El valor del atributo es "índice": se recuperará el archivo;

El valor del atributo es "seguir": consulta el enlace en la página;

El valor del atributo es "noindex": el archivo no se recupera, pero se puede consultar y vincular;

El valor del atributo es "nofollow": el archivo no se recupera, pero se pueden consultar los enlaces de la página.

41. Segmentación de direcciones de correo electrónico

Agregue el siguiente código al área <cuerpo>

<a href="mailto:[email protected]">[email protected]</a>

42. Mesa con efecto de borde fluido.

Agregue el siguiente código al área <cuerpo>

Copie el código de código de la siguiente manera:

<guión>

l=Matriz(6,7,8,9,'a','b','b','c','d','e','f')

Nx=5;Ny=35

t="<borde de la tabla=0 espacio entre celdas=0 relleno de celdas=0><tr>"

para(x=Nx;x<Nx+Ny;x++)

t+="<td ancho=16 id=a_mo"+x+"> </td>"

t+="</tr><tr><td ancho=10 id=a_mo"+(Nx-1)+"> </td><td colspan="+(Ny-2)+" filaspan="+( Nx)+"> </td><td width=16 id=a_mo"+(Nx+Ny)+"></td></tr>"

para(x=2;x<=Nx;x++)

t+="<tr><td ancho=16 id=a_mo"+(Nx-x)+"> </td><td ancho=16 id=a_mo"+(Ny+Nx+x-1)+"> </td></tr>"

t+="<tr>"

para(x=Ny;x>0;x--)

t+="<td ancho=16 id=a_mo"+(x+Nx*2+Ny-1)+"> </td>"

***(t+"</tr></table>")

var N=Nx*2+Ny*2

función f1(y){

para(i=0;i<N;i++){

c=(i+y)%20;si(c>10)c=20-c

document.all["a_mo"+(i)].bgColor=""""#0000"+l[c]+l[c]+"'"}

y++

setTimeout('f1('+y+')','1')}

f1(1)

</SCRIPT>

43. Técnicas de ventanas emergentes de la página de inicio de JavaScript

Aparece en medio de la ventana.

Copie el código de código de la siguiente manera:

<guión>

window.open("//www.VeVB.COm","","width=400,height=240,top="+(screen.availHeight-240)/2+",left="+(screen.availWidth -400)/2);

</script>

=============

<html>

función WinOpen() {

msg=open("","DisplayWindow","barra de herramientas=no,directorios=no,barra de menú=no");

msg.***("<HEAD><TITLE>¡Hola!</TITLE></HEAD>");

msg.***("<CENTER><H1>¡Qué genial!</H1><h2>¡Esta es la ventana abierta por <B>JavaScript</B>!</h2></CENTER>");

}

</script>

</cabeza>

</formulario>

</cuerpo>

</html>

===============

1. En el código siguiente, solo necesita hacer clic para abrir una ventana para vincular al CCID. Y cuando quieras cerrar, simplemente haz clic para cerrar la ventana que acabas de abrir.

El código es el siguiente:

Copie el código de código de la siguiente manera:

<! --

función openclk() {

another=open('1000){this.resized=true;this.style.width=1000;}" align=absMiddle border=0>//www.VeVB.COm','NewWindow');

}

función cerrar clic() {

otro.cerrar();

}

//-->

</SCRIPT>

<BR>

</FORM>

2. El código anterior es demasiado silencioso. ¿Por qué no hacerlo más dinámico? ¡Sería genial si pudieras darle a la página un efecto de aterrizaje!

El código es el siguiente:

Copie el código de código de la siguiente manera:

<guión>

caída de función (n) {

si(self.moveBy){

self.moveBy (0, -900);

para(i = n; i > 0; i--){

self.moveBy(0, 3);

}

para(j = 8; j > 0; j--){

self.moveBy(0,j);

self.moveBy(j, 0);

self.moveBy(0,-j);

self.moveBy(-j, 0);

}

</script>

3. Odio que muchos sitios web siempre se abran en la ventana predeterminada. Sería fantástico si pudieras controlar la ventana abierta como desees.

El código es el siguiente:

Copie el código de código de la siguiente manera:

<! -- Comenzar

función página emergente(l, t, w, h) {

var windowprops = "ubicación=no, barras de desplazamiento=no, barras de menú=no, barras de herramientas=no, redimensionable=yes" +

", izquierda=" + l + ", arriba=" + t + ", ancho=" + w + ", altura=" + h;

var URL = "//www.VeVB.COm";

popup = ventana.open(URL, "MenuPopup", accesorios de ventana);

}

// Fin -->

</script>

<tabla>

<tr>

<td>

<pre>

Abrir parámetros de página<br>

Distancia desde la izquierda: <tipo de entrada=nombre de texto=tamaño izquierdo=2 longitud máxima=4> píxeles

Distancia desde la derecha: <tipo de entrada=nombre de texto=tamaño superior=2 longitud máxima=4> píxeles

Ancho de ventana: <tipo de entrada=nombre de texto=tamaño de ancho=2 longitud máxima=4> píxeles

Altura de la ventana: <tipo de entrada=nombre de texto=tamaño de altura=2 longitud máxima=4> píxeles

</pre>

<input type=button value="¡Abrir esta ventana!" onClick="popupPage(this.form.left.value, this.form.top.value, this.form.width.value,

este.formulario.altura.valor)">

</centro>

</formulario>

</td>

</tr>

</tabla>

Solo necesita ingresar un valor en el cuadro de diálogo correspondiente y la ventana de la página que se abrirá estará bien controlada.

44. Apertura y movimiento de página.

Agregue el siguiente código al área <cuerpo>

Copie el código de código de la siguiente manera:

<!-- Empezar

para (t = 2; t > 0; t--) {

para (x = 20; x > 0; x--) {

para (y = 10; y > 0; y--) {

padre.moveBy(0,-x);

}

para (x = 20; x > 0; x--) {

para (y = 10; y > 0; y--) {

padre.moveBy(0,x);

}

para (x = 20; x > 0; x--) {

para (y = 10; y > 0; y--) {

padre.moveBy(x,0);

}

para (x = 20; x > 0; x--) {

para (y = 10; y > 0; y--) {

padre.moveBy(-x,0);

}

//-->

// Fin -->

</script>

45. Mostrar la fecha y hora de la máquina cliente personal.

Copie el código de código de la siguiente manera:

<!-- Ocultar

hoy = nueva fecha()

***("La hora actual es: ",today.getHours(),":",today.getMinutes())

***("<br>La fecha de hoy es: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());

// terminar de ocultar contenidos -->

</script>

46. Genera automáticamente la última fecha de modificación cada vez:

Copie el código de código de la siguiente manera:

<html>

Esta es una página HTML simple.

<br>

Últimos cambios:

<!-- ocultar script de navegadores antiguos

***(documento.última modificación)

// terminar de ocultar contenidos -->

</script>

</cuerpo>

</html>

47. No puede estar vacío y restricciones de dirección de correo electrónico:

Copie el código de código de la siguiente manera:

<html>

<!-- Ocultar

función prueba1 (formulario) {

si (formulario.text1.valor == "")

alert("No escribiste nada, ¡ingrésalo nuevamente!")

demás {

alert("Hola"+form.text1.value+"! ¡Has completado tu entrada!");

}

función prueba2(formulario) {

if (form.text2.value == "" ||

form.text2.value.indexOf('@', 0) == -1)

alert("¡Esta no es la dirección de correo electrónico correcta! ¡Introdúcela de nuevo!");

else alert("¡Has completado tu entrada!");

}

// -->

</script>

</cabeza>

Introduce tu nombre:<br>

<P>

Introduce tu dirección de correo electrónico:<br>

</cuerpo>

48. Marquesina

Copie el código de código de la siguiente manera:

<html>

<!-- Ocultar

var scrtxt="¡Qué tal! ¡Es genial! También puedes probarlo."+"Aquí va tu mensaje a los visitantes de tu

la página "+"mirará durante horas con pura fascinación...";

var lentxt=scrtxt.length;

ancho var=100;

var pos=1-ancho;

función de desplazamiento() {

pos++;

var desplazador="";

si (pos==lentxt) {

pos=1-ancho;

}

si (pos<0) {

para (var i=1; i<=Math.abs(pos); i++) {

desplazamiento=desplazamiento+" ";}

desplazamiento = desplazamiento + scrtxt.substring (0, ancho-i + 1);

}

demás {

desplazamientor=desplazamiento+scrtxt.substring(pos,ancho+pos);

}

ventana.status = desplazador;

setTimeout("desplazamiento()",150);

}

//-->

</script>

</cabeza>

¡Su página web se puede mostrar aquí!

</cuerpo>

</html>

49. Utilice los botones de la página web para controlar la visualización de la página anterior, la página siguiente y la página de inicio.

Copie el código de código de la siguiente manera:

<html>

</FORM>

</cuerpo>

</html>

50. Ver el código fuente de un sitio web.

Agregue el siguiente código al área <cuerpo>

Copie el código de código de la siguiente manera:

<guión>

función agregar()

{

var ress=document.forms[0].luxiaoqing.valor

ventana.ubicación="view-source:"+ress;

}

</SCRIPT>

Ingrese la dirección URL donde desea ver el código fuente:

Copie el código de código de la siguiente manera:

<FORM>tipo de entrada="text" nombre="luxiaoqing" tamaño=40 valor="http://"></FORM>

</FORM>

51. El título muestra la fecha.

Agregue el siguiente código al área <cuerpo>:

Copie el código de código de la siguiente manera:

<!--ocultar

var isMes = nuevo

Array("enero", "febrero", "marzo", "abril", "mayo", "junio", "julio", "agosto", "septiembre", "octubre", "noviembre", "diciembre") ;

var isDay = nuevo

Array("domingo","lunes","martes","miércoles","jueves","viernes","sábado","domingo");

hoy = nueva fecha ();

Año=hoy.getAño();

Fecha=hoy.getDate();

si(documento.todo)

document.title="Hoy es: "+Año+"年"+isnMes[today.getMonth()]+Fecha+"日"+isnDay[today.getDay()]

//--ocultar-->

</script>

52. Mostrar todos los enlaces

Agregue el siguiente código al área <cuerpo>

Copie el código de código de la siguiente manera:

<!--

función extraer enlaces(){

var enlaces=document.all.tags("A")

var total = enlaces.longitud

var win2=window.open("","","barra de menú,barras de desplazamiento,barra de herramientas")

win2.***("<font size='2'>Hay "+total+" conexiones en total</font><br>")

para (i=0;i<total;i++){

win2.***("<font size='2'>"+enlaces[i].outerHTML+"</font><br>")

}

//-->

</script>

53. Ingrese la clave para cambiar de línea

Agregue el siguiente código al área <cuerpo>

Copie el código de código de la siguiente manera:

función handleEnter (campo, evento) {

var keyCode = evento.keyCode? evento.keyCode: evento.cual?

evento.cual: evento.charCode;

si (código clave == 13) {

var i;

para (i = 0; i < campo.formulario.elementos.longitud; i++)

si (campo == campo.formulario.elementos[i])

romper;

i = (i + 1) % campo.formulario.elementos.longitud;

campo.formulario.elementos[i].focus();

devolver falso;

}

demás

devolver verdadero;

}

</script>

<textarea>Retorno de carro y avance de línea

54. Enviar después de la confirmación

Agregue el siguiente código al área <cuerpo>

Copie el código de código de la siguiente manera:

<!--

mensaje de función(){

if (confirm("¿Estás seguro de que deseas enviar!"))

documento.lnman.enviar()

}

//-->

</SCRIPT>

<p>

</p>

<p>

</p>

</formulario>

55. Cambiar el contenido de la tabla.

Agregue el siguiente código al área <cuerpo>

Copie el código de código de la siguiente manera:

<guión ***guión>

var arr=nueva matriz()

arr[0]="一一一一一";

arr[1]="dos dos dos dos dos";

arr[2]="tres tres tres tres tres";

</script>

<option value=a>Cambiar el primer fotograma</option>

<option value=a>Cambiar el segundo fotograma</option>

<option value=a>Cambiar el tercer fotograma</option>

</seleccionar>

<td width=150>Primer fotograma</td>

<td width=150>Segundo fotograma</td>

<td width=150>Tercer fotograma</td>

</tr>

</tabla>