오늘의 간단한 달력 효과를 작성하는 Node.js

저는 항상 자바스크립트를 사용하여 달력을 작성하고 싶었지만 좋은 아이디어가 전혀 없어서 시도하지 못했습니다. 최근 인터넷에서 우연히 자바스크립트로 작성한 간단한 달력의 예를 본 적이 있는데, 코드의 양은 많지 않지만 js 달력의 구현 원리를 아주 잘 설명하고 있는 것 같습니다. 저도 직접 사용해 보고 많은 것을 얻었습니다. 기본 구현 원리를 익힌 후 더 많은 기능을 추가하고 싶다면 먼저 여기에서 공유해 보겠습니다.

1. 테이블의 행 개수 문제

날짜 테이블을 표시하려면 먼저 테이블의 행 개수와 열 개수를 알아야 합니다. 일요일(달력의 첫날)부터 열은 일요일)부터 토요일까지 총 7개의 열로 결정되었습니다. 행 번호 문제를 풀기 전에, 매월 첫 번째 날이 달력상 항상 일요일부터 시작되는 것은 아니기 때문에 먼저 그 달의 첫 번째 날이 어떤 요일인지 알아야 합니다. 첫 번째 날은 금요일일 수도 있고 토요일일 수도 있습니다. 불확실하므로 1번의 왼쪽 부분을 빈 형태로 대체해야 합니다. 그러면 이를 대체하려면 몇 개의 빈 테이블을 사용해야 합니까? 이 메소드는 배열에 숫자를 반환해야 합니다. 0은 일요일을 나타내고 1은 화요일을 나타냅니다. 에. . 따라서 매월 1일이 금요일이면 왼쪽에 5개의 빈 테이블이 필요합니다. 그런 다음 한 달이 31일인 경우 테이블 행의 최종 수는 다음과 같습니다.

var tr_nums = Math.ceil((5 + 31)/7); 물론, Each는 아닙니다. 월은 31일이므로 12개월을 포함하는 배열을 만들어야 하며, 각 요소는 각 달의 일 수를 나타냅니다. 하지만 윤년의 2월은 29일이지만 평년의 2월은 28일밖에 없습니다. 따라서 배열을 만들기 전에 윤년을 결정하는 함수를 만들어야 합니다:

//如果当前年份能被4整除但是不能被100整除或者能被400整除，即可确定为闰年，返回1，否则返回0
function isLeap(year) {
 return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
}

그런 다음 월 배열을 만듭니다:

var days_per_month = new Array(31, 28 + isLeap(year), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31);

이렇게 하면 다음과 같은 작업을 수행할 수 있습니다. 윤년에도 올바른 일수가 검색됩니다. 오늘의 관련 정보를 가져오는 데 다음 코드가 사용됩니다.

var today = new Date(),       //获取当前日期
  y = today.getFullYear(),     //获取日期中的年份
  m = today.getMonth(),      //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
  d = today.getDate(),       //获取日期中的日(方便在建立日期表格时高亮显示当天)
  firstday = new Date(y, m, 1),  //获取当月的第一天
  dayOfWeek = firstday.getDay(),  //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
  days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 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) {   //第一层for循环创建tr标签
  document.write(&#39;<tr>&#39;);
  for (k = 0; k < 7; k++) {      //第二层for循环创建td标签
   var idx = 7 * i + k;        //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;  //将当月的1号与星期进行匹配
   //do something else
  }
  document.write(&#39;</tr>&#39;);
  }

3. 첨부된 전체 js 캘린더 코드는

<script>
  //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
  function isLeap(year) {
  return year % 4 == 0 ? (year % 100 != 0 ? 1 : (year % 400 == 0 ? 1 : 0)) : 0;
  }
  var i, k,
  today = new Date(),                 //获取当前日期
  y = today.getFullYear(),              //获取日期中的年份
  m = today.getMonth(),                //获取日期中的月份(需要注意的是：月份是从0开始计算，获取的值比正常月份的值少1)
  d = today.getDate(),                //获取日期中的日(方便在建立日期表格时高亮显示当天)
  firstday = new Date(y, m, 1),            //获取当月的第一天
  dayOfWeek = firstday.getDay(),           //判断第一天是星期几(返回[0-6]中的一个，0代表星期天，1代表星期一，以此类推)
  days_per_month = new Array(31, 28 + isLeap(y), 31, 30, 31, 30, 31, 31, 30, 31, 30, 31),         //创建月份数组
  str_nums = Math.ceil((dayOfWeek + days_per_month[m]) / 7);                        //确定日期表格所需的行数
  document.write("<table cellspacing=&#39;0&#39;><tr><th>日</th><th>一</th><th>二</th><th>三</th><th>四</th><th>五</th><th>六</th></tr>"); //打印表格第一行(显示星期)
  for (i = 0; i < str_nums; i += 1) {         //二维数组创建日期表格
  document.write(&#39;<tr>&#39;);
  for (k = 0; k < 7; k++) {
   var idx = 7 * i + k;                //为每个表格创建索引,从0开始
   var date = idx - dayOfWeek + 1;          //将当月的1号与星期进行匹配
   (date <= 0 || date > days_per_month[m]) ? date = &#39; &#39;: date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d ? document.write(&#39;<td class="today">&#39; + date + &#39;</td>&#39;) : document.write(&#39;<td>&#39; + date + &#39;</td>&#39;);  //高亮显示当天
  }
  document.write(&#39;</tr>&#39;);
  }
  document.write(&#39;</table>&#39;);
 </script>

CSS 부분을 자유롭게 플레이해 보세요. 현재 시간은 2016년 5월 2일입니다. 렌더링은 다음과 같습니다.

위 js에서 작성한 오늘의 간단한 달력 효과 [구현 코드]는 모두 편집자님이 공유한 내용이므로, 참고로 Script House PHP Chinese를 지원해 주셨으면 좋겠습니다. 웹사이트

오늘의 간단한 달력 효과 작성에 대한 더 많은 js 관련 기사를 보려면 PHP 중국어 웹사이트를 주목하세요!