41 Consejos prácticos de JavaScript que los desarrolladores web deben recopilar

Autor：Eve Cole Fecha de actualización：2025-07-24 22:16:02

Las habilidades prácticas de JavaScript que los desarrolladores web deben recopilar para su referencia. El contenido específico es el siguiente

1. El botón derecho del mouse se bloqueará por completo

onContextMenu = ”Window.event.ReturnValue = False"

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

2. Desnectar y evitar copiar

3.js no permite pegar

onpaste = "return false"

4. JS evita copiar

oncopy = "return false;" oncut = ”return false;"

5. Cambie a su propio icono frente a la barra de direcciones de IE

Coloque esta imagen en el directorio raíz del archivo y modifique el sufijo a ICO

6. Puede mostrar su icono en sus favoritos

7. Apague el método de entrada

8. Siempre lleve un marco

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

//> </script>

9. Evite los marcos

<Script Language = JavaScript> <!

if (top.location! = self.location) top.location = self.location;

//> </script>

10. La página web no se guardará como

11. <Input type = Botton Value = Ver código fuente de la página web

onClick = "Window.location =" View-Source: "+" http://www.pconline.com.cn "">

12. Confirme cuando la eliminación

<a href = "javaScript: if (confirmar (" ¿Realmente necesita ser eliminado? ")) Local

& Page = 1 ″ ”> Eliminar </a>

13. Obtenga la posición absoluta del control

 // javascript <script language = ”javascript”> función getie (e) {var t = e.offsettop; var l = e.offsetleft; mientras (e = e.offsetParent) {t+= e.offsettop; l+= e.offsetleft;} alert ("top ="+t+"/nleft ="+l);} </script> // vbscript <script language = "vbscript"> <! function getie () dim t, l, a, bset a = document.all.img1t = document.all.img1.offsettopl = document.all.img1.OffSetLeft Whipe a.TagName <> "Body" SET a = A.OffSetParentt = t+A.OffSetTopl = l+A.OffSetLeftWendmSgbox "Top =" & t & ch (13) & "Left =" & l, 64, "Get The Get The Control Function

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

 <script language = ”javascript”> function cc () {var e = event.sricleement; var r = e.createTextrange (); r.movestart ("carácter", e.value.length); rolapse (true); r.select ();} < /script> <type de entrada = text name = text1 valor = "123 ″ onfocus =" cc () ")") ")

15. Determine la fuente de la página anterior

JavaScript:

document.referrer

16. Minimizar, maximizar, cerrar Windows

 <objeto id = hh1 classid = ”clsid: adb8880a6-d8ff-11cf-9377-00aaaaa003b7a11 ″> <param name =” command ”value =” minimize ”> < /object> <object id = hh2 classid =” clsid: adb880a6-d8ff-1cf-9377-00aaaaaa003b7a1 nombre = "comando" valor = "maximizar"> < /objeto> <objeto id = hh3 classid = ”clsid: adb880a6-d8ff-11cf-9377-00aaa003b7a11 ″> <param name =” comandante "value =" Close "> < /Object> <Input type = Botton Value = Minimize OnClick = Hh1.Click ()> <Inyer type =" Close "> < /Object> <Input type = Botton Value = Minimize OnClick = Hh1.Click ()> <Inyer type =" Close ” onClick = hh2.Click ()> <input type = button value = close OnClick = HH3.Click ()>

Este ejemplo se aplica a IE

17. Teclas de función de bloque Shift, Alt, CTRL

 <script> function look () {if (event.shiftkey) alert ("La tecla de cambio está prohibida!"); // se puede reemplazar con alt ctrl} document.onkeydown = look; </script>

18. La página web no será almacenada en caché

O <meta http-equiv = ”expires” content = ”0 ″>

19. ¿Cómo hacer que la forma no tenga sentimiento cóncavo y convexo?

<input type = text style = ”border-left: none; border-right: none; border-top: none; border-fondo:

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

20. ¿La diferencia entre <iv> <span> y <apla>?

<Viv> (división) se utiliza para definir grandes segmentos de elementos de página, lo que causará una transferencia de línea

<span> se usa para definir elementos en la misma línea. La única diferencia entre <div> es que no produce una transferencia de línea

<apla> es una etiqueta de NS, es decir, no lo admite, que es equivalente a <div>

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

22. ¿No desplazan las barras?

Deje que la barra vertical no:

</body>

Deje que la barra horizontal no:

</body>

Eliminar ambos? Es más fácil

</body>

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

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

</form>

25. ¿Cómo escribir en el código de refrescar la ventana principal en la ventana abierta para niños?

window.opener.location.reload ()

26. Cómo establecer el tamaño de la página para abrir

La ubicación donde se abre la página <Body onload = "top.moveby (300,200);">

27. Cómo agregar una imagen de fondo que no está llena en la página, y la imagen de fondo permanece sin mover al extraer la página

Cuerpo

{IMAGEN DE BUENGE: NINGUNO; Background-Repeat: sin repetición;

Posición de fondo: Centro; Atacte de fondo: fijo}

</style>

28. Verifique si una cadena está compuesta de números

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

alerta (checkNum ("1232142141"))

alerta (checknum ("123214214a1"))

//> </script>

29. Obtenga el tamaño de una ventana

document.body.clientwidth; document.body.clientHeight

30. Cómo determinar si es un personaje

if (/+^/x00-/xfffont>/g.test(s)) alerta ("contiene caracteres chinos");

else alerta ("todos los personajes");

31.Textarea cuántas líneas de texto adaptativo

< /textarea>

32. Fecha menos días igual a la segunda fecha

 <script language = javascript> function cc (dd, dadd) {// El manejo de errores se puede agregar var a = nueva fecha (dd) a = a.valueOf () a = a dadd * 24 * 60 * 60 * 1000A = nueva fecha (a) alerta (a.getblyByLyAar () + "año" + (A.getMonth () + 1) "Day")} CC ("23/12/2002", 2) </script>

33. Qué radio fue seleccionada

 <html> <script language = "vBscript"> function checkMe () para cada OB en radio1if ob. verificado entonces ventana.alert ob.valuextend function </script> <body> <input name = "radio1 ″ type =" radio "valor =" estilo "verbado> style <input name =" radio1 type = "valor" valor = "barcode"> barcódote <códico <input " onClick = ”checkMe ()”> </body> < /html>

34. El guión nunca sale mal

 <Script language = "javaScript"> <! HideFunction KillErrors () {return true;} window.onerror = killerrors; //> </script>

35. La tecla ENTER permite que el cursor se mueva al siguiente cuadro de entrada

36. Detectar la velocidad de enlace de un determinado sitio web:

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

 <Script Language = JavaScript> Tim = 1SetInterval ("Tim ++", 100) b = 1Var AutoUrl = nuevo Array () autourl [1] = "www.njcatv.net" autourl [2] = "javacool.3322.net" autourl [3] = "www.sina.com.cn" autourl [4] = "www.nuaa.edu.cn" autourl [5] = "www.cctv.com" function bun nombre = Autof> ") para (var i = 1; i <autourl.length; i ++) document.write (" <input type = text name = txt ”+i+” size = 10 valor = en test ...> =》 <inputType = textName = url ”+i+” size = 40> =》 <type de entrada = botón value = GoOnClick = Window.open (this.Form.url ”+i+”. Value)> ") Document.Write (" <Input type = Subt Value = Refresh> </form> ")} Function Function Auto (url) {document.forms [0] [" Url "+B] .Value = urlif (Tim> 200) {document.forms [0] [[" "" "" TIMEOUT "} else {document.forms [0] [" txt "+b] .value =" time "+tim/10+" segundos "} b ++} function run () {for (var i = 1; i <autourl.length; i ++) document.write (" <imgsrc = http: // "+Autourl+"/"/"+Math.Ran altura = 1onerror = auto ("http: //"+autourl+"")> ")} run () </script>

37. Varios estilos de cursores

Auto: cursor estándar

Valor 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:? Ayuda del cursor

All-Scroll: marca de dirección del triángulo

Mover: etiqueta móvil

Crosshair: Crosshair

resplandor electrónico

n-retirado

NW-RESIZA

W-Risize

s-rese

resonancia

resumen de SW

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

Ingrese la página <meta http-equiv = ”page-iner” content = ”reveltrans (duración = x, transición = y)”>

Página de lanzamiento <meta http-equiv = ”page-exit” content = ”reveltrans (duración = x, transición = y)”>

Estos son algunos efectos especiales cuando la página está cargada y llamada. La 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 Rectángulo encogido

1 agrandamiento del rectángulo

2 retráctil redondo

3 Ampliación circular

4 hacia arriba para actualizar

5 Actualizar hasta Down

6 Actualizar de izquierda a derecha

7 Actualización derecha a izquierda

8 persianas verticales

9 persianas horizontales

10 persianas desplazadas

11 persianas dislocadas

12 puntos de difusión

13 refrescarse en el medio

14 Actualizar en el medio a izquierda y a la derecha

15 medio a arriba

16 arriba y abajo hasta el medio

17 parte de la derecha a la parte superior izquierda

18 de la parte superior derecha a abajo a la izquierda

19 de la parte superior izquierda a abajo derecha

20 parte inferior izquierda a la parte superior derecha

21 barras horizontales

22 tiras verticales

23 o más elige al azar uno de los 22 tipos

39. Salta dentro del tiempo especificado

40. Si la página web ha sido recuperada

Los valores de los atributos son los siguientes:

El valor del atributo es "todo": el archivo se recuperará y se pueden consultar los enlaces en la página;

El valor del atributo es "Ninguno": el archivo no está recuperado y los enlaces en la página no se consultan;

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

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

El valor del atributo es "noindex": el archivo no está recuperado, pero se puede consultar para enlaces;

El valor de la propiedad es "nofollow": el archivo no está recuperado, pero los enlaces en la página se pueden consultar.

41. Enter

Use el script del cliente para agregar el evento OnKeydown del documento a la página, para que la página pueda realizar una pestaña después de recibir el evento de devolución de carro.

La función de la clave es cambiar el código clave del evento de 13 a 9

El código JavaScript es el siguiente:

 <script language = "javascript" for = "document" event = "onkeydown"> <! if (event.keycode == 13) event.keycode = 9;> </script>

Esta forma de procesamiento puede mover el enfoque hacia abajo, pero también juega el mismo papel para los botones. En general, los clientes han terminado de entrar

Después de que los datos se suben al botón, es mejor presionar "ENTER" directamente para enviar los datos. Por lo tanto, el método anterior debe realizarse.

Para la modificación, el botón "Enviar" no debe cambiarse. En cambio, la presentación debe activarse directamente.

Por lo tanto, hice una modificación al código anterior, es decir, para determinar si la "fuente" del evento es el botón Enviar. El código es el siguiente:

 <script language = "javascript" for = "document" event = "onkeydown"> <! if (event.keyCode == 13 && event.srcelement.type! = 'Button' && event.srcelement.type.type! = 'enviar' && event.srelement.type! = 'reet' &&dent.srcelement.typee! event.srcelement.type! = ") Event.KeyCode = 9;> </script>

Determine si es un botón, porque habrá tipo = "botón" en HTML

Determine si se envía, porque hay type = "enviar" en html

Determinar si se restablece porque el "reinicio" en HTML debe ejecutarse

El juicio es que está vacío porque el "<a> enlace" en HTML también debe ejecutarse. Esta situación no sucede mucho. Puede usar el método "tabindex = -1" para desactivar y obtener enfoque.

Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.