JavaScript는 문자 그대로의 스크립팅 언어로, 내장 지원 유형을 가진 역동적이고 약한 프로토 타입 기반 언어입니다. 통역사를 JavaScript 엔진이라고합니다. 브라우저의 일부이며 클라이언트 스크립팅 언어에서 널리 사용됩니다. HTML 웹 페이지에 동적 기능을 추가하기 위해 HTML (표준 범용 마크 업 언어의 응용 프로그램) 웹 페이지에서 처음 사용되었습니다.
이 기사는 모든 사람이 개발을 용이하게하기 위해 5 가지 실용적인 JavaScript 코드를 편집했습니다.
1. 날짜가 유효한지 결정하십시오
JavaScript에 포함 된 날짜 기능은 여전히 너무 간단하며 실제 프로젝트에서 다른 날짜 형식을 파싱하고 판단하는 것이 어려운 일입니다. JQuery는 또한 날짜 관련 처리를 간단하게 만들기위한 타사 라이브러리가 있지만 때로는 거대한 타사 라이브러리를 소개하지 않고는 매우 간단한 기능이 필요할 수도 있습니다. 현재 다음 날짜 확인 코드를 사용할 수있어 날짜 형식을 사용자 정의하고 날짜의 유효성을 확인할 수 있습니다.
function isValidDate (value, userformat) {// 기본 형식 설정 형식이 제공되지 않으면 userformat = userformat || 'mm/dd/yyyy'; // // 월, 일 및 연도 문자를 제외하여 사용자 정의 구분자를 찾으십시오. // 월, 일 및 연도로 배열을 만듭니다. // index var var theformat = userformat.split (delimiter)의 형식 순서를 알고 있습니다. // 사용자 날짜에서 배열 생성 var thedate = value.split (delimiter); 함수 isdate (날짜, 형식) {var m, d, y, i = 0, len = format.length, f; for (i; i <len; i ++) {f = 형식 [i]; if (/m/.test(f)) m = 날짜 [i]; if (/d/.test(f)) d = 날짜 [i]; if (/y/.test(f)) y = 날짜 [i]; } return (m> 0 && m <13 && y && y.length === 4 && d> 0 && // 달의 유효한 날인지 확인 d <= (새 날짜 (y, m, 0)). getDate ()); } return isdate (thedate, theformat);}사용 방법 :
11 월에는 31 일이 없기 때문에 다음 호출은 False를 반환합니다.
isvaliddate ( 'dd-mm-yyyy', '31/11/2012 ')
2. 요소 세트의 최대 너비 또는 높이를 얻으십시오.
다음 기능은 동적 레이아웃을 수행 해야하는 개발자에게 매우 유용합니다.
var getMaxHeight = function ($ elms) {var maxheight = 0; $ elms.each (function () {// 경우에 따라 auterheight ()를 대신 var height = $ (this) .height (); if (height> maxheight) {maxheight = height;}}); return maxheight;};사용 방법 :
$ (요소) .Height (getMaxHeight ($ (요소)));
3. 텍스트를 강조합니다
텍스트를 강조하는 기능을 구현할 수있는 jQuery의 타사 라이브러리가 많이 있지만 다음과 같은 작은 JavaScript 코드를 사용 하여이 기능을 구현하는 것이 좋습니다. 그것은 매우 짧고 내 필요에 따라 유연하게 수정 될 수 있으며, 강조 스타일을 직접 정의 할 수 있습니다. 다음 두 가지 기능을 사용하면 자신만의 텍스트 강조 표시 플러그인을 만드는 데 도움이 될 수 있습니다.
함수 하이라이트 (텍스트, 단어, 태그) {// 기본 태그가 제공되지 않으면 태그 = 태그 || '기간'; var i, len = words.length, re; for (i = 0; i <len; i ++) {// 모든 경기를 강조하기 위해 re = new regexp (단어 [i], 'g'); if (re.test (text)) {text = text.replace ( '<' + tag + '> $ & </' + tag + '>'); }} 반환 텍스트;}또한 높은 조명 기능이 필요합니다.
Unhighlight (텍스트, 태그) 함수 {// 기본 태그가 제공되지 않은 경우 태그 = 태그 || '기간'; var re = new regexp ( '(<'+tag+'.+?> | <//'+tag+'>)', 'g'); return text.replace (re, '');}사용 방법 :
$ ( 'p'). html (하이라이트 ($ ( 'p'). html (), // 텍스트 [ 'foo', 'bar', 'baz', 'hello world'], // 'strong'// custom tag를 강조하기위한 단어 또는 문구 목록);
4. 텍스트 모션 효과
때로는 모든 단어가 움직일 수 있도록 텍스트 단락에 모션을 추가하고 싶습니다. 다음 JQuery 플러그인 코드를 사용 하여이 효과를 달성 할 수 있습니다. 물론 더 나은 결과를 얻으려면 CSS3 전환 스타일을 결합해야합니다.
$ .fn.animatetext = function (Delay, Klass) {var text = this.text (); var 문자 = text.split ( ''); reture this.each (function () {var $ this = $ (this); $ this.html (text.replace (/./ g, '<span> $ & </span>'); $ this.find ( 'span.letter'). 각 (function (function () {$ (el). });사용 방법 :
$ ( 'p'). animatetext (15, 'foo');
5. 요소를 하나씩 숨 깁니다
다음 JQuery 플러그인은 설정 한 단계 길이 (간격 시간)에 따라 요소 그룹을 하나씩 숨길 수 있습니다. 목록 요소를 다시로드하는 데 사용되면 좋은 결과를 얻을 수 있습니다.
$ .fn.fadeall = function (ops) {var o = $ .extend ({delay : 500, // 요소 사이의 지연 속도 : 500, // 애니메이션 속도 편의 : '스윙'// 다른 플러그인이 필요합니다}, ops); var $ el = this; for (var i = 0, d = 0, l = $ el.length; i <l; i ++, d+= o.delay) {$ el.eq (i) .delay (d) .fadein (o.speed, o.ease); } return $ el;}사용 방법 :
$ (요소) .fadeall ({지연 : 300, 속도 : 300});
위의 것은 실용적인 JavaScript 코드 스 니펫의 작은 부분 일 뿐이며, 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.