Compartilhe as 55 dicas clássicas mais usadas em Javascript

Autor：Eve Cole Data da Última Atualização：2025-01-17 19:12:01

1. oncontextmenu="window.event.returnValue=false" bloqueará completamente o botão direito do mouse

<table border oncontextmenu=return(false)><td>no</table> pode ser usado para Tabela

2. <body onselectstart="return false"> Cancele a seleção e evite a cópia

3. onpaste = "return false" não é permitido colar

4. oncopy="return false;" oncut="return false;" para evitar a cópia

5. <link rel="Shortcut Icon" href="favicon.ico"> Substitua a barra de endereço do IE pelo seu próprio ícone

6. <link rel="Bookmark" href="favicon.ico"> pode exibir seu ícone nos favoritos

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

8. Sempre carregue uma estrutura

<linguagem script="JavaScript"><!--

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

// --></script>

9. Evite ser enquadrado

<SCRIPT LANGUAGE=JAVASCRIPT><!--

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

// --></SCRIPT>

10. As páginas da web não serão salvas como

11. <input type=button value="/Ver código-fonte da página da web

onclick="window.location = "view-source:"+ "//www.VeVB.COm"">

12. Confirme ao excluir

<a href=""javascript :if(confirm("Tem certeza de que deseja excluir?"))location="boos.asp?&areyou=delete&page=1"">Excluir</a>

13. Obtenha a posição absoluta do controle

Copie o código do código da seguinte forma:

//Javascript

função getIE(e){

var t=e.offsetTop;

var l=e.offsetLeft;

enquanto(e=e.offsetParent){

t+=e.offsetTop;

l+=e.offsetLeft;

}

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

}

</script>

//VBScript

<linguagem script="VBScript"><!--

função getIE()

dim t,l,a,b

definir a=document.all.img1

t=document.all.img1.offsetTop

l=document.all.img1.offsetLeft

enquanto a.tagName<>"BODY"

definir a = a.offsetParent

t=t+a.offsetTop

l=l+a.offsetLeft

vamos

msgbox "top="&t&chr(13)&"left="&l,64,"Obter a posição do controle"

função final

--></script>

14. O cursor para no final do texto na caixa de texto

Copie o código do código da seguinte forma:

funçãocc()

{

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart("caractere",e.valor.comprimento);

r.collapse(verdadeiro);

r.select();

}

</script>

15. Determine a fonte da página anterior

javascript:

documento.referenciador

16. Minimize, maximize, feche a janela

Este exemplo é para o IE

17. Teclas de função de escudo Shift, Alt, Ctrl

função olhar(){

if(evento.shiftKey)

alert("Proibir pressionar a tecla Shift!"); //Pode ser substituído por ALT CTRL

}

document.onkeydown=olhar;

</script>

18. As páginas da web não serão armazenadas em cache

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

19. Como tornar a forma menos côncava e convexa?

<input type=text style="border-left:none; border-right:none; border-top:none; border-bottom:

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

20. Qual é a diferença entre <div><span>&<camada>?

<div>(divisão) é usado para definir grandes seções de elementos da página, o que causará quebras de linha.

<span> é usado para definir elementos dentro da mesma linha. A única diferença de <div> é que não causa quebras de linha.

<layer> é uma tag de ns, que não é suportada por, ou seja, é equivalente a <div>.

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

22. Sem barras de rolagem?

Que não haja barras verticais:

</body>

Deixe as barras em branco:

</body>

Remover ambos? mais simples

</body>

23. Como remover a linha pontilhada ao redor da imagem após clicar no link da imagem?

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

<form name="form1" method="post" action=mailto:****@***.com

enctype="text/plain">

</form>

25. Como escrever o código para atualizar a janela pai na janela filho aberta?

janela.opener.location.reload()

26.Como definir o tamanho da página aberta

Local da página aberta<body onload="top.moveBy(300,200);">

27. Como adicionar uma imagem de fundo não completa à página para que a imagem de fundo não se mova quando a página for puxada.

corpo

{imagem de fundo:url(/logo.gif); repetição de fundo:sem repetição;

posição de fundo: centro; anexo de fundo: fixo}

</STYLE>

28. Verifique se uma string consiste inteiramente em números

<linguagem script="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;

30. Como determinar se é um personagem

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

else alert("todos os caracteres");

31.O número de linhas de texto adaptativas TEXTAREA

<textarea rows=1 name=s1 cols=27 onpropertychange

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

</textarea>

32. Data menos número de dias é igual à segunda data

funçãocc(dd,pai)

{

//O tratamento de erros pode ser adicionado

var a = nova data (dd)

a = a.valueOf()

a = a - pai * 24 * 60 * 60 * 1000

a = nova data(a)

alert(a.getFullYear() + "Ano" + (a.getMonth() + 1) + "Mês" + a.getDate() + "Dia")

}

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

</script>

33. Qual Rádio está selecionada?

função verifique-me()

para cada ob em radio1

se ob.checked então

janela.alert ob.value

função final

</script><BODY>

<INPUT name="radio1" type="radio" value="/style" verificado>Estilo

<INPUT name="radio1" type="radio" value="/blog/barcode">Código de barras

</BODY></HTML>

34. Os scripts nunca dão errado

<!-- Ocultar

função killErrors() {

retornar verdadeiro;

}

janela.onerror = killErrors;

// -->

</SCRIPT>

35. A tecla ENTER pode mover o cursor para a próxima caixa de entrada

36. Verifique a velocidade do link de um site:

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

tempo=1

setInterval("tim++",100)

b=1

var autourl = novo Array()

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

URL automático[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"

função bunda(){

***("<nome do formulário=autof>")

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

***("<tipo de entrada=nome do texto=txt"+i+" tamanho=10 valor="/Em teste...> =》<tipo de entrada=texto

nome=url"+i+" tamanho=40> =》<tipo de entrada=valor do botão="/blog/GO

onclick=window.open(this.form.url"+i+".value)><br>")

***("<input type=submit value=Atualizar></form>")

}

bunda()

função automática(url){

document.forms[0]["url"+b].value=url

se(tim>200)

{document.forms[0]["txt"+b].value="/Tempo limite do link"}

outro

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

b++

}

função run(){for(var i=1;i<autourl.length;i++)***("<img src=http://"+autourl+"/"+Math.random()+" largura=1 altura=1

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

executar()</script>

37. Vários estilos de cursores

automático: cursor padrão

padrão: seta padrão

mão: cursor de mão

espere: espere pelo cursor

texto: cursor em forma de I

texto vertical: cursor horizontal em forma de I

no-drop: o cursor não pode ser arrastado

não permitido: Cursor inválido

ajuda:?Cursor de ajuda

rolagem total: indicador de direção triangular

mover: mover o alvo

mira: marca de cruz

redimensionamento eletrônico

n-redimensionar

nw-redimensionar

w-redimensionar

s-redimensionar

redimensionar

sw-redimensionar

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

Entre na página<meta http-equiv="Page-Enter" content="revealTrans(duration=x, transaction=y)">

Página de saída<meta http-equiv="Page-Exit" content="revealTrans(duration=x, transaction=y)">

Estes são alguns efeitos especiais quando a página é carregada e chamada. duração representa a duração do efeito especial, em segundos. A transição indica qual efeito especial usar, o valor é 1-23:

0 retângulo encolher

1 Expansão retangular

Redução de 2 círculos

3 expansão circular

4 Atualize de baixo para cima

5 Atualize de cima para baixo

6 atualizar da esquerda para a direita

7 Atualizar da direita para a esquerda

8 persianas verticais

9 persianas horizontais

10 persianas horizontais deslocadas

11 persianas verticais deslocadas

Spread de 12 pontos

13 Atualizar da esquerda para a direita

14 Atualize do centro para a esquerda e para a direita

15 do meio para cima e para baixo

16 para cima e para baixo até o meio

17 inferior direito para superior esquerdo

18 superior direito para inferior esquerdo

19 superior esquerdo para inferior direito

20 do canto inferior esquerdo para o canto superior direito

21 barras horizontais

22 barras verticais

23 Selecione aleatoriamente um dos 22 tipos acima

39. Salte dentro do tempo especificado

40. Se a página da web foi recuperada

Os valores dos atributos incluem o seguinte:

O valor do atributo é “all”: os arquivos serão recuperados e os links da página poderão ser consultados;

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

O valor do atributo é “index”: o arquivo será recuperado;

O valor do atributo é “seguir”: consulte o link da página;

O valor do atributo é "noindex": o arquivo não é recuperado, mas pode ser consultado e vinculado;

O valor do atributo é "nofollow": o arquivo não é recuperado, mas os links da página podem ser consultados.

41. Segmentação de endereços de email

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

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

42. Mesa com efeito de borda fluida

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

Copie o código do código da seguinte forma:

<ROTO>

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

Nx=5;Ny=35

t="<table border=0 cellpacing=0 cellpadding=0><tr>"

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

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

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

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

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

t+="<tr>"

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

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

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

var N=Nx*2+Ny*2

função f1(y){

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

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

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

sim++

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

f1(1)

</SCRIPT>

43. Técnicas de janela pop-up da página inicial de JavaScript

Aparece no meio da janela

Copie o código do código da seguinte forma:

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

</script>

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

<html>

<cabeça>

função WinOpen() {

msg=open("","DisplayWindow","toolbar=no,directories=no,menubar=no");

msg.***("<HEAD><TITLE>Olá!</TITLE></HEAD>");

msg.***("<CENTER><H1>Que legal!</H1><h2>Esta é a janela aberta por <B>JavaScript</B>!</h2></CENTER>");

}

</script>

</head>

<corpo>

<formulário>

</form>

</body>

</html>

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

1. No código abaixo, basta clicar para abrir uma janela de link ao CCID. E quando quiser fechar, basta clicar para fechar a janela que acabou de abrir.

O código é o seguinte:

Copie o código do código da seguinte forma:

<! --

função openclk() {

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

}

função fecharclk() {

outro.close();

}

//-->

</SCRIPT>

<FORM>

<BR>

</FORM>

2. O código acima é muito silencioso. Por que não torná-lo mais dinâmico? Seria ótimo se você pudesse dar um efeito de landing à página!

O código é o seguinte:

Copie o código do código da seguinte forma:

queda de função (n) {

if(self.moveBy){

self.moveBy (0, -900);

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

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. Odeio que muitos sites sempre abram na janela padrão. Seria ótimo se você pudesse controlar a janela aberta como desejar.

O código é o seguinte:

Copie o código do código da seguinte forma:

<! -- Começar

function popupPage(l, t, w, h) {

var windowprops = "localização=não, barras de rolagem=não, barras de menu=não, barras de ferramentas=não, redimensionável=sim" +

", esquerda=" + l + ", topo = "+ t +", largura = "+ w +", altura = "+ h;

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

popup = window.open(URL, "MenuPopup", windowprops);

}

// Fim -->

</script>

<tr>

<td>

<pré>

Parâmetros de página aberta<br>

Distância da esquerda: <input type=text name=left size=2 maxlength=4> pixels

Distância da direita: <input type=text name=top size=2 maxlength=4> pixels

Largura da janela: <input type=text name=width size=2 maxlength=4> pixels

Altura da janela: <input type=text name=height size=2 maxlength=4> pixels

</pré>

<input type=button value="Abra esta janela!" onClick="popupPage(this.form.left.value, this.form.top.value, this.form.width.value,

este.formulário.altura.valor)">

</center>

</form>

</td>

</tr>

</tabela>

Você só precisa inserir um valor na caixa de diálogo correspondente e a janela da página a ser aberta será bem controlada.

44. Abertura e movimento da página

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

Copie o código do código da seguinte forma:

<!-- Começar

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

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

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

pai.moveBy(0,-x);

}

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

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

pai.moveBy(0,x);

}

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

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

pai.moveBy(x,0);

}

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

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

pai.moveBy(-x,0);

}

//-->

// Fim -->

</script>

45. Exiba a data e hora da máquina do cliente pessoal

Copie o código do código da seguinte forma:

<!-- Escondendo

hoje = nova data()

***("A hora atual é: ",today.getHours(),":",today.getMinutes())

***("<br>A data de hoje é: ", today.getMonth()+1,"/",today.getDate(),"/",today.getYear());

//termina de ocultar o conteúdo -->

</script>

46. Gere automaticamente a data da última modificação para você sempre:

Copie o código do código da seguinte forma:

<html>

<corpo>

Esta é uma página HTML simples.

<br>

Últimas alterações:

<!-- ocultar script de navegadores antigos

***(documento.lastModificado)

//termina de ocultar o conteúdo -->

</script>

</body>

</html>

47. Não pode estar vazio e com restrições de endereço de e-mail:

Copie o código do código da seguinte forma:

<html>

<cabeça>

<!-- Ocultar

função teste1(formulário) {

if (form.text1.value == "")

alert("Você não escreveu nada, digite novamente!")

outro {

alert("Oi"+form.text1.value+"! Você completou sua entrada!");

}

função teste2(formulário) {

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

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

alert("Este não é o endereço de e-mail correto! Digite-o novamente!");

else alert("Você completou sua entrada!");

}

// -->

</script>

</head>

<corpo>

Digite seu nome:<br>

<P>

Digite seu endereço de e-mail:<br>

</body>

48. Marquise

Copie o código do código da seguinte forma:

<html>

<cabeça>

<!-- Ocultar

var scrtxt="Que tal! É legal! Você também pode experimentar."+"Aqui vai sua mensagem aos visitantes do seu

a página irá "+"olhar por horas em puro fascínio...";

var lentxt=scrtxt.length;

var largura=100;

var pos=1-largura;

função rolar() {

pos++;

var scroller="";

if (pos==lentxt) {

pos=1-largura;

}

se (pos<0) {

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

scroller=scroller+" ";}

scroller=scroller+scrtxt.substring(0,largura-i+1);

}

outro {

scroller=scroller+scrtxt.substring(pos,largura+pos);

}

janela.status=scroller;

setTimeout("scroll()",150);

}

//-->

</script>

</head>

Sua página da web pode ser exibida aqui!

</body>

</html>

49. Use os botões na página da web para controlar a exibição da página anterior, da próxima página e da página inicial.

Copie o código do código da seguinte forma:

<html>

<corpo>

</FORM>

</body>

</html>

50. Visualize o código-fonte de um site

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

Copie o código do código da seguinte forma:

<ROTO>

função adicionar()

{

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

window.location="view-source:"+ress;

}

</SCRIPT>

Digite o endereço URL onde deseja visualizar o código-fonte:

Copie o código do código da seguinte forma:

<FORMULÁRIO><br>

</FORM>

51. O título exibe a data

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

Copie o código do código da seguinte forma:

<!--ocultar

var não é mês = novo

Array("Janeiro", "Fevereiro", "Março", "Abril", "Maio", "Junho", "Julho", "Agosto", "Setembro", "Outubro", "Novembro", "Dezembro") ;

var não é dia = novo

Array("Domingo","Segunda","Terça","Quarta","Quinta","Sexta","Sábado","Domingo");

hoje = nova data();

Ano=hoje.getAno();

Data=hoje.getDate();

se(documento.todos)

document.title="Hoje é: "+Year+"年"+isnMonth[today.getMonth()]+Date+"日"+isnDay[today.getDay()]

//--ocultar-->

</script>

52. Mostrar todos os links

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

Copie o código do código da seguinte forma:

<!--

função extrairlinks(){

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

var total=links.length

var win2=window.open("","","barra de menu, barras de rolagem, barra de ferramentas")

win2.***("<font size='2'>Existem "+total+" conexões no total</font><br>")

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

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

}

//-->

</script>

53. Tecla Enter para mudar de linha

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

Copie o código do código da seguinte forma:

function handleEnter (campo, evento) {

var keyCode = event.keyCode?event.keyCode:evento.qual?

evento.que: evento.charCode;

if (chaveCode == 13) {

var eu;

for (i = 0; i <field.form.elements.length; i++)

if (campo == campo.form.elements[i])

quebrar;

i = (i + 1)% field.form.elements.length;

campo.form.elements[i].focus();

retornar falso;

}

outro

retornar verdadeiro;

}

</script>

<formulário>

<textarea>Retorno de carro e avanço de linha

54. Enviar após confirmação

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

Copie o código do código da seguinte forma:

<!--

função mensagem(){

if (confirm("Tem certeza que deseja enviar!"))

document.lnman.submit()

}

//-->

</SCRIPT>

<p>

</p>

<p>

</p>

</form>

55. Altere o conteúdo da tabela

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

Copie o código do código da seguinte forma:

var arr=nova matriz()

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

arr[1]="dois dois dois dois dois";

arr[2]="três três três três três";

</script>

<option value=a>Alterar o primeiro quadro</option>

<option value=a>Alterar o segundo quadro</option>

<option value=a>Alterar o terceiro quadro</option>

</selecionar>

<td width=150>Primeiro quadro</td>

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

<td width=150>Terceiro quadro</td>

</tr>

</tabela>