41 Dicas práticas de JavaScript que os desenvolvedores da Web devem coletar

Autor：Eve Cole Data da Última Atualização：2025-07-24 22:16:02

As habilidades práticas de JavaScript que os desenvolvedores da Web devem coletar para sua referência. O conteúdo específico é o seguinte

1. O botão direito do mouse será completamente bloqueado

ONCONTEXTMENU = "window.event.returnValue = false"

<borda da tabela ONCONTEXTMENU = return (false)> <td> não </ tabela> pode ser usado para a tabela

2. Useleção e evite cópia

3.js não permite colar

OnPaste = "Return false"

4. JS impede a cópia

oncopy = "Return false;" oncut = "Return false;"

5. Mude para o seu próprio ícone em frente à barra de endereço do IE

Coloque esta imagem no diretório raiz do arquivo e modifique o sufixo para a OIC

6. Você pode exibir seu ícone em seus favoritos

7. Desligue o método de entrada

8. Sempre carregue um quadro

<Script Language = "JavaScript"> <!

if (window == top) top.location.href = "Frames.htm"; //frames.htm é a página da web do quadro

//> </script>

9. Impedem que os quadros sejam

<Idioma do script = javascript> <!

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

//> < /script>

10. A página da web não será salva como

11. <Tipo de entrada = Valor do botão = Exibir o código fonte da página da Web

OnClick = ”Window.Location =“ View-Source: ”+“ http://www.pconline.com.cn ””>

12. Confirme quando a exclusão

<a href = "javascript: if (confirm (" ele realmente precisa ser excluído? ")) location =" boos.asp? & Areyou = delete

& página = 1 ″ ”> excluir </a>

13. Obtenha a posição absoluta do controle

 // javascript <script linguagem = "javascript"> function getie (e) {var t = e.offsetTop; var l = e.offsetLeft; while (e = e.offsetParent) {t+= e.offsetTop; l+= e.offsetLeft;} alert ("top ="+t+"/nleft ="+l);} </script> // vbscript <script linguagem = "vbscript"> <! a=document.all.img1t=document.all.img1.offsetTopl=document.all.img1.offsetLeftwhile a.tagName< >"BODY"set a = a.offsetParentt=t+a.offsetTopl=l+a.offsetLeftwendmsgbox "top="&t&chr(13)&"left="&l,64,"get the control's position"end function>< /script>

14. O cursor é interrompido no final da caixa de texto

 <Script Language = "javascript"> function cc () {var e = event.srcelement; var r = e.createTexTrange (); r.Movestart ("caractere", e.value.Length); r.collapse (True); R.Select ();} < /script> <input type = text = text1);

15. Determine a fonte da página anterior

JavaScript:

Document.Referrer

16. Minimize, maximize, feche janelas

 <objeto id = hh1 classId = ”clsid: adb880a6-d8ff-11cf-9377-00AA003B7A11 ″> <param name =" comando "value =" minimize "> < /object> <objeto id = hh2 classID =" clsid: adb880a6-d8ff-11cf- name = "comando" value = "maximize"> < /object> <objeto id = hh3 classId = "clsid: adb880a6-d8ff-11cf-9377-00AA003B7A11 ″> <param name =" comando "=" feche "> < /object> <input Type = buttão = minimize onClick onClick OnClick = hh2.Click ()> <Tipo de entrada = Valor do botão = Fechar OnClick = HH3.Click ()>

Este exemplo se aplica ao IE

17. Chaves de função de bloco Shift, alt, Ctrl

 <Cript> function look () {if (event.shiftKey) alert ("A tecla Shift é proibida!"); // pode ser substituído por alt ctrl} document.onkeydown = look; < /script>

18. A página da web não será armazenada em cache

Ou <meta http-equiv = "expira" content = "0 ″>

19. Como fazer o formulário não tem um sentimento côncavo e convexo?

<Tipo de entrada = Texto estilo = ”Border-left: Nenhum; Right-Right: Nenhum; Border-top: Nenhum; Bottom Bottom:

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

20. A diferença entre <div> <mpan> & <adyer>?

<div> (divisão) é usado para definir grandes segmentos de elementos da página, que causarão uma transferência de linha

<man> é usado para definir elementos na mesma linha. A única diferença entre <div> é que ele não produz uma transferência de linha

<Layer> é uma etiqueta de ns, ou seja, não a suporta, o que é equivalente a <div>

21. Deixe a janela pop-up estar sempre no topo:

22. Não role as barras?

Deixe a barra vertical não:

< /body>

Deixe a barra horizontal não:

< /body>

Remover os dois? É mais fácil

< /body>

23. Como remover as linhas pontilhadas ao redor da imagem depois de clicar no link da imagem?

24. Formulário de envio de processamento de e -mail

</morm>

25. Como escrever no código de atualizar a janela dos pais na janela aberta da criança?

window.opener.Location.Reload ()

26. Como definir o tamanho da página para abrir

O local onde a página é aberta <corpo onload = "top.moveby (300.200);">

27. Como adicionar uma imagem de fundo que não está cheia na página, e a imagem de fundo permanece inocente ao puxar a página

Corpo

{Background-Image: Nenhum; Repetição de fundo: sem repetição;

Posição de fundo: Centro; Antecipação de Antecipação: Corrigida}

< /Style>

28. Verifique se uma string é composta de números

<Script Language = "JavaScript"> <!

função checknum (str) {return str.match (// d/) == null}

Alerta (CheckNum ("1232142141"))

alerta (checknum ("123214214a1"))

//> </script>

29. Obtenha o tamanho de uma janela

document.body.clientWidth; document.body.clientHeight

30. Como determinar se é um personagem

if (//^/x00-/xff ]/g.test(s)) alert ("contém caracteres chineses");

else alert ("todos os personagens");

31.TexTarea quantas linhas de texto adaptável

</sexttarea>

32. Data menos dias iguais à segunda data

 <idioma do script = javascript> função cc (dd, dadd) {// manuseio de erros pode ser adicionado var a = new Date (dd) a = a.valueof () a = a dadd * 24 * 60 * 60 * 1000a = nova data (a) alerta (a.GetlyEar () + "ano" + (a.getMonth () + 1) + "Month" Month " "dia")} cc ("23/12/2002", 2) </script>

33. Qual rádio foi selecionado

 <html> <script idioma = "vbscript"> function checkMe () para cada ob no radio1if ob.CHECKED HONAND.ALERT OB.VALUENEXTEND FUNÇÃO < /script> <body> <input name = "Radio1 ″ type =" Radio "Value" Style "Styled> Style <input Name =" Radio1 ″ Type = "Radio" "Style" "Style> Style> Style <input Name =" Radio1 ″ Type = "Radio" = "Style" value = "check" onclick = "checkMe ()"> < /body> </html>

34. O script nunca dá errado

 <Script Language = "JavaScript"> <! HideFunction killErrors () {return true;} window.onerror = killErrors; //> </sCript>

35. A tecla Enter permite que o cursor se mova para a próxima caixa de entrada

36. Detecte a velocidade do link de um determinado site:

Adicione o seguinte código à área <body>:

 <idioma do script = javascript> tim = 1setInterval ("tim ++", 100) b = 1var automaturl = novo Array () AUTOURL [1] = "www.njcatv.net" AUTOURL [2] = "javacool.3322.net" AUTOURL [3] = "www.sina.com.cn" AUTOLOURL [4] = "WWW.NUA.Edu.cn" AUTOURL [5] [4] = "WWW.nua.edu.cn" "AUTRL [5] [4] =" WWW.Nuaa.edu.cn "" AUTRL [5] [4] ... Nome de forma = Autof> ") para (var i = 1; i <autourl.length; i ++) document.Write (" <Tipo de entrada = nome do texto = txt "+i+" size = 10 Valor = no teste ...> =》 <inputType = textName = url "+i+" tamanho = 40> =》 <input = botão = botão = value = GoOnClick = window.open (this.form.url ”+i+”. value)> ") document.write (" <tipo de entrada = submit value = refresh> </morm> ")} butt () function (url) {document.forms [0] [" url "+b] .value [urlf (times> 200) {Documents) {Documents [0] [" l "+b] .value [urlf (tim> 200) {Documents) {Documents [Documents [0] [" l "+b] .value [urlf (tim> 200): Timeout "} else {document.forms [0] [" txt "+b] .Value =" time "+tim/10+" segundos "} b ++} função run () {for (var i = 1; i <utOnTl.Length; i ++) Document.Write (" <imgsrc = http: // "Autl; altura = 1ONerror = Auto ("http: //"+AUTOURL+"")> ")} run () </script>

37. Vários estilos de cursores

Auto: cursor padrão

Padrão: seta padrão

Mão: cursor da mão

Espere: espere pelo cursor

Texto: Cursor em forma de I.

Texto vertical: cursor horizontal em forma de I

sem queda: o cursor não pode ser arrastado

Não permitido: cursor inválido

AJUDA :? Ajuda o cursor

All-roll: Marca de direção do triângulo

Move: Tag móvel

mira: mira

e-ressente

n-ressente

NW-RESIZE

W-ressetize

S-ressente

SE-RESIZE

SW-RESIZE

38. Efeitos especiais para entrada e saída de páginas

Digite a página <meta http-equiv = "página-entra" content = "reveretrans (duração = x, transição = y)">

Página de liberação <meta http-equiv = "Page-exit" content = "ReverenTrans (duração = x, transição = y)">

Esses são alguns efeitos especiais quando a página é carregada e chamada. A duração representa a duração do efeito especial em segundos.

A transição indica qual efeito especial a ser usado, o valor é

1-23:

0 retângulo encolhido

1 aumento do retângulo

2 encolhimento redondo

3 ampliação circular

4 até o topo para atualizar

5 Atualizar para baixo

6 Atualizar da esquerda para a direita

7 Atualização da direita para a esquerda

8 persianas verticais

9 persianas horizontais

10 persianas horizontais deslocadas

11 persianas verticais deslocadas

12 pontos de difusão

13 Atualizar no meio

14 Atualizar no meio para a esquerda e direita

15 do meio ao topo

16 de cima e para baixo para o meio

17 inferior direito ao canto superior esquerdo

18 de cima direita para baixo esquerdo

19 superior esquerdo para baixo direito

20 inferior esquerdo ao canto superior direito

21 barras horizontais

22 tiras verticais

23 ou mais, escolha aleatoriamente um dos 22 tipos

39. Pule dentro do tempo especificado

40. Se a página da web foi recuperada

Os valores dos atributos são os seguintes:

O valor do atributo é "tudo": o arquivo será recuperado e os links na página podem ser consultados;

O valor do atributo é "nenhum": o arquivo não é recuperado e os links na página não são consultados;

O valor do atributo é "índice": o arquivo será recuperado;

O valor do atributo é "Siga": o link na página de consulta;

O valor do atributo é "Noindex": o arquivo não é recuperado, mas pode ser consultado para links;

O valor da propriedade é "Nofollow": o arquivo não é recuperado, mas os links na página podem ser consultados.

41. Digite

Use o Script Client para adicionar o evento OnKekeDown do documento à página, para que a página possa executar uma guia após receber o evento de retorno do carro.

A função da chave é alterar o código -chave do evento de 13 para 9

O código JavaScript é o seguinte:

 <Script Language = "JavaScript" para = "document" event = "onkeydown"> <! if (event.keycode == 13) event.keycode = 9;> </sCript>

Essa maneira de processamento pode mover o foco para baixo, mas também desempenha o mesmo papel para os botões. Geralmente, os clientes terminaram de entrar

Depois que os dados são saltados para o botão, é melhor pressionar "Enter" diretamente para enviar os dados. Portanto, o método acima precisa ser realizado.

Para modificação, o botão "Enviar" não deve ser alterado. Em vez disso, o envio deve ser ativado diretamente.

Portanto, fiz uma modificação no código acima, ou seja, para determinar se a "fonte" do evento é o botão Enviar. O código é o seguinte:

 <Script Language = "JavaScript" para = "document" event = "onkeydown"> <! if (event.keycode == 13 && event.srcelement.type! event.srcelement.type! = ") event.keycode = 9;> </sCript>

Determine se é um botão, porque haverá tipo = "botão" no HTML

Determine se é enviado, porque existe tipo = "submeter" no HTML

Determinar se é redefinido porque o "redefinir" no HTML deve ser executado

O julgamento é que ele está vazio porque o link "<a>" no HTML também deve ser executado. Esta situação não acontece muito. Você pode usar o método "tabindex = -1" para desvincular e obter foco.

O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.