javascript_javascript スキルに基づいて簡単なカレンダーを作成する

1. テーブルの行数の問題

日付テーブルを表示したいので、まずテーブルの行数と列数を知る必要があります。日曜日から合計 7 つの列があります (カレンダーの最初の列は日曜日です)。 ）土曜日まで。行番号の問題を解決する前に、まず今月の最初の日が何曜日であるかを知る必要があります。各月の最初の日は、カレンダー上では必ずしも日曜日から始まるわけではありません。最初の日は金曜日または土曜日である可能性があります。不確かなので、No. 1 の左側の部分を空のフォームに置き換える必要があります。では、空のテーブルをいくつ使用すればよいでしょうか? ここでは getDay() メソッドを使用する必要があります。このメソッドは、配列 [0-6] で数値を返します。つまり、0 は日曜日、1 は月曜日、2 は火曜日を表します。の上。 。したがって、月の 1 日が金曜日の場合、左側に 5 つの空のテーブルが必要になります。 1 か月が 31 日ある場合、テーブルの最終的な行数は次のようになります:

var tr_nums = Math.ceil((5 + 31)/7);

もちろん、すべての月が 31 日であるわけではないため、12 か月を含む配列を作成する必要があります。各要素は各月に含まれる日数を表します。しかし、2月は特別で、閏年の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 マスターで 2 つのループを実行すると、コードは次のようになります:

for (i = 0; i < str_nums; i += 1) {   //第一层for循环创建tr标签
  document.write('<tr>');
  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('</tr>');
  }

3. 完全な JS カレンダー コードを添付します

<script>
  //判断当前年份是否是闰年(闰年2月份有29天，平年2月份只有28天)
  function isLeap(year) {
  return year % 4 == 0 &#63; (year % 100 != 0 &#63; 1 : (year % 400 == 0 &#63; 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='0'><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('<tr>');
  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]) &#63; date = ' ': date = idx - dayOfWeek + 1;  //索引小于等于0或者大于月份最大值就用空表格代替
   date == d &#63; document.write('<td class="today">' + date + '</td>') : document.write('<td>' + date + '</td>');  //高亮显示当天
  }
  document.write('</tr>');
  }
  document.write('</table>');
 </script>
 

CSS 部分を自由にいじってみてください。現在の時刻は 2016 年 5 月 2 日です。レンダリングは次のとおりです。

以上がこの記事の全内容です。JavaScript プログラミングを学習する皆さんのお役に立てれば幸いです。