41 웹 개발자가 수집 해야하는 실용적인 JavaScript 팁

저자：Eve Cole 업데이트 시간：2025-07-24 22:16:02

웹 개발자가 참조를 위해 수집 해야하는 실용적인 JavaScript 기술. 특정 내용은 다음과 같습니다

1. 오른쪽 마우스 버튼이 완전히 차단됩니다

oncontextMenu =”window.event.returnValue = false”

<테이블 테두리 oncontextMenu = return (false)> <td> 아니오 </탁자>는 테이블에 사용할 수 있습니다

2. 선택을 해제하고 복사하지 않도록합니다

3.JS는 붙여 넣기를 허용하지 않습니다

onpaste =”return false”

4. JS는 복사를 방지합니다

oncopy =”return false;” Oncut =”Return false;”

5. IE 주소 표시 줄 앞에서 자신의 아이콘으로 변경

이 이미지를 파일의 루트 디렉토리에 넣고 접미사를 ICO로 수정하십시오.

6. 좋아하는 아이콘을 표시 할 수 있습니다

7. 입력 메소드를 끕니다

<입력 스타일 = "ime-mode : disabled">

8. 항상 프레임을 가지고 다니십시오

if (window == top) top.location.href = "frames.htm"; //frames.htm은 프레임 웹 페이지입니다

//> </script>

9. 프레임이 존재하지 않도록합니다

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

//> < /script>

10. 웹 페이지는 저장되지 않습니다

11. <입력 유형 = 버튼 값 =보기 웹 페이지 소스 코드

onclick =”window.location =“view-source :”+“http://www.pconline.com.cn”>

12. 삭제시 확인하십시오

<a href = "javaScript : if (확인 ("실제로 삭제해야합니까? ")) location ="boos.asp? & reyou = 삭제

& page = 1 ″ "> 삭제 </a>

13. 제어의 절대 위치를 얻으십시오

 // javaScript <script language =”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 language = "vbscript”> <! function getie () dim t, l, a, bset a = docut

14. 커서가 텍스트 상자 끝에서 멈 춥니 다

 <script language =”javaScript”> function cc () {var e = event.srcelement; var r = e.creatextrange (); r.movestart ( "문자", e.value.length); r.collapse (true); r.select ();} < /script> <input type = text1 value =”123 ″ Onfocus =”).

15. 이전 페이지의 출처를 결정하십시오

자바 스크립트 :

문서 .referrer

16. 창을 최소화하고 최대화하고 닫습니다

 <오브젝트 ID = hh1 classId =”clsid : adb880a6-d8ff-11cf-9377-00aa003b7a11 ″> <param name =”value =”value =”minimize”> < /object> <객체 id = hh2 classid =”clsid : adb880a6-d8ff-11cf-937-00aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa 00b7a11 ″. 이름 =”명령”value =”maximize”> < /object> <object id = hh3 classid =”clsid : adb880a6-d8ff-11cf-9377-00aa003b7a11 ″> <param value =”command”value =”close”> < /object> <input type = button vally = hh1.click ()> click ()> click ()> click (). onclick = hh2.click ()> <입력 유형 = 버튼 값 = close onclick = hh3.click ()>

이 예제는 IE에 적용됩니다

17. 블록 기능 키 변속, ALT, CTRL

 <cript> function xoy () {if (event.shiftkey) alert ( "Shift Key가 금지됩니다!"); // alt ctrl} document.onkeydown = look; < /script>로 대체 할 수 있습니다

18. 웹 페이지는 캐시되지 않습니다

또는 <meta http-equiv =”만료”content =”0 ″>

19. 형태가 오목하고 볼록한 느낌을 갖지 않도록하는 방법은 무엇입니까?

<입력 유형 = 텍스트 스타일 =”테두리 : 1 솔리드 #000000 ″>

또는

<입력 유형 = 텍스트 스타일 =”테두리-왼쪽 : 없음; 경계-권리 : 없음; 국경-탑 : 없음; 국경-바닥 :

1 솔리드 #000000 ″> < /textRea>

20. <div> <span> & <layer>의 차이?

<div> (Division)은 페이지 요소의 큰 세그먼트를 정의하는 데 사용되므로 라인 전송이 발생합니다.

<Span>은 같은 줄에서 요소를 정의하는 데 사용됩니다. <div>의 유일한 차이점은 라인 전송을 생성하지 않는다는 것입니다.

<layer>는 NS의 태그이며, 즉 <div>와 동일합니다.

21. 팝업 창이 항상 상단에있게하십시오.

22. 막대를 스크롤하지 않습니까?

수직 막대가하지 않도록하십시오.

< /body>

수평 막대가하지 않도록하십시오.

<바디 스타일 = "오버플로 : 스크롤; 오버 플로우 -x : 숨겨진">

< /body>

둘 다 제거 하시겠습니까? 더 쉽습니다

<바디 스크롤 = "아니오">

< /body>

23. 사진 링크를 클릭 한 후 그림 주위의 점선을 제거하는 방법은 무엇입니까?

24. 이메일 처리 제출 양식

<입력 유형 = 제출>

< /form>

25. 열린 자식 창에서 부모 창을 새로 고치는 코드에 쓰는 방법은 무엇입니까?

Window.opener.location.reload ()

26. 페이지의 크기를 열 수있는 방법

페이지가 열리는 위치 <body onload = "top.moveby (300,200);">

27. 페이지에 가득 차 있지 않은 배경 사진을 추가하는 방법 및 페이지를 가져올 때 배경 사진이 사용되지 않은 채 남아 있습니다.

<스타일>

몸

{배경 이미지 : 없음; 배경 반복 : 비 반복;

배경 위치 : 중심; 배경 연결 : 고정}}

< /스타일>

28. 문자열이 숫자로 구성되어 있는지 확인하십시오

함수 checknum (str) {return str.match (// d/) == null}

경고 (Checknum ( "1232142141"))

경고 (Checknum ( "123214214a1"))

//> </script>

29. 창의 크기를 얻으십시오

document.body.clientWidth; document.body.clientHeight

30. 그것이 캐릭터인지 결정하는 방법

if (/;^/x00-/xff ]/g.test(s)) alert ( "중국어 포함");

else alert ( "모든 문자");

31.TextArea 적응 텍스트의 줄 수

< /textarea>

32. 날짜 마이너스 일은 두 번째 날짜와 동일합니다

 <script language = javaScript> 함수 cc (dd, dadd) {// 오류 처리가 추가 될 수 있습니다 var var a = 새 날짜 (dd) a = a.valueof () a = a dadd * 24 * 60 * 60 * 1000a = 새 날짜 (a.getlyear () + " +" + (a.getmonth () + 1) + " +" + a.getdate () + a getdate () "day")} cc ( "12/23/2002", 2) </script>

33. 라디오가 선택되었습니다

 < HTML>< script language=”vbscript”>function checkme() for each ob in radio1if ob.checked then window.alert ob.valuenextend function< /script>< BODY>< INPUT name=”radio1″ type=”radio” value=”style” checked>Style< INPUT name=”radio1″ type=”radio” value=”barcode”>Barcode< INPUT type=”button” value =”check”onclick =”CheckMe ()”> < /body> < /html>

34. 스크립트는 결코 잘못되지 않습니다

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

35. Enter 키를 사용하면 커서가 다음 입력 상자로 이동할 수 있습니다.

36. 특정 웹 사이트의 링크 속도 감지 :

<body> 영역에 다음 코드를 추가하십시오.

 <script language = javaScript> tim = 1SetInterVal ( "TIM ++", 100) b = 1var autourl = new 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.ctv.c. name = autof> ")) for (var i = 1; i <autourl.length; i ++) document.write ("<input type = text name = txt "+i+”size = 10 value = test ...> =》 <inputtype = textname = url”+i+”size = 40 <입력 유형 = 버튼 value = goonclick = wind timeout "} else {document.forms [0] ["txt "+b] .value ="time "+tim/10+"seconds "} b ++} function run () {for (var i = 1; i <autourl.length; i ++) document.write ("<imgsrc = http : // "+autourl+"/"+"+"+"+"+"+"+"+" 높이 = 1onerror = auto ( "http : //"+autourl+"")> ")} run () </script>

37. 다양한 스타일의 커서

자동 : 표준 커서

기본값 : 표준 화살표

손 : 손 커서

기다려 : 커서를 기다리십시오

텍스트 : i 자형 커서

수직 텍스트 : 수평 i 자형 커서

드롭 없음 : 커서를 드래그 할 수 없습니다

획기되지 않은 : 유효하지 않은 커서

도움말 :? 도와주세요 커서

모든 스크롤 : 삼각형 방향 마크

이동 : 모바일 태그

크로스 헤어 : 크로스 헤어

e- 레드 크기

N- 레드 크기

NW- 레드 크기

W- 레드 사이즈

S-Resize

SE- 레드 크기

SW-Resize

38. 페이지 입력 및 종료에 대한 특수 효과

페이지 <meta http-equiv =”page-enter”content =”velovetrans (duration = x, transition = y) ">를 입력하십시오

릴리스 페이지 <메타 http-equiv =”page-exit”content =”resowntrans (duration = x, transition = y) ">

이것은 페이지가로드되어 호출 될 때 특수 효과입니다. 지속 시간은 몇 초 만에 특수 효과의 지속 시간을 나타냅니다.

전환은 사용할 특수 효과를 나타냅니다.

1-23 :

0 사각형 수축

1 사각형 확대

2 라운드 수축

3 원형 확대

4 상단까지

5 아래로 새로 고쳐집니다

6 왼쪽에서 오른쪽으로 새로 고침

7 오른쪽에서 왼쪽 새로 고침

8 수직 블라인드

9 수평 블라인드

10 변위 수평 블라인드

11 탈구 된 수직 블라인드

확산의 12 점

13 중간 주위에 새로 고침

14 중간에서 왼쪽과 오른쪽에서 새로 고침

15 중간에서 상단

16 위아래로 중간까지

17 오른쪽 하단 오른쪽에서 왼쪽 상단

18 오른쪽에서 왼쪽 하단

19 왼쪽에서 하단 오른쪽 상단

20 왼쪽 아래에서 오른쪽 상단

21 수평 막대

22 수직 스트립

23 개 이상 22 유형 중 하나를 무작위로 선택하십시오.

39. 지정된 시간 내에 점프하십시오

40. 웹 페이지가 검색되었는지 여부

속성 값은 다음과 같습니다.

속성 값은 "모두"입니다. 파일이 검색되고 페이지의 링크를 쿼리 할 수 있습니다.

속성 값은 "없음"입니다. 파일이 검색되지 않고 페이지의 링크가 쿼리되지 않습니다.

속성 값은 "index"입니다. 파일이 검색됩니다.

속성 값은 "팔로우"입니다. 쿼리 페이지의 링크;

속성 값은 "noindex"입니다. 파일은 검색되지 않지만 링크에 대해 쿼리 할 수 있습니다.

속성 값은 "nofollow"입니다. 파일은 검색되지 않았지만 페이지의 링크를 쿼리 할 수 있습니다.

클라이언트 스크립트를 사용하여 OnKeydown 문서 이벤트를 페이지에 추가하여 캐리지 리턴 이벤트를 수신 한 후 페이지가 탭을 수행 할 수 있도록하십시오.

키의 기능은 이벤트의 키 코드를 13에서 9로 변경하는 것입니다.

JavaScript 코드는 다음과 같습니다.

 <script language = "javaScript"for = "document"event = "onkeyDown"> <! if (event.keyCode == 13) event.KeyCode = 9;> </script>

이러한 처리 방식은 초점을 아래쪽으로 이동할 수 있지만 버튼에서도 동일한 역할을 수행합니다. 일반적으로 고객은 입력을 마쳤습니다

데이터가 버튼으로 이동 한 후에는 "Enter"를 직접 눌러 데이터를 제출하는 것이 가장 좋습니다. 따라서 위의 방법을 수행해야합니다.

수정하려면 "제출"버튼을 이동해서는 안됩니다. 대신 제출물은 직접 활성화되어야합니다.

따라서 위의 코드, 즉 이벤트의 "소스"가 제출 버튼인지 확인하기 위해 수정했습니다. 코드는 다음과 같습니다.

 <script language =”javaScript”for =”hocep”event =”onkeyDown”> <! if (event.keyCode == 13 && event.srcelement.Type! = 'button'&& event.srcelement.type! = 'event.srcelement.type! ='reset '&& inverpe! event.srcelement.type! = ") event.keyCode = 9;> </script>

html에서 type = "button"이 있기 때문에 버튼인지 확인하십시오.

html에 type = "제출"이 있기 때문에 제출되었는지 여부를 결정하십시오.

HTML에서 "재설정"을 실행해야하므로 재설정되는지 여부를 결정하십시오.

판단은 HTML의 "<a> 링크"도 실행해야하기 때문에 비어 있다는 것입니다. 이 상황은 그다지 일어나지 않습니다. "tabindex = -1"메소드를 사용하여 해제하고 초점을 맞출 수 있습니다.

위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.