이전 단어
Simple Calendar는 JavaScript의 날짜 객체의 일반적인 응용 프로그램이며 광범위한 용도가 있습니다. 이 기사는 간단한 캘린더의 구현 아이디어를 자세히 설명합니다.
효과 데모
HTML 설명
조정 버튼이 고급 브라우저에 포함되도록 각각 유형 = 숫자의 두 입력을 입력 컨트롤로 사용하십시오.
일요일부터 월요일까지 일주일을 정리하십시오
<div> <Header Class = 'Control'> <input id = "conyear"type = "number"min = "1900"max = "2100"step = "1"/> <입력 Id = "conmonth"type = "min ="1 "max ="12 "spec ="1 "/> </header> <div> <Header Class = '주일> <div> <div> <moding> <div> <div> <div> <div> tue </div> <div> 목요일 </div> <div> 금요일 </div> <div> 토요일 </div> </header> <섹션 id = 'divbox'> <div id = "day1"> 1 </div> <div> 2 </div> <div> 3 </div> <div> 4 </div> 5 </div> </div> </div> </div> </div> <div> 9 </div> <div> 10 </div> <div> 11 </div> <div> 12 </div> <div> 13 </div> <div> 14 </div> <div> 15 </div> <div> 16 </div> <div> 17 </div> <div> 18 </div> <div> </div> <div> </div> </div> 20 </div> 222> <div> 23 </div> <div> 24 </div> <div> 25 </div> <div> 26 </div> <div> 27 </div> <div> 28 </div> <div> 29 </div> <div id = "did30"> 30 </div> <div id = "day31"> 31 </div> </div> </div> </div> </div> </div>
CSS 설명
간단한 캘린더의 구현을 위해 먼저 캘린더에서 클래스 = "day"의 DIV 배열을 떠 다니는 것을 결정하십시오. 이를 통해 동일한 수준의 모든 DIV는 첫날 DIV의 위치를 변경하여 움직임을 따를 수 있습니다.
본체 {마진 : 0;} 입력 {테두리 : 없음; 패딩 : 0;}. 상자 {너비 : 354px; 마진 : 30px auto 0; } .datebox {높이 : 300px; 테두리 : 2px solid black;} .week {오버플로 : 숨겨; 국경 바닥 : 1px 솔리드 블랙; 선-높이 : 49px;}. 주간 {높이 : 49px; 플로트 : 왼쪽; 너비 : 50px; Text-Align : Center;}. Daybox {Overflow : Hidden;}. Day {Float : Left; 높이 : 50px; 너비 : 50px; 글꼴 : 20px/50px 'Microsoft Yahei'; Text-Align : Center;}. Control {Overflow : Hidden;}. con-in {높이 : 50px; 플로트 : 왼쪽; 너비 : 100px; 텍스트 정렬 : 센터; 글꼴 : 20px/50px "Microsoft Yahei";}JS 설명
간단한 캘린더의 JS 논리에는 총 5 개의 구현이 필요합니다.
짐
【2 to 월 첫날의 주에 따르면, 첫날의 마진 왼쪽 값을 바꾸고 첫날을 해당 위치로 옮깁니다. 떠 다니는 관계로 인해 나머지 날도 해당 위치로 이동합니다.
【3 extra 월의 일수에 따라 여분의 일을 숨기고; 물론, 다른 달에 숨겨 질 수있는 날은 숨기기 전에 표시해야합니다.
[4] 달의 30 일이 일요일이라면 새로운 라인이 점령 될 것입니다. 이 시점에서 30 일의 여백 값을 변경하면 첫 번째 줄로 이동됩니다 (31 일이 새로운 라인을 차지할 수있는 경우 비슷한 치료가 이루어집니다).
page 페이지를로드 한 후 현재 연도와 월을 가져 오십시오. 연도 또는 월을 변경할 때 변경된 값을 얻고 캘린더를 업데이트하십시오.
// 준비 : 현재 스타일 함수 가져 오기 getCss (obj, style) {if (wind } return obj.currentStyle [Style];} // 구현 1 : 월의 일 수와 첫날, 월의 30 일 및 31 일의 요일을 얻습니다. var d = 새로운 날짜 (); // 2 월 인 경우 (Month == 2) {// leap 연도 인 경우 ((년 % 4 === 0 && 년 % 100! == 0) || 연도 % 400 === 0) {result.days = 29; // 일반 연도 인 경우} else {result.days = 28; } // 4th, 6, 9, 11 월 인 경우} else if (Month == 4 || Month == 6 || Month == 9 || Month == 11) {result.days = 30; } else {result.days = 31; // 월 31 일은 주 result입니다. } // 월의 첫날은 주 result.day1week = d.getday (d.setlyear (연도, 1,1)); if (month! = 2) {// 월 30 일은 주 result.day30week = d.getday (d.setlyear (연도, 1,30)); } return result;} // 구현 2 : 달의 첫날 X에 따르면, 첫 번째 날의 마진 왼쪽을 설정하여 올바른 주 주 위치 함수 move_day1 (연도, 월) {var week1 = get_data (연도, 월) .day1week; day1.style.marginleft = Week1%7*parseint (getcss (day1, 'width'))+ 'px';} // 구현 3 : 월의 일에 따라 추가 일의 수를 숨기십시오. 물론 우선, 다른 달에 숨겨진 일 수를 먼저 표시해야합니다. } // 달의 초과 일 수를 숨기고 var days = get_data (연도, 월) .days; for (var i = days; i <31; i ++) {daybox.children [i] .style.display = 'none'; }}; // 구현 4 : 월의 30 일 또는 31 일이 일요일이면 새로운 행이 점유됩니다. 여백 탑 함수 move_day30 (연도, 월)을 설정하여 새로 점령 한 날을 첫 번째 줄로 이동하십시오 {// 월 30 일이 일요일 인 경우 (get_data (연도, 월). day31.style.margintop = parseint (getcss (day31, 'height')) *(-5) + 'px'; day31.style.margintop = parseint (getcss (day31, 'height')) *(-5) + 'px'; day31.style.marginleft = getcss (day31, 'width'); 반품; } else {day30.style.margintop = day31.style.margintop = day31.style.marginleft = '0'; } // 월 31 일이 일요일 인 경우 (get_data (년, 월). } else {day31.style.margintop = '0'; }} // 구현 5 : 페이지를로드 할 때 현재 연도와 월을 가져 오면 현재 달 캘린더를 표시합니다. 연도 또는 월을 변경할 때 변경된 연도 및 월 달력 var var var 년 = conyear.value = new date (). getlyear (); var month = conmonth.value = new date (). getmonth () + 1; move_day1 (연도, 월); conyear.value; var month = conmonth.value; if (year <1900 || year> 2100) {year = conyear.value = new date (). getlyear (); } if (Month <1 || Month> 12) {Month = Conmonth.value = new Date (). getMonth () + 1; } move_day1 (연도, 월); hide_days (연도, 월); Move_day30 (연도, 월);}소스 코드 데모
위는이 기사의 모든 내용입니다. 모든 사람의 학습에 도움이되기를 바랍니다. 모든 사람이 wulin.com을 더 지원하기를 바랍니다.