나는 항상 전에 JavaScript로 달력을 작성하고 싶었지만 전혀 좋은 아이디어가 없기 때문에 오랫동안 시도하지 않았습니다. 최근에 나는 인터넷에서 JavaScript로 작성된 간단한 달력의 예를 보았습니다. 코드는 크지 않지만 JS 캘린더의 구현 원리를 잘 설명한다고 생각합니다. 나는 또한 그것을 시도하고 많이 얻었습니다. 기본 구현 원칙을 마스터 한 후에는 더 많은 기능을 추가하고 자유롭게 재생할 수 있습니다. 먼저 여기에서 공유하겠습니다. 관심이 있으시면 시도해 볼 수 있습니다!
1. 표 행 카운트 문제
날짜 테이블을 표시하려면 먼저이 테이블에 몇 개의 행과 열이 있는지 알아야합니다. 일요일부터 총 7 개의 열이 있으며 (일정의 첫 번째 열은 일요일) 토요일까지 열의 수가 결정되었습니다. 행 카운트의 문제를 해결하기 전에 매월 첫날은 달력에서 일요일부터 시작되지 않기 때문에 먼저 월 첫날의 날이 무엇인지 알아야합니다. 금요일과 토요일 일 수 있으므로 1 차 왼쪽 부분은 빈 테이블로 교체해야합니다. 그렇다면 대신 얼마나 빈 테이블을 사용해야합니까? 여기서 우리는 배열에서 숫자를 반환하는 getday () 메소드를 사용해야합니다. [0-6], 0은 일요일, 1은 월요일, 2는 화요일을 나타냅니다. 따라서 한 달의 첫 번째가 금요일이라면 왼쪽에서 교체하려면 5 개의 빈 양식이 필요합니다. 그런 다음 한 달에 31 일이 있다면 마지막 행의 수는 다음과 같습니다.
var tr_nums = math.ceil ((5 + 31)/7);
물론 매월 31 일이 아니기 때문에 12 개월의 배열을 만들어야합니다. 각 요소는 매월 일수를 나타냅니다. 그러나 2 월은 매우 특별합니다. 2 월에는 도약 연도에 29 일, 2 월에는 평범한 해에 28 일이 있습니다. 따라서 배열을 만들기 전에 심판하는 사람들이 혼자서 도약하는 함수를 만들어야합니다.
// 현재 연도를 4로 나눌 수 있지만 100으로 나눌 수 없거나 400으로 나눌 수있는 경우, 도약 연도, 반환 1로 결정할 수 있습니다. (년 % 100! = 0? 1 : (년 % 400 == 0? 1 : 0) : 0;}
그런 다음 몇 개월 배열을 만듭니다.
var days_per_month = 새 배열 (31, 28 + Isleap (년), 31, 30, 31, 30, 31, 31, 30, 31);
이를 통해 올바른 일 수는 일반 및 도약 모두에서 꺼질 수 있습니다. 다음 코드는 오늘날 관련 정보를 얻는 데 사용됩니다.
var today = new date (), // 현재 날짜 y = today.getlyear (), // 날짜 m = today.getmonth (), // 날짜에 달을 얻는다 (월이 0에서 계산되고, 얻어진 값은 정상의 달의 가치보다 1 개보다 낮다) d = today (), // 날짜를 촉진하는 날짜 (). = 새 날짜 (y, m, 1), // 주일의 첫날을 받는다.
결국, 당신은 달에 필요한 테이블 행의 수를 얻을 수 있습니다.
var str_nums = math.ceil ((dayofweek + days_per_month [m]) / 7); // 날짜 테이블에 필요한 행 수 결정
2. 캘린더 테이블을 인쇄하십시오
테이블 자체는 2 차원 배열이므로 For Master가 나와서 두 개의 루프를 실행하여 완료하십시오. 코드는 다음과 같습니다.
for (i = 0; i <str_nums; i += 1) {// 루프의 첫 번째 레이어는 tr tag document.write ( '<tr>')를 만듭니다. for (k = 0; k <7; k ++) {// 루프의 두 번째 레이어는 td tag var idx = 7 * i+k를 만듭니다. // 각 테이블에 대한 색인 생성 0 var date = idx -dayofweek + 1; // 월의 첫 번째와 일주일과 일치합니다. // 다른 일을} document.write ( '</tr>'); }3. 완전한 JS 캘린더 코드를 첨부하십시오
<cript> // 현재 연도가 도약 연도인지 판단합니다 (도약 연도의 2 월 29 일, 일반 연도 2 월에는 28 일) 기능 Isleap (연도) {return year % 4 == 0? (년 % 100! = 0? 1 : (년 % 400 == 0? 1 : 0) : 0; } var i, k, today = new date (), // 현재 날짜 y = today.getlyear (), // 날짜 m = today.getmonth ()에서 연도를 얻습니다. 날짜 테이블) Firstday = 새 날짜 (Y, M, 1), // 주일의 첫날을 받는다. 31, 30, 31, 30, 31, 31, 30, 31, 30, 31), // 월 배열 생성 str_nums = math.ceil ((dayofweek + days_per_month [m]) /7); // 날짜 테이블 문서에 필요한 행 수를 결정합니다 ( "<테이블 셀 패키는 = '0'> <tr> <th> day </th> <th> 둘 </th> <th> 둘 </th> <th> four </th> <th> six </th> </tr>"); // (i = 0; i <str_nums; i += 1)에 대한 테이블의 첫 번째 행 (주를 표시)을 인쇄합니다. {// 날짜 테이블 작성 문서를 만듭니다 .write ( '<tr>'); for (k = 0; k <7; k ++) {var idx = 7 * i+k; // 0 var date = idx에서 시작하여 각 테이블에 대한 인덱스를 만듭니다. -Week + 1; // 월 1 일을 주와 일치시킵니다 (날짜 <= 0 || 날짜> days_per_month [m])? 날짜 = '': date = idx -dayofweek + 1; // 인덱스는 달의 최대 값보다 0 이상 이하이거나 동일합니다. 날짜 == D 대신 빈 테이블을 사용 하시겠습니까? documb // Day} document.write ( '</tr>'); } document.write ( '</table>'); </스크립트>CSS 부분에서 자유롭게 플레이합시다. 현재 시간은 2016 년 5 월 2 일이며 렌더링은 다음과 같습니다.
위의 기사 "JS 작성 당일에 간단한 달력의 효과"는 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.