jQuery 연결 달력 구현 code_jquery

렌더링을 살펴보겠습니다

1. 먼저 기능에 대해 이야기해 보겠습니다.

1. “확인”을 클릭하여 달력을 표시합니다
2. DOM에서 이 캘린더를 숨기거나 삭제하려면 다시 클릭하세요. 이렇게 1단계와 2단계를 반복합니다.
3. 달력에 이번 달 날짜(몇 일, 매일 몇 일인지)가 표시되도록 합니다.
4. 이번 달의 날짜를 요일과 일치시키세요.
5. 달력을 왼쪽에 연결하세요.

2. HTML 구조에 대해 이야기해보겠습니다.

1. 위 파란색은 이번 달, 지난 달, 다음 달을 표시하는 DIV입니다.
2. 다음 날짜와 주는 테이블 구조를 사용하여 데이터를 저장합니다. 요일은 thead에 저장되고, 날짜는 tbody에 저장됩니다.

3. 함수 확장 분석:

3.1. 처음 두 함수는
JQUERY에서 토글을 사용한 것이 생각나네요. 쉽게 해결될 수 있습니다.

3.2. 달력에 이번 달의 날짜 수를 표시하게 놔둘까요?
날짜와 관련이 있으니 당연히 데타(Deta)라는 객체가 떠오를 것입니다. 이 객체에서는 특정 연도, 특정 날짜, 특정 월, 특정 날짜 및 특정 요일을 가져오거나 설정할 수 있습니다. 하지만 이번 달의 일수를 직접적으로 얻을 수는 없습니다. ? 무엇을 해야 할까요?
따라서 판단만 사용할 수 있습니다. 이번 달의 값을 기준으로 합니다. 일수를 변수에 저장해 보겠습니다. (객체에서 구한 현재 달은 1이어야 합니다. 0부터 계산됩니다.)
예를 들어 지금은 5월이라고 판단하면 5월은 큰 날이므로 값 31이 변수에 저장됩니다. 즉, 이번 달은 31일입니다.

3.3. 이번 달의 날짜를 요일과 일치시키세요.? ?
이 문제의 해결 방법은 해당 월의 첫날과 해당 주의 요일을 구하는 것입니다. 다음과 같은 순서로 정리할 수 있습니다. 여기서 순차적 배열에 대해 제가 이해한 것은 날짜가 TD 태그에 저장되기 때문에 TBODY에 있는 이러한 TD의 인덱스가 모두 배열되므로 해당 TD에 숫자 1을 삽입하고 후자의 TD에 다음 숫자 2가 삽입된다는 것입니다. .

3.4. 달력을 왼쪽에 연결하세요.

여기서 초점은 '협회'입니다. 최근에 '카운트다운'이라고 썼는데, 이번에는 '링크 캘린더'라고 적었는데, 링크 드롭다운 메뉴 등 '링크 드롭다운 메뉴'가 생각나더군요. 지방 및 도시 메뉴의 경우 모두 "연결"과 관련됩니다.
즉, "연결"해야 하는 항목에는 "포인트"(지금은 그렇게 부르겠습니다) 및 기타 변경 사항이 있어야 합니다. 만들어야 할 사항은 반드시 이 지점과 관련되어야 하며, 이 지점이 이렇게 변경되면 이 지점과 관련된 다른 것들도 변경되어 "연결" 효과를 얻게 됩니다.

예를 들어 마지막 "카운트다운"에서 "포인트"는 현재 시간과 설정된 미래 시간 간의 "총 밀리초" 차이입니다. 카운트다운에 표시되는 시, 분, 초는 모두 "총 밀리초"에 관련됩니다. "총 밀리초"가 변경되는 한 시, 분, 초도 모두 변경됩니다.

이 달력 연동에서 "포인트"는 현재 날짜 객체가 생성된 이후에 얻은 연도와 월입니다. 연도, 월에 따라 오고 가는 것을 오른쪽, 즉 다음 달에 표시할 항목을 설정합니다. 그러면 현재 얻은 연도와 월이 변경되는 한 다음 연도도 자연스럽게 변경됩니다. 역시 "연결"되어 있습니다.
물론 아직 처리해야 할 작은 세부사항이 있습니다.

4. 코드가 너무 길어서 구조만 넣었습니다. 내용은 글 마지막에 있는 DEMO에서 다운받으실 수 있습니다

코드 복사 코드는 다음과 같습니다.

$(function(){
var nowDate = $(".nowDate"), //왼쪽 달력 상자
nextDate = $(".nextDate"), //달력 켜기 오른쪽 Box
lstrTd = "", //왼쪽 날짜 행의 DOM 구조
rstrTd = "", //오른쪽 날짜 행의 DOM 구조
lrows = 0, //왼쪽 날짜 수 행
rrows = 0, //오른쪽 날짜 행 수
iHtmlNow = "", //왼쪽 달력 구조
iHtmlNext = "", //오른쪽 달력 구조
nowTitleDateY = "", //왼쪽에 제목 연도
nowTitleDateM = "", //왼쪽에 월 표시
nowlastM = "", //왼쪽에 월 표시
nextTitleDateY = "", //오른쪽 제목 연도
nextTitleDateM = "", //오른쪽 표시 월
nextLastM = "", //오른쪽 표시 월
creatbtu = true, //스위치 HTML 구조를 한 번만 생성하려면
NumDay = 0, //왼쪽은 매월 일수
rNumDay = 0, //왼쪽은 매월 일수
lfday; = 0, //왼쪽이 이번 달의 1일이 요일
rfday = 0 / //오른쪽이 이번 달의 1일이 요일
/ /날짜 행 생성
function creatTr(l,r){
}
/*이번 달과 다음 달의 날짜와 연도를 생성합니다.
* 여기서는 이번 달이 12월인 세 가지 상황이 있습니다. , 이번 달은 11월이고 이번 달은 1월입니다.
*/
function getTitleDate(){
var odate = new Date()
//현재 달이 12월이면 오른쪽 달은 1월이어야 합니다
//현재 달이 11월이면 오른쪽 달은 1월이어야 합니다
/ /현재 달이 1월 분이면 왼쪽 달은 다음과 같습니다. 12월
}
/*이번 달의 1일, 어느 요일을 가져옵니다.
*먼저 날짜 개체를 만든 연도, 월, 일 수를 설정합니다. 이를 설정한 후 getDay() 메서드를 사용하여 날짜를 설정한 주 수를 가져옵니다.
*/
function getfirstD(m1,y1 ,m2,y2){
}
//월의 크기에 따라 일수를 가져옵니다.
function getTdDay(m1,y1,m2,y2){
}
//들어오는 연도 매개변수에 따라 일수를 결정합니다. RunYear입니다. 즉, 둘 다 만족하는 경우 4로 나눌 수 있지만 100으로 나눌 수는 없습니다.
function isRunYear(y){
}
// HMTL 구조체 생성
function creatHtml(creatbtu){
//당월의 첫날인 요일을 기준으로 여러 행을 생성하여 모든 날짜를 저장합니다
}
// 해당 TD에 날짜 삽입
함수 insertdate(d,t){
//왼쪽에 삽입
//옆에 삽입
}
//DOM에 삽입
function insertHtml(){
}
//DOM에서 삭제
function delHtml(){
}
//캘린더를 표시하거나 숨기려면 확인을 클릭하세요
$(" input[type=button]").toggle(function (){
//확인 버튼을 계속 클릭하지 않도록 이 판단을 추가하세요
if(!nowDate.add(nextDate).is(":animated" )&&nowDate.add(nextDate).is(":empty" )){
//제목 위의 연도 및 월을 가져옵니다.
getTitleDate()
//날짜를 가져옵니다. 왼쪽 및 오른쪽
getTdDay(nowTitleDateM,nowTitleDateY,nextTitleDateM,nextTitleDateY); >//HTML 구조 생성
creatHtml();
//Will 구조가 DOM에 삽입됩니다
insertHtml()
//왼쪽 및 오른쪽 테이블에 날짜를 삽입합니다
insertdate(lfday,rfday);
//날짜 확장
nowDate.add (nextDate).slideDown(200)
}
},function(){
//Add 연속 클릭을 방지하기 위한 판단
if(!nowDate.add(nextDate).is(" :animated")){
//캘린더 접기
nowDate.add(nextDate).slideUp(200) ;
//DOM에서 달력 구조 삭제
delHtml();
}
})
})


4.1 이 코드는 이해할 수 있습니다. 다음 단계를 통해 댓글을 살펴보세요.
1. 현재 연도와 월(연결된 "포인트")을 가져옵니다.

2. 왼쪽과 오른쪽에서 해당 월의 일 수를 가져옵니다. > 3. 왼쪽과 오른쪽에 각각 요일에 해당하는 달의 숫자 1을 구합니다.
4. 위의 내용으로 HTML 구조를 만들 수 있습니다(생성 여부를 결정해야 하기 때문입니다). 그 달의 날짜 배열에 따라 5~6줄. 날짜를 표시하려면)
5. 생성된 구조를 DOM에 삽입합니다
6. 그런 다음 얻은 일수, 즉 날짜 번호를 해당 테이블의 TD에 삽입하여 날짜를 저장합니다. 🎜>

5. 요약


1. TR을 별도의 라인으로 처리할 필요 없이 tbody의 td를 전체 배열로 사용하고 데이터를 삽입하면 됩니다. (숫자가 표시되기 때문에 딱 맞고)
2. "연결" 규칙
3. 많은 양의 데이터를 삽입하는 등의 작업은 루프로 해결해야 합니다.

　4. 이처럼 데이터가 많으면 먼저 배열에 저장해야 합니다(이 예제에서는 숫자를 표시하므로 루프에서 변수를 직접 사용할 수 있습니다. 값인 경우 배열에 먼저 저장해야 합니다. 색인에 따라 가져옴)

온라인 데모:
http://demo.jb51.net/js/2012/mycalendar/

데모 다운로드:
mycalendar_jb51. rar