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, 그렇지 않으면 반환 0 기능 ISLEAP (연도) {return 년 % 4 == 0? (년 % 100! = 0? 1 : (년 % 400 == 0? 1 : 0) : 0; }그런 다음 몇 개월 배열을 만듭니다.
var days_per_month = 새로운 배열 (31, 28 + Isleap (년), 31, 30, 31, 30, 31, 30, 31, 31, 31, 31); 이를 통해 올바른 일 수는 일반 및 도약 모두에서 꺼질 수 있습니다. 다음 코드는 오늘에 대한 관련 정보를 얻는 데 사용됩니다 : var today = new date (), // 현재 날짜 y = today.getlyear (), // 날짜 m = getmonth (), // 날짜에 달을 가져옵니다. 날짜 테이블 생성 날을 강조) Firstday = New Date (y, m, 1), // 월의 첫날을받습니다. 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31, 30, 31), // 월 배열 생성
결국, 당신은 달에 필요한 테이블 행의 수를 얻을 수 있습니다.
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 일이며 렌더링은 다음과 같습니다.
위의 내용은이 기사에 관한 모든 것입니다. 모든 사람들이 JavaScript 프로그래밍을 배우는 것이 도움이되기를 바랍니다.